Responsive Web Design by Example

Basic responsive web design 8
Viewport meta tag and CSS3 media queries 8
Limitations of responsive web design 10
Responsive image with picture element 11
Learn more about HTML5 and CSS3 14
Introduction to RWD frameworks 15
Why use frameworks? 15
Skeleton 16
Bootstrap 16
Foundation 17
Who is using these frameworks? 17
Hivemind 18
Living.is 18
Swizzle 20
The cons 22
Tools required to build responsive websites 22
Web browsers 23
Code editors 23
Responsive bookmarklets 23
A brief introduction to CSS preprocessors 25
CSS preprocessor compiler tool 25
LESS 26
Nesting rules 26
Variables 28
Mixins 28
Parametric mixins 30
Operations 31

Variables 32
Mixins 33
Nested rules 34
Selector inheritance 34
Learning more on CSS preprocessors 35
Learning LESS 35
Learning Sass 36
What are we going to create in this book? 36
Summary 37
Chapter 2: Constructing a Responsive Portfolio Page with Skeleton 39
Getting started with Skeleton 40
Time for action – creating a working directory and getting Skeleton 40
What is included in Skeleton? 41
Starter HTML document 41
The viewport meta tag 41
HTML5 Shim 41
Responsive Grid 42
Clearing styles 44
Media queries 45
Typography styles 46
Button styles 46
Form styles 47
Apple icon devices 48
Photoshop template 48
How will the website look? 50
Website navigation 51
Thumbnail hover effect 52
Setting up the Skeleton document 52
Time for action – adding an extra CSS file 52
Adding custom fonts 53
Time for action – embedding Google Web Fonts 54
Preparing the images 55
Social media icons 56
Time for action – sprite images 57
Contact icons 58
HTML5 elements 59
HTML5 custom data attributes 59
Time for action – structuring the HTML document 60
Summary 66Variables 32
Mixins 33
Nested rules 34
Selector inheritance 34
Learning more on CSS preprocessors 35
Learning LESS 35
Learning Sass 36
What are we going to create in this book? 36
Summary 37
Chapter 2: Constructing a Responsive Portfolio Page with Skeleton 39
Getting started with Skeleton 40
Time for action – creating a working directory and getting Skeleton 40
What is included in Skeleton? 41
Starter HTML document 41
The viewport meta tag 41
HTML5 Shim 41
Responsive Grid 42
Clearing styles 44
Media queries 45
Typography styles 46
Button styles 46
Form styles 47
Apple icon devices 48
Photoshop template 48
How will the website look? 50
Website navigation 51
Thumbnail hover effect 52
Setting up the Skeleton document 52
Time for action – adding an extra CSS file 52
Adding custom fonts 53
Time for action – embedding Google Web Fonts 54
Preparing the images 55
Social media icons 56
Time for action – sprite images 57
Contact icons 58
HTML5 elements 59
HTML5 custom data attributes 59
Time for action – structuring the HTML document 60
Summary 66