Introduction of HTML5 ★ Boilerplate.

1. October
10
2011
HTML5 ★ Boilerplate Mohammed Arif
Manager Interactive Development @ SapientNitro
www.mohammedarif.com
https://twitter.com/#!/arif_iq
http://in.linkedin.com/in/mohdarif

2. Agenda
 What is HTML5 Boilerplate
 Who uses it
 Why is it
 Where do I get it
 10 things you should know
 Build Script
 Walkthrough of default.properties
 Demo
 Git Basics

3. What is HTML5 Boilerplate
HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template
for a fast, robust and future-proof site. ~html5boilerplate.com
 H5BP is a front-end starting template and collection of best
practices. ~Paul Irish

4. Who uses it
https://github.com/h5bp/html5-boilerplate/wiki/sites

5. Why is it
Cross-browser compatible
HTML5 ready. Use the new tags with certainty
Optimal caching and compression rules for grade-A performance
Best practice site configuration defaults
Mobile browser optimizations
Progressive enhancement graceful degradation
IE specific classes for maximum cross-browser control
Handy .no-js and .js classes to style based on capability

6. Why is it
Never go wrong with your doctype or markup!
An optimal print stylesheet, performance optimized
iOS, Android, Opera Mobile-adaptable markup and CSS skeleton
.htaccess file that allows proper use of HTML5 features and faster page load
CDN hosted jQuery with local fallback failsafe.

7. Where do I get it
http://html5boilerplate.com/
Or bleeding edge:
https://github.com/h5bp/html5-boilerplate

8. Three Versions
• Use the documented version to learn
• Use the stripped version in your project
• Customize as per your need, use HTML5 template generator @
http://www.initializr.com/

9. 10 things you should know
• IE conditional comments
• X-UA-Compatible
• Meta charset
• jQuery include
• Overflow-y
• Ie6 background cache
• .htaccess
• Test suite
• Build Script [https://github.com/h5bp/ant-build-script]

10. Build Script…
A tool that optimizes your code for the Web
• Combines and minifies javascript (via yui compressor)
• Inlines stylesheets specified using @import in your CSS
• Combines and minifies CSS
• Optimizes JPGs and PNGs (with jpegtran & optipng)
• Removes development only code (any remaining console.log files, profiling,
test suite)
• Basic to aggressive html minification (via htmlcompressor)

11. Build Script
Auto generates a cache manifest file (and links from the html tag) when you
enable a property in the project config file.
Revises the file names of your assets so that you can use heavy caching (1 year
expires).
Upgrades the .htaccess to use heavier caching
Updates your HTML to reference these new hyper-optimized CSS + JS files
Updates your HTML to use the minified jQuery instead of the development
version
Remove unneeded references from HTML (like a root folder favicon)
Runs your JavaScript through a code quality tool (optional)

12. Build Script Requirements
Windows
 Get the Java JDK (JRE isn't enough)
 Get WinAnt and point the installer to Program Files/Java/jre6/bin/
Mac/Linux
You've got all your dependencies pre-installed, likely. You may need a
yum install ant-contrib or what have you
http://net.tutsplus.com/tutorials/html-css-techniques/automated-optimization-with-html5-boilerplate-build/