HTML5 ★ Boilerplate


Published on

Introduction of HTML5 ★ Boilerplate.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 ★ Boilerplate

  1. 1. October 10 2011HTML5 ★ Boilerplate Mohammed Arif Manager Interactive Development @ SapientNitro!/arif_iq
  2. 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 Demo Git Basics
  3. 3. What is HTML5 Boilerplate HTML5 Boilerplate is the professional badasss base HTML/CSS/JS template for a fast, robust and future-proof site. H5BP is a front-end starting template and collection of best practices. ~Paul Irish
  4. 4. Who uses it
  5. 5. Why is itCross-browser compatibleHTML5 ready. Use the new tags with certaintyOptimal caching and compression rules for grade-A performanceBest practice site configuration defaultsMobile browser optimizationsProgressive enhancement graceful degradationIE specific classes for maximum cross-browser controlHandy .no-js and .js classes to style based on capability
  6. 6. Why is itNever go wrong with your doctype or markup!An optimal print stylesheet, performance optimizediOS, Android, Opera Mobile-adaptable markup and CSS skeleton.htaccess file that allows proper use of HTML5 features and faster page loadCDN hosted jQuery with local fallback failsafe.
  7. 7. Where do I get it Or bleeding edge:
  8. 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 @
  9. 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 []
  10. 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. 11. Build ScriptAuto generates a cache manifest file (and links from the html tag) when youenable a property in the project config file.Revises the file names of your assets so that you can use heavy caching (1 yearexpires).Upgrades the .htaccess to use heavier cachingUpdates your HTML to reference these new hyper-optimized CSS + JS filesUpdates your HTML to use the minified jQuery instead of the developmentversionRemove unneeded references from HTML (like a root folder favicon)Runs your JavaScript through a code quality tool (optional)
  12. 12. Build Script RequirementsWindows  Get the Java JDK (JRE isnt enough)  Get WinAnt and point the installer to Program Files/Java/jre6/bin/Mac/Linux Youve got all your dependencies pre-installed, likely. You may need a yum install ant-contrib or what have you