Responsive Web Design by Example Beginner's Guide
Limitations of responsive web design
Learn more about HTML5 and CSS3
Introduction to RWD frameworks
Tools required to build responsive websites
A brief introduction to CSS preprocessors
Learning more on CSS preprocessors
What are we going to create in this book?
Constructing a Responsive Portfolio Page with Skeleton
Time for action – creating a working directory and getting Skeleton
Setting up the Skeleton document
Time for action – adding an extra CSS file
Time for action – embedding Google Web Fonts
Time for action – sprite images
Time for action – structuring the HTML document
Enhancing the Portfolio Website with CSS3
Time for action – specifying box-sizing
Time for action – setting the Headings font family
Time for action – adding the header styles
Portfolio thumbnail and caption styles
Time for action – adding thumbnail and caption styles
Time for action – creating a thumbnail hover effect
Website navigation for filtering the portfolio
Time for action – creating a portfolio filter
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
Developing a Product Launch Site with Bootstrap
Getting started with Bootstrap
Time for action – setting up Bootstrap
Time for action – installing CrunchApp
Time for action – creating a new LESS file with CrunchApp
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
Time for action – adding a new font with @font-face
Responsive features in Bootstrap
Time for action – creating a new LESS file to store CSS3 media queries
Time for action – creating basic HTML5 documents
Time for action – adding an HTML content structure for our homepage
Time for action – adding HTML content structure for the Gallery page
Time for action – adding HTML structure for the Contact page
Time for action – adding HTML content structure for the About page
Time for action – adding HTML content structure for the Privacy and Policy page
Enhancing the Product Launch Site with CSS3 and LESS
Time for action – defining custom variables
Time for action – defining custom LESS mixins
Time for action – adding general style rules
Time for action – overwriting the Bootstrap button styles
Why are the buttons that large?
Time for action – adding website header styles
Time for action – adding footer styles
Time for action – adding styles for the Hello World section
Time for action – adding styles for the Call-to-action section
Time for action – adding styles for the Gallery section
Time for action – adding styles for the Testimonial section
Time for action – adding styles for an input email
Time for action – adjusting the page title styles
Time for action – adding styles for the Contact page
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
A Responsive Website for Business with Foundation Framework
Time for action – installing the Foundation framework and setting up a new project
Time for action – installing Sublime Text and enabling SCSS syntax highlighting
Time for action – creating new SCSS stylesheets for maintainability
Time for action – configuring the project path in config.rb
Time for action – watch SCSS stylesheets for changes
Foundation framework components
Constructing the HTML documents
Time for action – configuring a basic HTML document
Time for action – constructing the homepage content
Time for action – constructing the Services page content markup
Time for action – constructing the Pricing page content markup
Time for action – constructing the About Us page content markup
Time for action – structuring the Contact Us page content
Time for action – running the command line to monitor the project
An introduction to Sass color functions
Time for action – customizing the Foundation framework Sass variables for colors
Time for action – adding custom font families with the Compass mixin
Time for action – styling the header section
An introduction to Compass Sprite Helpers
Time for action – adding styles for the footer section
An introduction to CSS3 structural selectors
Time for action – adding styles to the homepage
Time for action – adding styles to the service 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