Mastering Responsive Web Design

334 Pages·2015·4.09 MB·English

by  Ricardo Zea

Mastering Responsive
Web Design with HTML5
and CSS3
Become a master in RWD with this practical and
engaging guide
Ricardo Zea
BIRMINGHAM - MUMBAI
Mastering Responsive Web Design with HTML5
and CSS3
Copyright © 2015 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: August 2015
Production reference: 1180815
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-023-4
www.packtpub.com
Credits
Author Project Coordinator
Ricardo Zea Shweta H. Birwatkar
Reviewers Proofreader
Jean-Marc Buytaert Safis Editing
Tristan Denyer
Alan Plotko Indexer
Priya Sane
J. Pedro Ribeiro
Marija Zaric
Production Coordinator
Shantanu N. Zagade
Commissioning Editor
Usha Iyer
Cover Work
Shantanu N. Zagade
Acquisition Editor
Meeta Rajani
Cover Image
Ricardo Zea
Content Development Editor
Neeshma Ramakrishnan
Technical Editor
Manali Gonsalves
Copy Editors
Roshni Banerjee
About the Author
Ricardo Zea, originally from Medellín, Colombia, is a passionate and seasoned
full-stack designer now located in Dayton, OH (USA). He is always looking for ways
to level up his skills and of those around him. Constantly wondering how things are
made on the Web, how they work, and why they work the way they do have made
Ricardo a very technical designer, allowing him to explain to others the intricacies
of design and the technicalities of the Web in ways that are very easy to understand
and assimilate.
With a master's degree in publicity and advertising and having a deep passion for
understanding human behavior complemented with a fierce competitive PC gaming
hunger have allowed Ricardo to "switch" from the creative side of the brain to the
rational side very easily. This has allowed him to visualize and create technically
sound web and mobile designs that are responsive, perform well, and convey the
proper message through design.
Ricardo is the organizer of the CodePen Dayton meetup group. He's a member of the
Dayton Web Developers and UX Dayton meetup groups. He's also one of the first
members of SitePoint's Ambassadors program. He is the author of the monthly Web
Design & Development, Level Up! Newsletter. He was also a technical reviewer for the
books Sass and Compass, Designers Cookbook and Sass Essentials by Packt Publishing.
He is a real-time, live one-on-one expert advisor on https://wizpert.com/.
For several years, he was also a Flash and CorelDRAW professor at different
universities in his home country, Colombia.
Ricardo has 15 years of experience in web design and 20 years of experience in visual
and graphic design.
You can contact Ricardo through the following links:
Personal website: http://ricardozea.design
Twitter: @ricardozea (https://twitter.com/ricardozea)
Wizpert: https://wizpert.com/ricardozea
Acknowledgment
A huge and infinite thanks to my wife, Heather, and my beautiful son, Ricardo; they
are my inspiration to be a better professional, a better person, a better husband, and
a better dad.
To my mom, Socorro, who showed me the values that made me the man I am today.
To my dad, Ricardo "Pinta" Zea, for giving me the determination to not only be good
at what I do, but to also be the best I can be.
To God, for allowing me to share with you, the readers, my knowledge of the
sometimes unforgiving world of Responsive Web Design.
And to you directly, the readers, for giving me the chance to help you be better
web professionals.
About the Reviewers
Jean-Marc Buytaert, with an associate's degree in multimedia and web design
and a bachelor's degree in fine arts in interactive media design, has been involved
in a diverse array of projects since 2003, ranging from graphic design, to video
production, web design, and last but not least, web development, where he found
his niche.
With experience in multiple web scripting languages and having developed websites
using several content management systems, Jean-Marc is now a lead web developer
for Houston-based interactive marketing agency, TopSpot Internet Marketing, where
he oversees a team of web developers and builds responsive websites using MODX
and WordPress while implementing third-party web services using new technologies
and APIs.
Tristan Denyer is a UX designer for web and mobile applications, including
web apps and portals, eCommerce, online video players and widgets, games
(online, iPhone, board), marketing sites, and more. He is also a UI developer and
WordPress theme developer. He is currently leading the UX design for the product
team at a start-up in San Francisco.
He recently wrote a book, A Practical Handbook to WordPress Themes, to help owners
and operators of self-hosted WordPress websites get the most out of their themes.
His passions include prototyping, web security, writing, carpentry, and burritos.
He can be contacted through the following links:
Twitter: @tristandenyer
GitHub: https://github.com/tristandenyer
His portfolio and blog: http://tristandenyer.com/
Alan Plotko is a software developer who works across the full stack. He loves
developing applications for the Web and always makes time to attend "hackathons",
weekend-long programming competitions where participants build projects from
scratch to benefit the community. Alan's experience extends to Python development,
various database technologies such as NoSQL, and frameworks for rapid application
development. When he's not writing code, Alan spends his spare time writing
stories; he is an avid writer, having previously self-published a fantasy novel and
reviewed books for Packt.
J. Pedro Ribeiro is a Brazilian user interface engineer living in the heart of London.
He has been working on the Web for several years, coding websites for start-ups
and large companies. Currently working at RetailMeNot UK, he is responsible
for creating the mobile-first experience at VoucherCodes.co.uk, focusing on
performance and usability.
Website: jpedroribeiro.com
GitHub: github.com/jpedroribeiro
Marija Zaric is a web designer living in Belgrade with a focus on individual and
commercial clients who demand websites that are clear, modern, creative, simple,
and responsive. She works with clients from USA and all over the world, helping
them present their services in a unique, yet professional, way.
She is a relentless learner. What she loves the most about web design is the constant
changes in the field, especially its evolution over the last 4 years when she became
inspired by its simplicity, great images, typography, and the possibility of optimizing
a single website for various devices.
She redesigned and incorporated these styles into her own website and called it
Creative Simplicity. Marija was a reviewer for the book Responsive Media in HTML5
by Packt Publishing.
Her projects can be found at http://www.marijazaric.com/.
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 [email protected] for more details.
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.
TM
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.
Table of Contents
Preface vii
Chapter 1: Harness the Power of Sass for
Responsive Web Design 1
How does Sass work? 2
Installing Sass 3
Downloading the Ruby installer 3
Opening the command line 3
Installing the Sass gem 4
Using Sass 4
The basic concepts of Sass for RWD 9
Sass or SCSS 10
The Sass syntax 10
The SCSS syntax 10
Sass variables 12
Sass mixins 13
Sass arguments 16
How to use several arguments in the same mixin 17
Setting default values in multiple arguments 18
Nesting in Sass 19
Partial files (partials) in Sass 20
The Sass extend/inherit feature 21
Sass comments 22
Vendor prefixing 23
The order of vendor prefixing 24
Automating vendor prefixing 25
Using a third-party program to compile 35
The Prepros app 35
One compiler only 47
Sass mixins to house our media queries 47
Media queries mixin methods 47
Summary 53
[ i ]