HTML5 Boilerplate Web Development

Features of HTML5 Boilerplate 7
Cross-browser compatibility 8
Doctype 8
Normalize.css 8
Clearfix 8
Search box styling 8
Conditional classes 9
Modernizr 9
No console.log errors 9
Helper classes 9
Performance optimizations 9
Progressive enhancement 10
Accessible focus styles 10
Print styles 10
Tools to start with 10
Beware 11
Where to get files 11
An overview of H5BP files 12
Asking for help 13
Summary 14
Chapter 2: Starting Your Project 15
Creating your initial project folder 15
Downloading the latest version of HTML5 Boilerplate 15
Using the shell script 16
Creating our project 17
House-keeping 18
Setting the tags 18

[ ii ]
Editing favicons 19
Adding third-party libraries 22
Using a Content Delivery Network 22
Adding Google Analytics ID 25
Updating humans.txt 25
Summary 26
Chapter 3: Creating Your Site 27
Working on the markup 27
Creating the markup 28
Deciding which element to use 30
Writing valid markup 30
Creating the styles 30
Helpful style classes we can use 32
Image replacement 33
Hiding elements 33
Hiding elements visually 35
Hiding elements without impacting layout 36
Clearing floats 39
Writing valid stylesheets 42
Style languages to write productive stylesheets 42
Advantages 43
Disadvantages 43
Where to learn? 44
Using HTML5 Boilerplate with style languages 44
Summary 45
Chapter 4: Adding Interactivity and Completing Your Site 47
Using jQuery 47
Using other libraries 47
Adding smooth-scroll plugin and interaction 48
Adding HTML5 features safely with Modernizr 52
When to use Modernizr.load 55
Using Modernizr to load CSS features 55
Testing our site 56
Testing on non-desktop browsers 64
Summary 66
Chapter 5: Customizing the Apache Server 67
Server-side configurations 67
Setting up the Apache server 67
Installing Apache 68
Mac 68
Windows 68
Linux 69
Configuring Apache 70