HTML5 is the future of the web, but building the future is hard work and so it’s always great to get a bit of help with that. Some of that help comes in the form of HTML5 Boilerplate from the minds of Paul Irish and Divya Mani, who have teamed up to bring us “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site”. Boilerplate is basically a bunch of files, the exact kinds of files you would create as you start working on a new website, except that these already contain the basic starting code and include all the best practices baked in. Things like reset styles, pngfix, HTML5 markup and more. I went over most of it line by line and after a few adjustments based on my own personal preferences I’m going to start using it as the base for all websites I work on.
Some of the reasons Boilerplate is awesome:
- The index file has everything you’ll ever need in the <head>, even the stuff you might have not known you needed — like an empty conditional comment so IE doesn’t choke up on its own code.
- There are adjustments for mobile browsers as well as a reference to an iphone compatible icon, because even if you don’t design for mobile specifically, it’s nice to provide at least minimal compatibility.
- jQuery is included via Google API but it has a fallback to a local version
- YUI profiler and asynchronous Google Analytics are included
- The scripts have a wrapper for console.log so you won’t break anything if you forget about it (I do it all the time)
- In addition to reset styles, a few basic and simple styles are included that take care of common tweaks, such as letter spacing, input fields alignment, link outlines, monospace tags (like <code> and <pre>), and even the helper classes like clearfix.
- On top of all that, which already classifies this as awesome, there’s also crossdomain.xml (just in case you want to use it), robots.txt and .htaccess
And they’re not even done yet, as minification script and gzipping are coming.