Data, Maps, Usability, and Performance

HTML5 Starter Frameworks and Boilerplates

Last updated on December 6, 2012 in Development

HTML5 Boilerplate

The HTML5 Boilerplate is a really popular staring place for front-end development today and I have to agree that it is pretty awesome. You can also select a mobile version and a boilerplate for emails. Personally, however, I like to start with much less. This boilerplate has many things (htaccess file, robots.txt, polyfills) that I am not really concerned about when just stating out; I want something simple. If you click on the “Get Custom Build” link, it takes you to Initializr, which then let’s you generate the HTML5 boilerplate customized to your liking. I love the various things you can select, like Bootstrap, and all the things you can deselect. I highly recommend using Initializr as a starting point, but below I will cover many more options to consider when choosing a boilerplate.

The Real HTML5 Boilerplate is a true starting point, a base that only has the necessary markup, html5shiv for IE, and reset CSS. HTML5 Doctor also talks about a similar starting point.

HTML Shell is a custom boilerplate HTML5 markup generator written by Steve Niles. It is somewhat similar to Initializr in the way it allows you to make some choices and a live preview shows the you the HTML source code that you can copy and paste.

HTML5 Reset is another HTML5 boilerplate based on simplicity and best practices. It includes some more stuff like jQuery, Modernizr, etc.

Get Skeleton is a really simple and powerful start for responsive and mobile-friendly development. It has been well tested and it also has Drupal, WordPress, and Rails versions.

Foundation calls itself the most advanced responsive front-end framework in the world. I would say it is a great alternative to the HMTL5 boilerplate.

Finally, if you like working with a CSS grid, I recommend checking out Tiny Fluid Grid, Responsive Grid System, 5grid, Bedrock and Extra Strength Responsive Grids. This is a great collection of the best front-end CSS frameworks. Also, if you want a comparison between Bootstrap, Foundation, and Skeleton, this is a good responsive CSS framework comparison.

So, what is your favorite starting point?


On this subject, I also recommend this tutorial on creating a typography layout in HTML5. Also, here is my personal, super simple HTML5 blank template with jQuery. Here is another awesome barebones HTML5 starter template.


Easy front-end framework
HTML5 Reset Stylesheet
HTML5 Starter Pack
Toucan CSSreset – lightweight, HTML5-ready CSS reset

Tags: , ,

Facebook Twitter Hacker News Reddit More...