Responsive Web Design by Example : Beginner's Guide - Second Edition
()
About this ebook
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.
Related to Responsive Web Design by Example
Related ebooks
Responsive Web Design with HTML5 and CSS3 Rating: 4 out of 5 stars4/5Professional CSS3 Rating: 5 out of 5 stars5/5Mastering Responsive Web Design with HTML5 and CSS3 Rating: 0 out of 5 stars0 ratingsPractical Web Development Rating: 5 out of 5 stars5/5Bootstrap 4 Cookbook Rating: 0 out of 5 stars0 ratingsMongoose for Application Development Rating: 5 out of 5 stars5/5Mastering Bootstrap 4 Rating: 5 out of 5 stars5/5Sass and Compass for Designers Rating: 0 out of 5 stars0 ratingsWordPress Web Application Development Rating: 5 out of 5 stars5/5Bootstrap 4 Site Blueprints Rating: 5 out of 5 stars5/5jQuery for Designers Beginner's Guide Second Edition Rating: 5 out of 5 stars5/5Mastering Sass Rating: 0 out of 5 stars0 ratingsA Pocket Guide to CSS Animations Rating: 5 out of 5 stars5/5Responsive Web Design with HTML5 and CSS3 Essentials Rating: 5 out of 5 stars5/5Instant Responsive Web Design Rating: 5 out of 5 stars5/5jQuery for Designers Beginner's Guide Rating: 5 out of 5 stars5/5HTML5 and CSS3: Building Responsive Websites Rating: 0 out of 5 stars0 ratingsResponsive Web Design with HTML5 and CSS3 - Second Edition Rating: 4 out of 5 stars4/5HTML5 Games: Creating Fun with HTML5, CSS3, and WebGL Rating: 4 out of 5 stars4/5Bootstrap By Example Rating: 0 out of 5 stars0 ratingsLearning Bootstrap 4 - Second Edition Rating: 5 out of 5 stars5/5Web Design Playground: HTML & CSS The Interactive Way Rating: 5 out of 5 stars5/5Instant SASS CSS How-to Rating: 5 out of 5 stars5/5Responsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsJavaScript Unlocked Rating: 5 out of 5 stars5/550 Recipes for Programming CSS3 Rating: 0 out of 5 stars0 ratingsJavaScript and JSON Essentials Rating: 5 out of 5 stars5/5Web Development with MongoDB and Node.js Rating: 0 out of 5 stars0 ratingsLearning HTML5 by Creating Fun Games Rating: 4 out of 5 stars4/5
Internet & Web For You
Coding For Dummies Rating: 5 out of 5 stars5/5HTML in 30 Pages Rating: 5 out of 5 stars5/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsSocial Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5Podcasting For Dummies Rating: 4 out of 5 stars4/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Remote/WebCam Notarization : Basic Understanding Rating: 3 out of 5 stars3/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5Tor and the Dark Art of Anonymity Rating: 5 out of 5 stars5/5Mike Meyers' CompTIA Security+ Certification Guide, Third Edition (Exam SY0-601) Rating: 5 out of 5 stars5/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5The Internet Is Not What You Think It Is: A History, a Philosophy, a Warning Rating: 3 out of 5 stars3/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5Beginner's Guide To Starting An Etsy Print-On-Demand Shop Rating: 0 out of 5 stars0 ratingsPython QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsThe $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5The Cyber Attack Survival Manual: Tools for Surviving Everything from Identity Theft to the Digital Apocalypse Rating: 0 out of 5 stars0 ratingsEverybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5
Reviews for Responsive Web Design by Example
0 ratings0 reviews
Book preview
Responsive Web Design by Example - Thoriq Firdaus
Table of Contents
Responsive Web Design by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
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
Have a Go Hero — delve into responsive web design
Pop Quiz — responsive web design main components
Responsive web design inspiration sources
Summary
2. Web Development Tools
Choosing a code editor
Sublime Text Package Control
Time for action – installing Sublime Text Package Control
What just happened?
Have a go hero – install the LESS and Sass syntax-highlighting package
Setting up a local server
Time for action – installing XAMPP
What just happened?
Choosing a CSS preprocessor compiler
Browser for development
Source maps
Mobile emulator
Managing project dependency with Bower
Time for action – installing Node.js
What just happened?
Have a go hero – get yourself familiar with command lines
Time for action – installing Bower
What just happened?
Bower commands
Pop quiz – web development tools and command lines
Summary
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
What just happened?
Have a go hero – making the directory structure more organized
Pop quiz – using polyfill
The blog HTML structures
Time for action – constructing the blog
What just happened?
Have a go hero – creating more blog pages
Pop quiz – HTML5 elements
Summary
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
What just happened?
Have a go hero – renaming the output
Pop quiz – website performance rules
Thinking mobile first
Composing the blog styles
Time for action – composing the base style rules
What just happened?
Have a go hero – customizing the link color
Time for action – enhancing the header and the navigation appearance with CSS
What just happened?
Have a go hero – customizing the header
Time for action – enhancing the content section appearance with CSS
What just happened?
Have a go hero – improving the content section
Time for action – enhancing the footer section appearance with CSS
What just happened?
Optimize the blog for desktop
Time for action – composing style rules for desktop
What just happened?
Making Internet Explorer more capable with polyfills
Time for action – patch Internet Explorer with polyfills
What just happened?
Have a go hero – polish the blog for Internet Explorer
Summary
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
What just happened?
Have a go hero – specifying Bower custom directory
Pop quiz – test your understanding on Bower commands
Updating Bower components
The portfolio website HTML structure
Time for action – building the website HTML structure
What just happened?
Have a go hero – extending the portfolio website
Pop quiz – Bootstrap button classes
Summary
6. Polishing the Responsive Portfolio Website with LESS
Basic LESS syntax
Variables
Nesting style rules
Mixins
Parametric mixins
Specify a default value in a parametric mixin
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
What just happened?
Have a go hero – name and organize the style sheets
Pop quiz – which of the following option is not LESS Import option?
Working with Koala
Time for action – compiling LESS into CSS using Koala
What just happened?
Polishing the portfolio website with LESS
Time for action – composing the website styles with LESS syntax
What just happened?
Have a go hero – being more creative
Pop quiz — using LESS function and extend syntax
Improve and make the website functioning with JavaScript
Time for action – compiling JavaScript with Koala
What just happened?
Summary
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
What just happened?
Time for action – building the website's HTML structure
What just happened?
Summary
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
Have a go hero – diving into Sass
Pop quiz – multiple parameters in Sass function
Pop quiz – Sass color manipulation
Project recap
Style sheet organizations
Time for action – organizing and compiling style sheets
What just happened?
The website's look and feel
Time for action – build on the website
What just happened?
Have a go hero – colors and creativities
Pop quiz – importing an external Sass style sheet
Fine-tuning the website
Time for action – compiling JavaScript and styling the website with media queries
What just happened?
Have a go hero – remove unnecessary Foundation components
Summary
A. Pop Quiz Answers
Chapter 1, Responsive Web Design
Pop quiz – responsive web design main components
Chapter 2, Web Development Tools
Pop quiz – web development tools and command lines
Chapter 3, Constructing a Simple Respons3ive Blog with Responsive.gs
Pop quiz – using polyfill
Pop quiz – HTML5 elements
Chapter 4, Enhancing the Blog Appearance
Pop quiz – website performance rules
Chapter 5, Developing a Portfolio Website with Bootstrap
Pop quiz – test your understanding on Bower commands
Pop quiz – Bootstrap button classes
Chapter 6, Polishing the Responsive Portfolio Website with LESS
Pop quiz – which of the following option is not LESS Import option?
Pop quiz – using LESS function and extend syntax
Chapter 8, Extend Foundation
Pop quiz – multiple parameters in Sass function
Pop quiz – Sass color manipulation
Pop quiz – importing external Sass style sheet
Index
Responsive Web Design by Example Beginner's Guide Second Edition
Responsive Web Design by Example Beginner's Guide Second Edition
Copyright © 2014 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: March 2013
Second edition: November 2014
Production reference: 1171114
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-325-9
www.packtpub.com
Credits
Author
Thoriq Firdaus
Reviewers
Saumya Dwivedi
Gabriel Hilal
Joydip Kanjilal
Anirudh Prabhu
Taroon Tyagi
Commissioning Editor
Julian Ursell
Acquisition Editor
Sam Wood
Content Development Editor
Kirti Patil
Technical Editor
Anand Singh
Copy Editors
Sarang Chari
Shambhavi Pai
Project Coordinator
Kranti Berde
Proofreaders
Maria Gould
Lesley Harrison
Linda Morris
Indexers
Rekha Nair
Priya Sane
Production Coordinator
Kyle Albuquerque
Cover Work
Kyle Albuquerque
About the Author
Thoriq Firdaus is a web developer and lives in Indonesia. He has been dabbling in web design and development for more than 5 years, working with many clients of varying sizes. He appreciates the giving nature of the web design community at large. He also loves trying out new things in CSS3 and HTML5 and occasionally speaks at some local colleges and institutions on the subject.
Outside of work, he loves spending time with his wife and daughter, watching movies, and enjoying meals at nearby cafes and restaurants.
About the Reviewers
Saumya Dwivedi is currently a member of the technical staff of Groupon India Pvt. Ltd. She obtained a BTech degree in Computer Science from the International Institute of Information Technology, Hyderabad. She is a software enthusiast and worked on the responsive design of Gnome websites during one of her internships. She hails from Indore (Madhya Pradesh) and currently resides in Chennai.
Gabriel Hilal is a full-stack web developer specializing in Ruby on Rails and related technologies. He has a Bachelor's degree in Information Systems (Internet Business) and a Master's degree in Information Systems with Management Studies, both from Kingston University, London. During his time at the university, he developed a passion for Ruby on Rails, and since then, he has done freelance work using behavior-driven development and agile methodologies to build high-quality Rails applications. He can be contacted via his website (www.gabrielhilal.com) or by e-mail at
Joydip Kanjilal is a Microsoft Most Valuable Professional in ASP.NET, speaker, and author of several books and articles. He has more than 16 years of experience in IT, with more than 10 years in Microsoft .NET and related technologies. He has been selected as MSDN Featured Developer of the Fortnight (MSDN) a number of times and also as Community Credit Winner at www.community-credit.com several times.
He is the author of the following books:
Visual Studio 2010 and .NET 4 Six in One, Wiley India Private Limited
ASP.NET 4.0 Programming, McGraw-Hill Osborne
Entity Framework Tutorial, Packt Publishing
Pro Sync Framework, Apress
Sams Teach Yourself ASP.NET Ajax in 24 Hours, Sams
ASP.NET Data Presentation Controls Essentials, Packt Publishing
He is the reviewer of the following books:
jQuery UI Cookbook, Packt Publishing
Instant Testing with QUnit, Packt Publishing
Instant jQuery Selectors, Packt Publishing
C# 5 First Look, Packt Publishing
jQuery 1.3 Reference Guide, Packt Publishing
HTML 5 Step by Step, O'Reilly Media
He has authored more than 250 articles for some of the most reputable sites, such as www.msdn.microsoft.com, www.code-magazine.com, www.asptoday.com, www.devx.com, www.ddj.com, www.aspalliance.com, www.aspnetpro.com, www.sql-server-performance.com, www.sswug.org, and so on. A lot of these articles have been selected and published on www.asp.net—Microsoft's official site on ASP.NET.
He has years of experience in designing and architecting solutions for various domains. His technical strengths include C, C++, VC++, Java, C# 5, Microsoft .NET, Ajax, WCF 4, ASP.NET MVC 4, ASP.NET Web API, REST, SOA, design patterns, SQL Server 2012, Google's Protocol Buffers, WPF, Silverlight 5, operating systems, and computer architecture.
He blogs at http://aspadvice.com/blogs/joydip and his website is www.joydipkanjilal.com. You can follow him on Twitter at https://twitter.com/joydipkanjilal and on Facebook at https://www.facebook.com/joydipkanjilal. You can also find him on LinkedIn at http://in.linkedin.com/in/joydipkanjilal.
I would like to thank my family for providing me with the support to make this book a success.
Anirudh Prabhu is a software engineer (Web) with more than 5 years of industry experience. He specializes in technologies such as HTML5, CSS3, PHP, jQuery, Twitter Bootstrap, and SASS. He also has knowledge of CoffeeScript and AngularJS. In addition to web development, he has been involved in building training materials and writing tutorials for twenty19 (http://www.twenty19.com/) for the technologies mentioned previously.
Besides Packt Publishing, he has been associated with Apress and Manning Publications as a technical reviewer for several of their titles.
Taroon Tyagi is a dreamer, designer, and a solution architect for mobile platforms and the Web. He is a rationalistic optimist, with lust for food, technology, and knowledge. He has more than 5 years of professional and industrial experience in web, UX, UI design, and frontend development. He currently works as the Head of Design and Interaction at Fizzy Software Pvt. Ltd, based out of Gurgaon, India.
When online, he is constantly involved with web communities experimenting with new technologies and looking for inspiration. When offline, he enjoys music, books, wire-framing, and digging philosophy.
He worked as a technical reviewer for a few books published by Packt Publishing.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Preface
Responsive web design has taken the web design industry by storm. It's not a trend but a norm; it is something that is now normally expected from a website. You might have read and come across many discussions about responsive web design on blogs, forums, Facebook, and Twitter. Likewise, you want your website to be responsive in order to make it presentable on any screen size. Hence, this is the book you are looking for.
This book teaches you how to build presentable, responsive websites through examples, tips, and best practices of code writing and project organization. Additionally, you will also learn how to use CSS preprocessors, LESS, and Sass, which allows you to compose leaner style rules.
What this book covers
Chapter 1, Responsive Web Design, looks at the basic principle behind responsive web design, explains the basic technicalities to build a responsive website and features a couple of responsive frameworks as well as the advantages of using one.
Chapter 2, Web Development Tools, helps you to prepare, install, and set up the software to run projects and build responsive websites.
Chapter 3, Constructing a Simple Responsive Blog with Responsive.gs, introduces the Responsive.gs framework and builds the HTML structure of a blog using several HTML5 elements and the Responsive.gs grid system.
Chapter 4, Enhancing the Blog