Free Sample
+ Collection

Responsive Web Design by Example : Beginner's Guide

Cookbook
Thoriq Firdaus

Discover how you can easily create engaging, responsive websites with minimum hassle!
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook

Want this title & more?

$21.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849695428
Paperback338 pages

About This Book

  • Rapidly develop and prototype responsive websites by utilizing powerful open source frameworks
  • Focus less on the theory and more on results, with clear step-by-step instructions, previews, and examples to help you along the way
  • Learn how you can utilize three of the most powerful responsive frameworks available today: Bootstrap, Skeleton, and Zurb Foundation

Who This Book Is For

Ideal for anybody who wants their online presence to be compatible with devices and resolutions of any size, "Responsive Web Design by Example" shows you how to select the right framework for your own project requirements and then guides you through the process of installation, configuration, and customization. With three highly structured and meticulously designed projects to choose from, it is the ideal reference for both new and existing web developers who want to be able to augment their skills and showcase their content in a truly professional manner.

Table of Contents

Chapter 1: 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
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?
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
Chapter 3: 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
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
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
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
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
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
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
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
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

What You Will Learn

  • Learn how to decide which responsive framework is right for you
  • Harness the flexibility of Skeleton to create a truly unique portfolio
  • Use Bootstrap to almost effortlessly create a stunning product launch page
  • Create an online presence for your business that will work on any device with Zurb Foundation
  • Discover how you can leverage CSS to its full potential for refining your responsive websites

In Detail

Responsive web design is an explosive area of growth in modern web development due to the huge volume of different device sizes and resolutions that are now commercially available. You can now create your very own responsive website quickly and efficiently, allowing you to showcase your content in a format that will work on any device with an Internet browser.

By following our detailed step-by-step instructions in this structured reference guide, you will learn how you can build engaging responsive websites. With coverage of Bootstrap, Skeleton, and Zurb Foundation you'll learn about three of the most powerful responsive frameworks available today.

Leading you through by practical example, you'll find that this essential reference develops your understanding by actually helping you create beautiful websites step by step in front of your very eyes. After going over the basics, you'll be able to choose between creating your own responsive portfolio page with Skeleton, building a stunning product page with Bootstrap, or setting up your own professional business website with Zurb Foundation. Ultimately you'll learn how to decide which framework is right for you, and how you can deploy and customize it to your exact specifications!

Authors

Read More

Recommended for You

Responsive Web Design – From Concept to Complete Site [Video]
$ 72.25