Article | Development

Foundation vs. Bootstrap: Which Front-end Framework Do We Prefer?

Reading time: ~ 3 minutes

Front-end frameworks are maturing. Bootstrap is approaching its 4th major release and Foundation is on version 6. Due to this, both of them cover many of the same bases, but in different ways. Bootstrap will allow you to make a minimally styled site with its framework, right-out-of-the-box. It allows you to ‘bootstrap’ a site using only the framework. Foundation is just that, a foundation for a site that strips out any unnecessary styling for a nice, clean starting point for you to build on. Two front-end frameworks with different points of view.

To Use Or Not To Use (The Framework)

Front-end developers have strong feelings about these frameworks. They either love them, hate them, or love to hate them. Some feel you shouldn’t use a framework in the first place. We feel that front-end frameworks are a tool and should be used judicially. There is no need to recreate a grid system or basic form styles when those already exists and are well-supported. One of the biggest misconceptions about frameworks is the thought that you have to load the WHOLE framework in order to use them. For both Foundation and Bootstrap, this is not the case. Both allow you to pick and choose which modules of the framework you need so you don’t have to load the whole thing. What this means for us is that we will only activate the parts of the framework that we need for the current project.

Our Choice

Our framework of choice is Bootstrap. It was a very tight race between the two before we made our decision. Both frameworks are more than capable of doing the job. What it came down to for us were a few key things.

CMS Interfaces

With Bootstrap, we can build a nice looking CMS interface without any additional front-end coding. Bootstrap includes very nicely styled forms and tables, right-out-of-the-box. This is particularly helpful for our back-end developers because Bootstrap is well-documented and they are able to make many of the interface changes themselves, if needed.

Add on a pre-built Bootstrap theme and you have a slick-looking CMS interface with minimal front-end/design investment. When it comes to the back-end of a website, it is almost a no-brainer to go with Bootstrap.

The Grid

Since the grid is the main aspect of the framework we work with, we paid close attention to the grid’s syntax between the two frameworks. We found that we liked the way Bootstrap handled the grid better than Foundation.

For example, the following is how the two frameworks build a grid row with two columns.

Bootstrap

<div class="row">
  <div class="col-md-6"><!-- ... --></div>
  <div class="col-md-6"><!-- ... --></div>
</div>

Foundation

<div class="row">
  <div class="medium-6 columns"><!-- ... --></div>
  <div class="medium-6 columns"><!-- ... --></div>
</div>

As you can see, Foundation requires the separate class of ‘columns’ in addition to the ‘medium-6’ class. Bootstrap is more succinct, combining the column, size, and viewport size in one class.

Another detail in Bootstrap’s favor is not needing to indicate the end of an incomplete row of columns. Each framework allows you to put up to 12 columns in a row. In Foundation, if you have less than 12 columns in a row, you have to indicate the last column with an ‘end’ class. This is not necessary in Bootstrap.

Bootstrap

<div class="row">
  <div class="col-md-3"><!-- ... --></div>
  <div class="col-md-3"><!-- ... --></div>
</div>

Foundation

<div class="row">
  <div class="medium-3 columns"><!-- ... --></div>
  <div class="medium-3 columns end"><!-- ... --></div>
</div>

What it comes down to, with the grid, is that there is a lot less to type with Bootstrap than with Foundation and no need to worry about incomplete rows. This is a big factor since working with the grid is the main interaction we have with the framework.

Client Adoption

We have had more clients come to us with sites that already use Bootstrap. Since so many of our client projects already have Bootstrap in place, it seemed natural to adopt it as our framework of choice so we weren’t constantly switching between the different frameworks.

Foundation Is Awesome Too

All that said, don’t discount Foundation. There are a lot of things to love about it that aren’t found in Bootstrap. Foundation has a nifty JS plugin called Equalizer that will 'equalize' the heights of all columns in a row. It also has some nice responsive utilities, like one that will change the text-alignment for different viewport sizes. A bonus on those is that they are done without the use of the !important declaration (something Bootstrap uses liberally). Another point in Foundation’s favor is that it was originally written in Sass. Bootstrap was originally written in Less and has an official Sass port. So, in our eyes, Foundation get points for their Sass commitment from the start.