Responsive Web Design by Example: Beginner's Guide, 2nd Edition

✍ Scribed by Thoriq Firdaus

• Publisher: Packt Publishing
• Year: 2014
• Tongue: English
• Leaves: 255
• Edition: 2
• Category: Library

✦ Synopsis

Build powerful and engaging responsive websites with ease

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: Responsive Grid System, Bootstrap, and Foundation

Who This Book Is For

This 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.

What You Will Learn

• Use Responsive Grid System, Bootstrap, and Foundation frameworks for responsive web design
• Build a semantic website structure with HTML5 elements
• Determine the responsive website persona with CSS3
• Harness the power of CSS preprocessor to compose programmable and more maintainable CSS
• Customize and extend responsive design frameworks
• Use Bower to organize website dependencies
• Learn how to decide which framework best suits your project specification

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.

By following our detailed step-by-step instructions in this reference guide, you will learn to build engaging responsive websites. With coverage of Responsive Grid System, Bootstrap, and Foundation, you will learn about three of the most powerful frameworks in responsive web design. You will learn to create a cool blog page, a beautiful portfolio site, and a crisp professional business site and make them all totally responsive. You'll also find out which framework works best for your project specifications.

✦ Table of Contents

Cover
Copyright
Credits
About the Author
About the Reviewers
www.PacktPub.com
Table of Contents
Preface
Chapter 1: Responsive Web Design
Responsive web design in a nutshell
Viewport meta tag
A word on screen size and viewport
Media queries
A look into responsive frameworks
The Responsive.gs framework
A word on CSS box model
CSS3 box sizing
The Bootstrap framework
The Foundation framework
A brief introduction to CSS preprocessors
Responsive web design inspiration sources
Summary
Chapter 2: Web Development Tools
Choosing a code editor
Time for action – installing Sublime Text Package Control
Time for action – installing XAMPP
Choosing a CSS preprocessor compiler
Browser for development
Source maps
Mobile emulator
Managing project dependency with Bower
Time for action – installing Node.js
Time for action – installing Bower
Bower commands
Summary
Chapter 3: Constructing a Simple Responsive Blog with Responsive.gs
Responsive.gs components
The classes
Using HTML5 elements for semantic markups
HTML5 search input types
HTML5 placeholder attribute
HTML5 in Internet Explorer
A look into polyfills in the Responsive.gs package
Box sizing polyfills
CSS3 media queries polyfill
Examining the blog's wireframe
Organizing project directories and files
Time for action – creating and organizing project directories and assets
The blog HTML structures
Time for action – constructing the blog
Summary
Chapter 4: Enhancing the Blog Appearance
Using CSS3
Creating rounded corners with CSS3
Creating drop shadow
CSS3 browser supports and the use of vendor prefix
Customizing to placeholder text styles
Using CSS libraries
Working with Koala
Time for action – integrating project directory into Koala and combining the style sheets
Thinking mobile first
Composing the blog styles
Time for action – composing the base style rules
Time for action – enhancing the header and the navigation appearance with CSS
Time for action – enhancing the content section appearance with CSS
Time for action – enhancing the footer section appearance with CSS
Optimize the blog for desktop
Time for action – composing style rules for desktop
Making Internet Explorer more capable with polyfills
Time for action – patch Internet Explorer with polyfills
Summary
Chapter 5: Developing a Portfolio Website with Bootstrap
The Bootstrap components
The Bootstrap responsive grid
Bootstrap buttons and forms
Bootstrap Jumbotron
Bootstrap third-party extensions
Jasny Bootstrap off-canvas
Digging into Bootstrap
Using font icons
Examining the portfolio website layout
Project directories, assets, and dependencies
Time for action – organizing project directories, assets, and installing project dependencies with Bower
Updating Bower components
The portfolio website HTML structure
Time for action – building the website HTML structure
Summary
Chapter 6: Polishing the Responsive Portfolio Website with LESS
Basic LESS syntax
Variables
Nesting style rules
Mixins
Parametric mixins
Merging mixins with extend syntax
Generating value with mathematical operations
Generating color with mathematical operations and LESS functions
Referential import
Using a variable in an import statement
Using source map for easier style debugging
More on LESS
External style sheet references
Time for action – creating style sheets and organizing external style sheet references
Working with Koala
Time for action – compiling LESS into CSS using Koala
Polishing the portfolio website with LESS
Time for action – composing the website styles with LESS syntax
Improve and make the website functioning with JavaScript
Time for action – compiling JavaScript with Koala
Summary
Chapter 7: A Responsive Website for Business with Foundation
Examining the website layout
A look into Foundation
The grid system
The buttons
The navigation and top bar
The pricing tables
Moving around Orbit
How is Orbit constructed?
Adding add-ons, the font Icons
Further on Foundation
Additional required assets
The project directories, assets, and dependencies
Time for action – organizing the project directories, assets, and dependencies
Time for action – building the website's HTML structure
Summary
Chapter 8: Extending Foundation
Syntactically Awesome Style Sheets
Nesting rules
Storing a value with a variable
Variable interpolation
Reusable code block with mixins
A brief on the Sass mixin library
Creating and using a Sass function
Manipulating color with Sass functions
Useful Foundation's own function
Em and Rem
Project recap
Style sheet organizations
Time for action – organizing and compiling style sheets
The website's look and feel
Time for action – build on the website
Fine-tuning the website
Time for action – compiling JavaScript and styling the website with media queries
Summary
Appendix: Pop Quiz Answers
Index

✦ Subjects

Internet & Social Media, Web Site Design, Reference, Web Design, Programming Languages, Programming, Web Development & Design, Computers & Technology