IMPORTANT: This article discusses the HTML5 Boilerplate template and assumes that you have, at least, a basic understanding of its page layout. I will discuss the layout in a very roundabout way, not in depth. I STRONGLY suggest that you not only read the HTML5 Boilerplate documentation, but also watch the really good 40 minute walk-through video of the code.
My initial plan was to duplicate the default TwentyTen theme that comes with WordPress, then convert it to HTML5. I REALLY didn’t want to use a pre-built WP HTML5 theme, preferring to instead convert the tags to HTML5 myself, learning things as I go. In other words, I wanted to figure out the answers to the test myself instead of copying off of someone else’s paper.
The theme uses the same layout and external file structure that made HTML5 Boilerplate famous. Most notably…
- the “plugin.js” file to be used to safely store third-party plugin code
- the HTML5 Reset Stylesheet for CSS cross-browser compatibility
- the two CSS files for both mobile and print layouts
- the “viewport” meta tag which has many uses, including use within a responsive web design setup
- the functionality that force-loads the most-recent IE rendering engine and Google Chrome Frame when needed
- the conditional browser detection statements for loading the proper tag and its respective classes
Best of all, the Boilerplate theme installs a really good Admin panel under the appearance tab in WordPress. With this, you can pick and choose which files and functionality you want to include on your site. You don’t want to use Modernizr on your site? Un-check a box in the admin panel. Prefer to install and update jQuery core file on your own instead of the theme auto-installing it for you? Un-check a box in the admin panel.
Boilerplate theme is really bare-bones, suiting all my development needs. This may be my main starter them for WordPress development from here on in.
WordPress research is done…on to site mockups!!!!!
One final note: if I was still going to recode the TwentyTen theme into HTML5, I would follow the info in Richard Shepard’s wonderful Smashing Magazine article on this topic. I left a very polite comment that Boilerplate is already HTML5-ready and saves you the time…it got deleted. Glean from it what you will. Update: March 7th, 2011: It’s since been put back.