HTML5 Comes to a Boil

HTML5 Boilerplate is the professional frontend developers’s base HTML/CSS/JS template for a fast, robust and future-safe site. I would probably classify this as overkill. I have mixed feelings about starting with a full plate of food, then scraping what I don’t want to eat back into the pot, or worse just trashing it. Still, this has merit if you want to make sure you’re covering all the bases. The Boilerplate markup is very helpful to newbies as well as people who like excessive code.

Harry Roberts, a web developer in the UK and the wizard of csswizardry.com has his own spin on the subject. Well argued and possibly the best perspective on the subject I’ve seen to date. Here’s a snippet of his post:

The main problem with the HTML Boilerplate is that it makes so many assumptions. All you can assume with a HTML5 boilerplate is that someone wants to use HTML5, that’s it. Assuming someone wants x Javascript libraries, Google Analytics, IE6 .png fixes, IEx conditional classes and all that other stuff is not what a boilerplate is made to do. A boilerplate should be a suitable starting point to which developers can add all that stuff if they want to.

As well as all the script assumptions that are made, it also assumes markup. Although not by a long way at all, it starts building the site for you. The HTML5 Boilerplate doesn’t know what markup I want…

You can read the entire post here.

The Plate

In defense of the HTML5 Boilerplate site, I still think you should have the chance to make up your own mind. Click the image below for a brief intro video to the “plate”.

After more than four years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain XHR and Flash. A starter Apache .htaccess config file hooks you up with caching rules and preps your site to serve HTML5 video, use @font-face, and drop your site’s filesize by half with robust gzipping.

NOTE: Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

Why it is good

• Cross-browser compatible (IE6+, yeah we got that.)
• 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 … yeah yeah we got that
• IE specific classes for maximum cross-browser control
• Handy .no-js and .js classes to style based on capability
• Console.log nerfing so you won’t break anyone by mistake.
• Never go wrong with your doctype or markup!
• An optimal print stylesheet, performance optimized.
• iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
• .clearfix, .visuallyhidden classes to style things wisely and accessibly.
• .htaccess file that allows proper use of HTML5 features and faster page load
• CDN hosted jQuery with local fallback failsafe.
• Think there’s too much? The HTML5 Boilerplate is delete-key friendly. 🙂

 Want in? Click HERE!