HTML5 ★ Boilerplate

2,953 views

Published on

Introduction of HTML5 ★ Boilerplate.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,953
On SlideShare
0
From Embeds
0
Number of Embeds
427
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 ★ Boilerplate

  1. 1. October 10 2011HTML5 ★ Boilerplate Mohammed Arif Manager Interactive Development @ SapientNitro www.mohammedarif.com https://twitter.com/#!/arif_iq http://in.linkedin.com/in/mohdarif
  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 default.properties 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. ~html5boilerplate.com H5BP is a front-end starting template and collection of best practices. ~Paul Irish
  4. 4. Who uses ithttps://github.com/h5bp/html5-boilerplate/wiki/sites
  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 http://html5boilerplate.com/ Or bleeding edge: https://github.com/h5bp/html5-boilerplate
  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 @ http://www.initializr.com/
  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 [https://github.com/h5bp/ant-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 http://net.tutsplus.com/tutorials/html-css-techniques/automated-optimization-with-html5-boilerplate-build/

×