Wednesday, August 11th, 2010

Don’t Build from Scratch. You Now Have an HTML5 Boilerplate to Work With

The HTML5 love continues to be doled out by Paul Irish. First, he offered up Modernizr and now, he’s teamed up with Divya Manian to create an HTML5 boilerplate which leverages best practices to get your started.

It’s essentially a good starting template of html and css and a folder structure that works. But baked into it is years of best practices from front-end development professionals. Take a peek through the source to get a feel of what’s inside. And if you think there’s too much? Delete key that badboy.

Straight from the site, here are some of the features that make this very cool:

  • 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
  • Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.
  • Javascript profiling…in IE6 and IE7? Sure, no problem.
  • 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.
  • IE6 pngfix baked in.
  • .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. :)

I’ve heard several people mention about getting some sort of HTML5 template to work from setup so it’s nice to see one completed and out in the wild. This should be a big help.

The project uses everyone’s favorite source control system Github so you can grab it from there or download a zipped up file from the site.

Posted by Rey Bango at 10:58 am

2.8 rating from 5 votes


Comments feed TrackBack URI

In before everyone comments to say how much overkill this is. They’ve already declared it delete-key friendly. So instead of complaining, just don’t use what you don’t like! yay!

Comment by SlexAxton — August 11, 2010

Awesome. This is just the kind of thing that’ll stop me procrastinating and start writing HTML5 :)
And nice looking site to top it off! (even if it is a bit slow to scroll with all the fancy-pantsy fonts)

Comment by Skilldrick — August 11, 2010

Another quick disclaimer, this template is mostly a general-frontend development springboard. To use HTML5 in modern browsers, all you need is a Doctype, a title, and content. Boilerplate just has a lot of goodies that you might not have thought of when you kick off a project.. It still works fine in HTML4. :)

That said, there are some fixes/additions in here for HTML5: Modernizr for feature detection (which includes the html5shim and IE printprotector for IE compat with the new semantic elements). A bunch of apache config for proper serving of html5 video and webfonts, and easy switches to use something like CORS for cross domain ajax.

Comment by PaulIrish — August 11, 2010

Does this boilerplate include a solution for the problem “innershiv” fixes? Or is this already being handled by relying jQuery?
More info

Comment by rasmusfl0e — August 12, 2010

Mr. Irish, I would like to thank you for this. I have just started building a mobile site for the company I work for in HTML5 and am going to be rebuilding my site in it. It is nice to have a full blown example to look at/build off of.

Comment by SZRimaging — August 12, 2010

Good call.. But, no, currently boilerplate doesn’t include innershiv, but I agree there is a need for it. I’ve gone over a solution for this from Jonathan Neal with Resig and it’s something we’d like jQuery to have.
In the meantime, innershiv is the answer.

Comment by PaulIrish — August 12, 2010

This is an awesome idea. I tried to open the website in IE7 and it does not look good, there are javascript errors and stuff. Is that supposed to happen?

Comment by ChiragNirmal — August 12, 2010

@rasmusfl0e, @PaulIrish,
seems to me that the innershiv is just a fix for jQuery users alone, those who use frameworks like Prototype or MooTools already have a powerful tool to create HTML elements without using the flaky innerHTML which can lead to broken HTML and can’t be validated.
If you are planning on getting this on the boilerplate, maybe it’s time to get a config tool first instead of just pointing to the delete key. Adding cruft just because lazy developers use innerHTML instead of document.createElement is not a good design decision for any library/template kit.

Comment by gonchuki — August 12, 2010

@PaulIrish: Ok ;)
Even though it isn’t stated up front – innershiv doesn’t rely on third party libraries (from the website): “innerShiv doesn’t require jQuery or any other library“.
I’ve been using it with MooTools – no probs. :)

Comment by rasmusfl0e — August 12, 2010

Can I suggest a small change in the css? You could use the new clearfix method instead of the previous one and it would perfectly fit without the star hack (

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
.ie6 .clearfix, .ie7 .clearfix { zoom: 1; }

btw it’s really useful, good work.

Comment by fcaldera — August 13, 2010

I just landed that clearfix last night. :) Cheers

Comment by PaulIrish — August 18, 2010

Leave a comment

You must be logged in to post a comment.