Home Page Icon
Home Page
Table of Contents for
Table of Contents
Close
Table of Contents
by Divya Manian
HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development
Table of Contents
HTML5 Boilerplate Web Development
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
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Before We Begin
Features of HTML5 Boilerplate
Cross-browser compatibility
Doctype
Normalize.css
Clearfix
Search box styling
Conditional classes
Modernizr
No console.log errors
Helper classes
Performance optimizations
Progressive enhancement
Accessible focus styles
Print styles
Tools to start with
Beware
Where to get files
An overview of H5BP files
Asking for help
Summary
2. Starting Your Project
Creating your initial project folder
Downloading the latest version of HTML5 Boilerplate
Using the shell script
Creating our project
House-keeping
Setting the tags
Editing favicons
Adding third-party libraries
Using a Content Delivery Network
Protocol-relative URLs
Google CDN hosting
Adding Google Analytics ID
Updating humans.txt
Summary
3. Creating Your Site
Working on the markup
Creating the markup
Deciding which element to use
Writing valid markup
Creating the styles
Why not reset.css?
Helpful style classes we can use
Image replacement
Hiding elements
Hiding elements visually
Hiding elements without impacting layout
Clearing floats
Writing valid stylesheets
Style languages to write productive stylesheets
Advantages
Disadvantages
Where to learn?
Sass
Less
Stylus
Using HTML5 Boilerplate with style languages
Sass
Less
Stylus
Summary
4. Adding Interactivity and Completing Your Site
Using jQuery
Using other libraries
Adding smooth-scroll plugin and interaction
Adding HTML5 features safely with Modernizr
When to use Modernizr.load?
Using Modernizr to load CSS features
Testing our site
Testing on non-desktop browsers
Summary
5. Customizing the Apache Server
Server-side configurations
Setting up the Apache server
Installing Apache
Mac
Windows
Linux
Configuring Apache
Features available out of the box
Removing ETags
Gzip components
Using Expires header for better cache control
Custom 404 page
Forcing the latest IE version
Using UTF-8 encoding
Serving the right MIME types
Blocking access to hidden folders
Blocking access to backup and source files
Starting Rewrite engine
Preventing 404 errors for non-existing redirected folders
Additional customizations
Suppressing or forcing the "www." at the beginning of URLs
Setting cookies from iFrames
PHP security defaults
Stop advertising Apache version
Allowing concatenation from within specific JS and CSS files
Stopping screen flicker in IE on CSS rollovers
Preventing SSL certificate warnings
Cross-domain policies you should be aware of
Cross-domain AJAX requests
CORS-enabled images
Webfont access
Using other server configuration files
web.config
lighttpd.conf
nginx.conf
node.js
Google App Engine
Summary
6. Making Your Site Better
Finding the best experience for Internet Explorer
Mobile-first styles for IE
ie.scss
main.scss
Printing with jQuery in IE6 and IE7
Styling disabled form elements in Internet Explorer
Suppressing IE6 image toolbar
Writing CSS3 easier with tools
Sass
Less
Output CSS
Converting HTML5 Boilerplate CSS to Sass or Less
HTML5 Boilerplate Compass extension
HTML5 Boilerplate Sass fork
Print considerations
Finding and using polyfills
Making your site faster
DNS prefetching
Making your site more visible on search engines
Directing search spiders to your site map
Implementing X-Robots-Tag headers
Trailing slash redirects
Option 1: Rewrite example.com/foo to example.com/foo/
Option 2: Rewrite example.com/foo/ to example.com/foo
Handling users without JavaScript
Optimizing your images
8-bit PNGs
Tools for image optimization
ImageAlpha
ImageOptim
Using image sprites
CSS sprites from within Adobe Photoshop
CSS sprites with Compass
SpriteMe
Augmenting Google Analytics
Adding more tracking settings
Anonymize IP addresses
Tracking jQuery AJAX requests in Google Analytics
Tracking JavaScript errors in Google Analytics
Summary
7. Automate Deployment With the Build Script
The build script
Ant build script
Node build script
Which build script to use?
Using the Ant build script
Installing the build script
Smaller image files
Smaller CSS file
Smaller and fewer JS files
No comments in files
Build options
Minifying markup
Preventing image optimization
Using CSSLint
Using JSHint
Setting up the SHA filenames
Using with Drupal or WordPress
Updating build.xml
Setting up the project configuration properties
Setting the JS file delineator
Using the Node build script
Grunt
Installing Node build script
Initializing your project
Using the Node build script with an existing project
Using the Node build script to build your project
Text
Minify
Server
Connect
Using with Drupal or WordPress
Next steps
Summary
A. You Are an Expert,Now What?
Writing unit tests for your code
Creating a testing environment
Esoteric defaults you should know about
Meta UTF-8
The HTML Doctype
The details behind the clearfix solution
What do the print styles do?
Print media query
Optimizing colors and backgrounds
Better links
Rendering all code and quotes within one page
Rendering tables better
Rendering images better
Margins on pages
Optimal settings for orphans and widows
Keeping headings with content
What are protocol-relative URLs?
Using conditional comments
Browser style hacks
Server-side browser detection
Stylesheets based on conditional comments
Class names based on conditional comments
What is meta x-ua-compatible?
Meta tag in your HTML page
HTTP header response from the server
Edge
IE9
IE8
IE7
Emulate IE9
Emulate IE8
Emulate IE7
IE5
Contribute
Reporting issues
Pull requests
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover
Next
Next Chapter
HTML5 Boilerplate Web Development
Table of Contents
HTML5 Boilerplate Web Development
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
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Before We Begin
Features of HTML5 Boilerplate
Cross-browser compatibility
Doctype
Normalize.css
Clearfix
Search box styling
Conditional classes
Modernizr
No console.log errors
Helper classes
Performance optimizations
Progressive enhancement
Accessible focus styles
Print styles
Tools to start with
Beware
Where to get files
An overview of H5BP files
Asking for help
Summary
2. Starting Your Project
Creating your initial project folder
Downloading the latest version of HTML5 Boilerplate
Using the shell script
Creating our project
House-keeping
Setting the tags
Editing favicons
Adding third-party libraries
Using a Content Delivery Network
Protocol-relative URLs
Google CDN hosting
Adding Google Analytics ID
Updating humans.txt
Summary
3. Creating Your Site
Working on the markup
Creating the markup
Deciding which element to use
Writing valid markup
Creating the styles
Why not reset.css?
Helpful style classes we can use
Image replacement
Hiding elements
Hiding elements visually
Hiding elements without impacting layout
Clearing floats
Writing valid stylesheets
Style languages to write productive stylesheets
Advantages
Disadvantages
Where to learn?
Sass
Less
Stylus
Using HTML5 Boilerplate with style languages
Sass
Less
Stylus
Summary
4. Adding Interactivity and Completing Your Site
Using jQuery
Using other libraries
Adding smooth-scroll plugin and interaction
Adding HTML5 features safely with Modernizr
When to use Modernizr.load?
Using Modernizr to load CSS features
Testing our site
Testing on non-desktop browsers
Summary
5. Customizing the Apache Server
Server-side configurations
Setting up the Apache server
Installing Apache
Mac
Windows
Linux
Configuring Apache
Features available out of the box
Removing ETags
Gzip components
Using Expires header for better cache control
Custom 404 page
Forcing the latest IE version
Using UTF-8 encoding
Serving the right MIME types
Blocking access to hidden folders
Blocking access to backup and source files
Starting Rewrite engine
Preventing 404 errors for non-existing redirected folders
Additional customizations
Suppressing or forcing the "www." at the beginning of URLs
Setting cookies from iFrames
PHP security defaults
Stop advertising Apache version
Allowing concatenation from within specific JS and CSS files
Stopping screen flicker in IE on CSS rollovers
Preventing SSL certificate warnings
Cross-domain policies you should be aware of
Cross-domain AJAX requests
CORS-enabled images
Webfont access
Using other server configuration files
web.config
lighttpd.conf
nginx.conf
node.js
Google App Engine
Summary
6. Making Your Site Better
Finding the best experience for Internet Explorer
Mobile-first styles for IE
ie.scss
main.scss
Printing with jQuery in IE6 and IE7
Styling disabled form elements in Internet Explorer
Suppressing IE6 image toolbar
Writing CSS3 easier with tools
Sass
Less
Output CSS
Converting HTML5 Boilerplate CSS to Sass or Less
HTML5 Boilerplate Compass extension
HTML5 Boilerplate Sass fork
Print considerations
Finding and using polyfills
Making your site faster
DNS prefetching
Making your site more visible on search engines
Directing search spiders to your site map
Implementing X-Robots-Tag headers
Trailing slash redirects
Option 1: Rewrite example.com/foo to example.com/foo/
Option 2: Rewrite example.com/foo/ to example.com/foo
Handling users without JavaScript
Optimizing your images
8-bit PNGs
Tools for image optimization
ImageAlpha
ImageOptim
Using image sprites
CSS sprites from within Adobe Photoshop
CSS sprites with Compass
SpriteMe
Augmenting Google Analytics
Adding more tracking settings
Anonymize IP addresses
Tracking jQuery AJAX requests in Google Analytics
Tracking JavaScript errors in Google Analytics
Summary
7. Automate Deployment With the Build Script
The build script
Ant build script
Node build script
Which build script to use?
Using the Ant build script
Installing the build script
Smaller image files
Smaller CSS file
Smaller and fewer JS files
No comments in files
Build options
Minifying markup
Preventing image optimization
Using CSSLint
Using JSHint
Setting up the SHA filenames
Using with Drupal or WordPress
Updating build.xml
Setting up the project configuration properties
Setting the JS file delineator
Using the Node build script
Grunt
Installing Node build script
Initializing your project
Using the Node build script with an existing project
Using the Node build script to build your project
Text
Minify
Server
Connect
Using with Drupal or WordPress
Next steps
Summary
A. You Are an Expert,Now What?
Writing unit tests for your code
Creating a testing environment
Esoteric defaults you should know about
Meta UTF-8
The HTML Doctype
The details behind the clearfix solution
What do the print styles do?
Print media query
Optimizing colors and backgrounds
Better links
Rendering all code and quotes within one page
Rendering tables better
Rendering images better
Margins on pages
Optimal settings for orphans and widows
Keeping headings with content
What are protocol-relative URLs?
Using conditional comments
Browser style hacks
Server-side browser detection
Stylesheets based on conditional comments
Class names based on conditional comments
What is meta x-ua-compatible?
Meta tag in your HTML page
HTTP header response from the server
Edge
IE9
IE8
IE7
Emulate IE9
Emulate IE8
Emulate IE7
IE5
Contribute
Reporting issues
Pull requests
Index
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset
