PacktLib: Responsive Web Design by Example

Responsive Web Design by Example Beginner's Guide

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Responsive Web Design

Basic responsive web design

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?

Summary

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?

How will the website look?

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

Time for action – sprite images

HTML5 elements

HTML5 custom data attributes

Time for action – structuring the HTML document

Summary

Enhancing the Portfolio Website with CSS3

CSS box model

Time for action – specifying box-sizing

CSS units of measurement

Setting font families

Time for action – setting the Headings font family

Header styles

Time for action – adding the header styles

Using CSS selectors

Using CSS3 pseudo classes

Portfolio thumbnail and caption styles

Time for action – adding thumbnail and caption styles

CSS3 2D Transformations

CSS3 Transition

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

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

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

Creating HTML documents

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

Summary

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

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

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

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

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

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

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

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

Summary

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

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

Summary

Further references

Index