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.
When a self-professed geek sits down to build a website from scratch, there are two thought processes.
- The task at hand is daunting and you wonder where to start.
- 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.
Enough about Boilerplate. So what is a 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.
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.
Pingback: How to Create a Fluid Grid System for your Website - Sony Simon