Foundation vs Bootstrap

A while ago I posted a look at Pure CSS and comparing it against bootstrap. This has proved to be quite a popular post, so I decided it was a good idea to do another comparison. This time I will be looking at Foundation vs Bootstrap. Both are responsive frameworks, Foundation is developed by Zurb, and Bootstrap by Twitter. Both have had several releases at the time of writing (Foundation 5 and Bootstrap 3), and are now both developed to support a mobile first design philosophy. This is what has drawn my attention to Foundation, and back to Bootstrap, as I have a great interest in mobile first, and I thought I would investigate both to see how good they are at supporting this.

What is Foundation?

Foundation brands itself as “the most advanced responsive front-end framework in the world”. To put it simply, much like Bootstrap, and Pure, it is a framework designed to enable rapid development of responsive websites. There aren’t many differences between it and Bootstrap on this front. Simply add the Foundation classes to your markup, and Foundation handles all the responsive CSS for you. It also provides a grid system for you to utilise, the same as Bootstrap, and provides some helpful JavaScript libraries as well, no difference there (unlike with Pure). So really, on the whole we are comparing like for like in the main between these two frameworks.

Foundation is easy to use. You can either download the CSS and JS modules you want, or even download the source Sass files and modify settings such as colours yourself. They even provide a codepen environment to allow you to play around with the framework before downloading if you wish to try it out. Foundation is also totally modular, and you can select which parts to download and include. This is a big benefit if you just want to feature some aspects of the framework, giving you the potential to save on the amount of CSS and JavaScript your clients need to download. They also provide a page to select which modules you require, and this has some handy extra features, such as setting the grid sizing, colours, breakpoints, and text direction, which saves you having to modify the Sass files yourself.

Which do I choose?

So far I haven’t shown much difference between Foundation and Bootstrap, and that’s because on the surface, there isn’t much between them. They both serve similar roles as a mobile first responsive framework. So we have to look in a little more depth to find out the strengths and weaknesses of both.

The first difference you will probably notice between Foundation and Bootstrap is that Foundation offers a lot of default styles. In Bootstrap you have to use a class to get the Bootstrap styles (in most cases, Typography is provided for you), however Foundation assumes you will want to use the Foundation styles, and doesn’t require a class, instead applying the styles to the element. An example of this would be tables. In Bootstrap the following is required:

However in Foundation, you don’t need the class:

For me Foundation’s way of doing this with basic elements makes sense. I don’t like having to apply a class to every element, just so it receives the styles from my framework. Instead I believe the Framework should provide this for me like Foundation does, but this is personal preference and everyone has their own preference. I just prefer the ‘cleaner’ markup that I can use with Foundation.

Both Foundation and Bootstrap provide classes to show/hide elements based on screen size. In Bootstrap you are required to use a combination of classes to hide/show for multiple screen sizes:

This will hide for extra small and small devices. In Foundation, it provides both classes to show/hide for a single screen size, and classes to show/hide for all screen sizes above/below a size. The previous example in Foundation would be:

Foundation also provides more that it can detect and show/hide elements for, including orientation, and touch (the latter using Modernizr), potentially allowing us to tailor specific content to different views.

Another huge part of frameworks at the moment is the grid layouts. As mentioned earlier, both Bootstrap and Foundation provide grids that you can use to layout your content. Both provide default grids with 12 columns. Bootstrap require any grid is contained inside an element with the class of container, whilst Foundation doesn’t have this restriction. Again I find this refreshing as it removes the need for extra markup that is required in Bootstrap, but it’s a small difference (but one that is frustrating with Bootstrap if you keep forgetting it). Foundation’s classes are more natural to me when marking up a grid. Being mobile first you define your column sizes for the smallest screen first, and can then override them by adding classes for the other screen sizes. The best way to explain this is with an example:

The first example will start in ratio of 2:4:6 on small screens, the same will be inherited on medium screens, and then on large screens the columns will change to the ratio of 4:4:4. The second example will start in a vertical alignment, and then on large screens will change to a 3:6:3 horizontal layout. The same can be achieved with Bootstrap, but syntactically it is less obvious:

As you can see, the code is slightly shorter, but less descriptive in my opinion, so again it’s a personal choice. Both grids work fairly similarly, with both offering options to offset columns, nesting grids, and changing the order of columns, however Foundation does give you the option to center a column, which could be useful, and allows you to use incomplete rows (for example only using 9 columns) whilst controlling the behaviour when you do this.

I think the above gives a good example of the code differences between the two. Foundation tends to be more natural language, and easier to understand. I certainly find that it’s obvious when I am applying a class to something, what it is intended to do, however Bootstrap does also stick to conventions, using abbreviations in places, so once you learn it, it’s easy to understand.

Which do I use?

That is the question we are trying to answer. There isn’t really a simple answer to this, unlike with Pure CSS and Bootstrap, as both are really fulfilling the same role. However there are a few key differences that are worth highlighting.

  1. Browser Support – Bootstrap supports IE8, using respond.js, and some of the CSS3 and HTML5 elements are not supported. It does however state it is supported, which is not the case with Foundation, only supporting IE9 and up
  2. Styling – Foundation is not as styled as Bootstrap, leaving more scope for custom design without having to override default styles.
  3. Less – Bootstrap is also available as Less files. Both provide Sass and CSS
  4. Features – Both have differing feature sets. Whilst the core is very similar, Foundation provides Offcanvas navigation, Sticky Navigation, Responsive Media (including video) and interchangeable responsive content to name a few (there are many more).  Bootstrap supplies transitions, Jumbotron (for showcasing), and list groups. Foundation appears to have a larger feature set.
  5. Documentation – Both have good documentation, however both could be slightly better in my opinion, occasionally not clearly explaining how to implement a feature. Foundation is probably slightly easier to follow, with better examples in my opinion.

Potentially the above decides the issue for you, as one may not include a feature you need. If that’s not the case though then it’s a judgement call. If it comes down to this, my preference would be for Foundation in most cases. It feels more natural to me, and has a larger feature set. It also doesn’t have some of the extra markup Bootstrap requires such as containers. The fact that it is not quite as heavily styled allows for easier customisation, providing a better “framework”. Bootstrap I see as being more of a quick app building tool, and not as good as a framework. I would pick Bootstrap if I wanted a fast way to develop an internal business app, but for external facing websites, and the majority of other cases, Foundation provides the better option for me. However both options are very viable in all scenarios when you want a mobile first framework, therefore neither option is the ‘wrong’ choice, I would highly recommend giving both a go to make your own decision as to which suits your own programming style.


Update 4th November 2014: I have posted a part 2 to this containing my thoughts after more extensive use. You can find this here: Foundation vs Bootstrap (Part 2)

4 thoughts on “Foundation vs Bootstrap

  1. Thanks, but I lean towards Bootstrap. I like to keep things simple. Foundation seems overly complicated because there are too many options. Also, I don’t like how Foundation force itself on your base selectors. I like the fact that Bootstrap asks me to specifically put their class on something. Isn’t that what’s important with styles? You only want it when you want it and not let someone else dictate?

    Also, I find container very useful. It’s used just about everywhere to keep your things more narrowly confined to the center of the page by adding left and right padding/margins. With bootstrap its just one command. With Foundation it’s not so simple as you have to ‘build’ it yourself.

Leave a Reply