Boilerplate vs Bootstrap: What should I use?

It was whilst exploring HTML5 that I came across terms like Boilerplate and Bootstrap. So what are these fancy words? Here is a simple overview.

HTML5 BoilerPlate

When a self-professed geek sits down to build a website from scratch, there are two thought processes.

1. The task at hand is daunting and you wonder where to start.
2. You have done it a million times and now the repetitive tasks are getting superfluous and boring.

This is where I find something like HTML5 Boilerplate handy. HTML5 Boilerplate (aka H5BP) is a popular open source front-end template that helps web developers to create fast, robust and adaptable sites in HTML5. It is HTML5-ready but is also perfect for creating cross-browser compatible sites that work with older browsers.

You can download the full version from the HTML5 Boilerplate website and this version has all the explanatory documentation as well. Once you are familiar with it, you can also download a lighter version with only the essentials you need.

HTML5 Boilerplate comes with all the required HTML, CSS, JavaScript files and miscellaneous files like .htaccess, crossdomain.xml, browserconfig.xml, robots.txt etc. What is more awesome is Modernizr which is a set of scripts that detects the features on the user’s computer is also included with H5BP. This helps detect the HTML5/CSS3 features in the browsers and style the new HTML5 elements accordingly. If you also need a responsive template to start with and not a blank page, you can download HTML5 Boilerplate with Initializr.

Twitter Bootstrap

Enough about Boilerplate. So what is a Bootstrap?

Twitter Bootstrap is a popular HTML, CSS and JavaScript framework for developing responsive mobile-first projects on the web. It is a web design kit for building modern web sites. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins. You can build an entire web site from scratch with the Bootstrap.

The default Bootstrap comes with vanilla CSS, but there is an option to download it with LESS or SASS as well. Bootstrap adds extra elements like typography base and responsive grid which gives a head-start when putting together a new website/web application. So Bootstrap gives you not only a starting point, but also all the building blocks you may need to create your site.

CONFUSED?

Now, if you are thinking I have totally confused you, here is my 2 pence on which one to use and when. Say, I want to build myself a mansion.

HTML5 Boilerplate is like the blueprint – it gives me a template based on which I can build the mansion (our metaphor for a web application or a website). But it does not come with the bricks I need to build it.

Twitter Bootstrap on the other hand is a high-level blueprint with the bricks. It may even have more “bricks” than what is actually required. But, it is one of the best web design kit out there and you might as well use it to build an entire website from scratch.

You can even use both if you want to. And it is easy to do that, thanks to the Initializr project! Using Initializr you can create a custom download combining both into one package.