Thoughts on HTML5 Boilerplate

For those of you that don’t know, Paul Irish (along with the help of many contributors) recently released the HTML5 Boilerplate – a base template for those of us wishing to develop websites or web apps with HTML5 (along with CSS3 and JS). I recently went through the code-base, with the help of Paul himself (through this screencast available on Nettuts) and wanted to share some thoughts.

First of all, I am a big fan of Paul Irish and regularly read his blog. Clearly, a lot of thought and experience has gone into this boilerplate. Personally, I am a big fan of it and can’t wait to use it. I was originally going to use it for this site, but wanted to get a version out ASAP. Maybe over the next few weeks, I can incorporate some HTML5 elements into the theme.

Love the Accessibility – but is it too much?

One of the cool things I learned by going through the codebase was all the neat tricks that are in the Boilerplate to ensure that you can be confident when writing your app. Things shouldn’t break in IE and accessibility stretches back all the way to IE6. Some of the cool things in here (specifically the CSS file) are:

• A new version of Eric Meyer’s Reset
• Fonts.css from YUI to make sure your font sizes look the same across all browsers
• Normalize monospace styling and code-wrapping for pre, code tags (across multiple browsers)
• Align checkboxes, radios, text inputs with their labels
• Custom highlighting colors – including highlighting on the iPhone and iPad (using -webkit-tap-highlight- property
• <button> works in IE
• Bicubic resizing in IE so that scaled images look much better
• Some helper classes and a really nice Clearfix class
• Print stylesheets (inline) and Mobile stylesheets

My only problem with this was the importance given to IE6. Since it is depreciated, I don’t really feel that it is neccessary to support the browser (unless you’re running an enterprise app), so I’ll probably taking the CSS hacks for IE6 out of my boilerplate.

This is my new CSS Base

Even though I may still make sites that don’t take advantage of HTML5 (I’m still getting used to it), I definitely have a new CSS base to use. Stripping some of the IE6 stuff, and some of the HTML5 specific modifications out, HTML5 Boilerplate gives you a great base for your CSS code.

.htAccess Goodness

I’ll be the first to admit that I don’t know much about modifying .htaccess files. I know their importance, but my experience with them has been largely cut-paste from sources. What I do understand is optimizing my site’s loading speed for visitors, and the .htaccess file in the Boilerplate is easily going to replace the one I have on my server right now. All the stuff that YSlow says is wrong with my site (Gzip compression, ETags, expires) are already accounted for in the .htaccess inside the Boilerplate. It’s very well documented too, but I’ll get to that shortly.

For those not using Apache, there are versions out for IIS and nginx.

Documented so you can learn

By well documented, I don’t simply mean commented explanations or descriptions. The Boilerplate team has extensively used well-known and brand new techniques, and has provided a link to wherever they found the code, so you can peruse and learn more about what exactly you’re running on your site. Just by perusing a lot of the sites, I was able to learn a ton more about new CSS features that aren’t well used. (For example, this fix that solves the pesky rounded borders bleed in Webkit). This type of documentation encourages you to learn more. I’ve even subscribed to some of these sites.

Final Thoughts

To others like me who are excited about HTML5, but aren’t quite sure how to start – this Boilerplate’s for you. I was always a little worried that using HTML5 will heavily reduce the accessibility my apps will have, especially since even the modern browsers don’t support the same properties. Using HTML5 Boilerplate greatly reduces that fear for me, so I can’t wait to get started! Hope that goes for you too.
PS: You can contribute to the project via Github.