HTML5 Boilerplate and Twitter Bootstrap

DextrousDave picture DextrousDave · Mar 16, 2013 · Viewed 30.3k times · Source

I have read various questions answered on Stack about Twitter Bootstrap and HTML5 boilerplate.

I do know the following:

  • Bootstrap and H5BP are not equivalent and are used for different purposes
  • I know what Bootstrap is used for, I use it every day - It is a front-end framework, CSS and JS ready-to-use.Just apply the right classes to your selectors/elements and Bootstrap does everything for you. They have extensive support documentation on their website where you can see what they have to offer inside the framework and how to implement it...
  • You can combine the powers of the two by using initializr
  • H5BP is a template...um thats about it...

But what I don't know yet, is the following:

  • What the heck is H5BP used for? When visiting their website they only give you the source files and that's it(oh yes, and a video). What are the benefits of using it and why would you want to use it alongside Bootstrap for example?

Answer

net.uk.sweet picture net.uk.sweet · Mar 16, 2013

You're exactly right, it is a template. It's a template which brings together a set of best practices for developing HTML5 websites. You don't have to use it but if you do you can rest assured that you are building on a solid foundation which has been developed and honed by top developers over the years. In the words of Paul Irish, one of the principle developers of the project:

“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.”

I would suggest downloading the fully commented version of the boilerplate and reading through the code to give yourself an idea of the thought which has gone into it and the cases it handles. (See also this article which highlights code snippets from the boilerplate which you should be using on your site). These should help you decide whether you want to use it as a starting point for your project or not.

The HTML5bp initializr even includes a bootstrap option, so it couldn't really be any easier!