Thoriq Firdaus - Responsive WEB Design by Example - Begginer`s Guide+CD [2013, PDF, ENG]

Chapter 1: Responsive Web Design
Basic responsive web design
Viewport meta tag and CSS3 media queries
Limitations of responsive web design
Responsive image with picture element
Learn more about HTML5 and CSS3
Introduction to RWD frameworks
Why use frameworks?
Skeleton
Bootstrap
Foundation
Who is using these frameworks?
Hivemind
Living.is
Swizzle
The cons
Tools required to build responsive websites
Web browsers
Code editors
Responsive bookmarklets
A brief introduction to CSS preprocessors
CSS preprocessor compiler tool
LESS
Nesting rules
Variables
Mixins
Parametric mixins
Operations
Sass (Syntactically Awesome Stylesheets)
Variables
Mixins
Nested rules
Selector inheritance
Learning more on CSS preprocessors
Learning LESS
Learning Sass
What are we going to create in this book?
Summary

Up

Chapter 2: Constructing a Responsive Portfolio Page with Skeleton
Getting started with Skeleton
Time for action – creating a working directory and getting Skeleton
What is included in Skeleton?
Starter HTML document
The viewport meta tag
HTML5 Shim
Responsive Grid
Clearing styles
Media queries
Typography styles
Button styles
Form styles
Apple icon devices
Photoshop template
How will the website look?
Website navigation
Thumbnail hover effect
Setting up the Skeleton document
Time for action – adding an extra CSS file
Adding custom fonts
Time for action – embedding Google Web Fonts
Preparing the images
Social media icons
Time for action – sprite images
Contact icons
HTML5 elements
HTML5 custom data attributes
Time for action – structuring the HTML document
Summary

Up

Chapter 3: Enhancing the Portfolio Website with CSS3
CSS box model
An introduction to the CSS3 box-sizing property
Time for action – specifying box-sizing
CSS units of measurement
The pixel unit
The pixel unit in higher DPI screens
The em unit
Converting px to em
Calculating the em unit manually
Browser quirk for the em unit
The percent unit
Setting font families
Time for action – setting the Headings font family
Header styles
Time for action – adding the header styles
Using CSS selectors
Direct child selector
Adjacent sibling selector
General sibling selector
Using CSS3 pseudo classes
The CSS3 checked pseudo class
The CSS3 nth-child pseudo class
Portfolio thumbnail and caption styles
Time for action – adding thumbnail and caption styles
CSS3 2D Transformations
The translate() function
Vendor prefixes
CSS3 Transition
CSS3 Transition values
Time for action – creating a thumbnail hover effect
Website navigation for filtering the portfolio
Time for action – creating a portfolio filter
Footer section
Time for action – styling the footer section
Adjusting website styles in a smaller viewport
Time for action – viewport size less than 960 px
Time for action – viewport size between 767 px and 480 px
Time for action – viewport size less than 480 px
Testing the website in a different viewport size
Summary

Up

Chapter 4: Developing a Product Launch Site with Bootstrap
Getting started with Bootstrap
Time for action – setting up Bootstrap
Preparing the website images
Introducing LESS applications
Time for action – installing CrunchApp
Creating new LESS files
Time for action – creating a new LESS file with CrunchApp
Compiling LESS syntax into standard CSS
Time for action – adding LESS files to CrunchApp and compiling them into standard CSS
Introducing the @font-face rule to add a custom font family
Finding free fonts for embedding on the web
Writing the @font-face rule
Font formats for cross-browser compatibility
Time for action – adding a new font with @font-face
Responsive features in Bootstrap
Bootstrap grid system
CSS3 media queries in Bootstrap
Time for action – creating a new LESS file to store CSS3 media queries
Establishing navigation with Bootstrap
Creating HTML documents
Time for action – creating basic HTML5 documents
The homepage content
Time for action – adding an HTML content structure for our homepage
The HTML5 placeholder attribute
New input types in HTML5
The Gallery page content

Time for action – adding HTML content structure for the Gallery page
Contact page content

Time for action – adding HTML structure for the Contact page
The About page content

Time for action – adding HTML content structure for the About page
The Policy page

Time for action – adding HTML content structure for the Privacy and Policy page
Summary

Up

Chapter 5: Enhancing the Product Launch Site with CSS3 and LESS
Custom LESS variables
Time for action – defining custom variables
Custom LESS mixins
Time for action – defining custom LESS mixins
LESS color functions
Introducing the Scope concept
General style rules
Time for action – adding general style rules
Eliminating vendor prefixes
The button styles
Time for action – overwriting the Bootstrap button styles
Why are the buttons that large?
The header styles
Time for action – adding website header styles
The footer styles
Time for action – adding footer styles
Working on the homepage
The Hero section
Time for action – adding styles for the Hello World section
The Call-to-action section
Time for action – adding styles for the Call-to-action section
The Gallery section
Time for action – adding styles for the Gallery section
The Testimonial section
Time for action – adding styles for the Testimonial section
Subscribe Form
Time for action – adding styles for an input email
The Gallery page
Time for action – adjusting the page title styles
The Contact page
Time for action – adding styles for the Contact page
The About page
The Privacy Policy page
Making the website responsive
Time for action – enhancing the website's appearance for a viewport size of 767px or less
Time for action – enhancing the website's appearance for a viewport size of 480px or less
Excluding unnecessary style rules
Testing the website
Summary

Up

Chapter 6: A Responsive Website for Business with Foundation Framework
A Ruby-based framework
The Foundation gem
Time for action – installing the Foundation framework and setting up a new project
Sass and SCSS syntax
Sass and SCSS code editor
Time for action – installing Sublime Text and enabling SCSS syntax highlighting
Custom SCSS stylesheets
Time for action – creating new SCSS stylesheets for maintainability
Introducing Compass
Compass Helper Functions
Compass project configuration
Time for action – configuring the project path in config.rb
Compiling SCSS to CSS
Time for action – watch SCSS stylesheets for changes
Preparing the website images
Foundation framework components
The grid
CSS3 media queries
User interface styles
Orbit
Constructing the HTML documents
Basic HTML document
Time for action – configuring a basic HTML document
The website homepage
Time for action – constructing the homepage content
The Services page
Time for action – constructing the Services page content markup
The Pricing page
Time for action – constructing the Pricing page content markup
The About Us page
Time for action – constructing the About Us page content markup
The Contact Us page
Time for action – structuring the Contact Us page content
Summary

Up

Chapter 7: Extending Foundation
Monitoring the project
Time for action – running the command line to monitor the project
An introduction to Sass color functions
Sass variables
Time for action – customizing the Foundation framework Sass variables for colors
Custom font families
An introduction to the Compass font face mixin
Time for action – adding custom font families with the Compass mixin
The website navigation
Time for action – styling the header section
An introduction to Compass Sprite Helpers
The website's footer section
Time for action – adding styles for the footer section
An introduction to CSS3 structural selectors
The homepage
Time for action – adding styles to the homepage
The Services page
Time for action – adding styles to the service page
The Pricing page
Time for action – adding styles to the Pricing page
The About page and the Contact page
Time for action – adding styles for the About and the Contact page
Time for action – finalizing the website
Testing the website