Blogs

Boilerplate or Bootstrap?

Ivaylo Gerchev
Share

Beginning a new project is always associated with some repetitive work. And this is because most of our projects, at their starting point, share one and the same minimal code base, best practices and principles. We all know that “reinventing the wheel” every single time is not only superfluous, but also a quite boring job. For that reason there are tools that can help us in resolving this problem.

Boilerplate and Bootstrap are both extremely valuable tools when we need a starting foundation for our new projects. But the question is: which one to choose and which one is better for me and my project? It seems that many people are confused and embarrassed to give an adequate answer. That’s why, in this article, I’ll try to make things clear and help you to get the right decision for you.

The most obvious answer to the above question is: use what best suits your needs. But this is quite general advice and we need something more comprehensive and explanatory. Actually, in our case, we have not only two but four possibilities: we can use Boilerplate, we can use Bootstrap, we can use both of them or neither of them. To decide which option is best for you let me give you
a more detailed explanation.

1. Using Boilerplate

Boilerplate is a front-end kickstart template that contains a series of best practices and common inclusions. It offers a generic files/folders structure, HTML5-ready template and basic server-side global configurations. It’s like blueprint for your house, but without the building blocks. You have the idea what you’re going to build and you have made all preparation steps, but you don’t have the materials needed to actually build the house. You are free to include “the missing” HTML/CSS/JavaScript components from anywhere else, including from Bootstrap.

At first glance Boilerplate may seem a quite simple template, but in fact it gives you many benefits that can’t be seen immediately. Let’s check out some of them:

  • HTML5-ready template plus basic structure for your files and folders
  • Ready-to-use, performance optimized print styles
  • Cross-browser compatibility
  • Mobile browser optimizations
  • Progressive enhancement and graceful degradation
  • Best-practice server configurations
  • Optimal caching and compression rules
  • Optimized Google Analytics snippet code
  • and more…

You get all these goodies by default, without need of writing a single line of code. And here is the content of the default download:

  • css – a directory containing normalize.css, and main.css with Boilerplate’s defaults, common helpers, media queries, and print styles.
  • doc – a directory containing all Boilerplate’s documentation. You can use it as the location for your own project’s documentation.
  • img – an empty folder for your images
  • js – a directory containing main.js for your custom code and plugins.js containing the code for all your plugins. Also there are Modernizr and jQuery libraries placed in vendor subfolder.
  • .htaccess – default web server configurations for Apache. For other servers there is Server Configs repository.
  • 404.html – a very basic error page
  • apple touch icons
  • crossdomain.xml – a template for working with cross-domain requests.
  • favicon.ico
  • humans.txt – a file to include credits for you and your project.
  • index.html – default HTML5-ready template, the base of all pages on your web site.
  • robots.txt – a file to include any pages you want to be hidden from search engines.

From this point on, you can start building your web site just by adding your own code and the components you have chosen to use in your project.

2. Using Bootstrap

Bootstrap is a front-end framework and web design kit for building modern web sites. With Bootstrap you can build an entire web site from scratch. So it gives you not only a starting point, but also all the building blocks you may need to create your site. The Bootstrap’s download contains only files for CSS and JS components, plus an icon font. Eventually you can download also a basic template to get started with. There is no files/folders structure or any server-side configurations.

Benefits/Highlights:

  • Mobile-first approach
  • Browser compatibility
  • Accessibility
  • CSS grid system
  • Ready-to-use components and utilities
  • and more…

Components and utilities are listed below:

  • Grid – a utility for laying out your design
  • Icons – resolution independent icon set
  • CSS base styling classes
  • CSS components – styled HTML components
  • JS widgets – a nice set of interactive components
  • Starting templates and examples

As you can see Bootstrap provides all the components you can start using right now to build your web site.

3. Using Boilerplate plus Bootstrap

What about using both? No problem. This is completely possible and easy to accomplish. In case you need both, the Initializr project helps you to automatically integrate Boilerplate and Bootstrap. Using Initializr you can create a custom download combining all the good things in one package. You can use this option if you want to get the best of both worlds.

4. Using Your Own Boilerplate Solution

Some people don’t like products like Boilerplate and Bootstrap. Their arguments are that such tools have too many unnecessary things inside. If you think the same way then you must know you are not restricted to use anyone’s work. You can easily collect best practices for you and put them into your own kickstart package. This way you will get only what you need and nothing more.

The Verdict

The right choice depends on two things. First, you must know your goals, needs and project’s requirements. And second, you must know what each tool can offer you, its strengths and weaknesses. Obviously I can’t help you with the first one, but for the second I can give you a quick summary. Here are the main checkpoints:

  • You can’t build web site with Boilerplate – it’s only a starting point.
  • With the Bootstrap’s components and utilities you can build an entire web site from scratch.
  • Boilerplate is more server-side oriented – a good starting template if you work with server-side technologies such as PHP.
  • Bootstrap is a client-side solution – a complete toolkit for building client-side web sites.
  • Boilerplate is only a starting code base and you can add whatever components you need later on.
  • Bootstrap on the contrary has a full set of ready-to-use components that you can use right now.
  • You can combine Boilerplate with Bootstrap to get the best benefits of both.
  • You can create and use your own personalized boilerplate template including only what you need.

As my final words I would say that Boilerplate and Bootstrap are both wonderful tools and you have plenty of options how to use them.

I hope that this short article will help you to choose the best option for you.