State of affairs: Bootstrap 4 vs Foundation 6.2

Bootstrap 4 and Foundation 6 are the latest versions of the most widely used CSS frameworks out there. Foundation 6 is stable whereas Bootstrap 4 hasn’t been released yet. However, before you wonder why I am comparing a stable framework version vs an alpha one, let me set the record straight by saying that Foundation even though has already been released as stable, it isn’t by any means. Let us explore the current status of both frameworks, their features, flaws and decide which one is better suited to your needs.

Current status

Bootstrap 4: alpha 2
Zurb Foundation 6: stable v6.2

CSS Preprocessor

Both Foundation 6 and Bootstrap 4 are based on SASS. They both have a nice set of mixins, a separate settings sheet, reusable components, etc. Not much to say in this regard besides they are pretty top notch when it comes to SASS.

Winner: tie

JavaScript

Both Bootstrap 4 and Foundation 6 JavaScript libraries are written on ES6, which means, you do need Babel (or any other transpiler) if you want to individually include each of their JS tools into your development pipeline. However, they both have ES5 transpiled versions of each component which should make it easy enough for your to use them without much hassle.

I would like to highlight though that Bootstrap is a little bit ahead when it comes to JS for the fact that their components are simpler, less bloated, well tested and they provide a compiled version of each component separately. Foundation, on the other hand, provides a single JS file with every single compiled component in it, which can be a pain if you are only planning to use a couple of them.

Foundation also went ES6 just a few weeks ago which might render some components unstable at this point.

Winner: Bootstrap 4

Stability

Even though Bootstrap 4 hasn’t been publicly released yet, its team takes stability and backwards compatibility seriously. They use Saucelabs’ automated testing tools to make sure everything passes a test before committing into their main branch. This results in a very stable set of tools that even though are in alpha can pretty much be used in production.

Foundation, on the other hand, was released as “stable” a few months ago. On first launch some components were unfinished such as Abide (their form validation library) which was completely broken, so their colour palette settings. From 6 to 6.2 the team has changed quite a few things making some settings obsolete and introducing stuff like ES6 abruptly on 6.2. This has broken the development pipeline for some people as seen in the issue log.

Testing on Foundation isn’t as neat as I would like. There is currently no testing procedure in place but the team has already outlined that moving forward testing will be a number one priority.

Winner: Bootstrap 4

Grid

Foundation may have a better grid system when it comes to cleanliness. The fact that Foundation has no containers and relies heavily on rows is a plus, as you end up with a cleaner DOM.

Both Bootstrap and Foundation have support for responsive grids and flexible breakpoints. However, Foundation has support for responsive gutters, which are so easy to setup that seem like magic.

Collapsed gutters are also a thing in Foundation. You can either have or remove gutters in specific cases that don’t require them by simply adding a class. Other stuff like centered columns and block grids make Foundation the winner when it comes to grids.

In regards to backwards compatibility, both Foundation and Bootstrap use the same class convention as their previous versions. This makes migration as painless as possible.

Flexbox grids are also available on both Foundation and Bootstrap as a separate setting that you can enable/disable depending on your target browser support.

Winner: Foundation 6

Forms

Bootstrap 4 has one of the prettiest forms you will find out there. There are special classes for radios and checkboxes that will make them look much better than the browser default ones. Inline forms, validation icons and icon labels are also very powerful on Bootstrap.

Foundation 6 has a simpler form layout that relies heavily on the grid. Inline forms don’t exist in Foundation which is almost missed. Also, prettified fields are a no-go on Foundation so you must rely on external CSS to prettify your select boxes, radio buttons and checkboxes.

Winner: Bootstrap 4

Menus

While Bootstrap 4 has the same old dropdowns, tabs and basic navigation menus we have come to know from version 3, Foundation has dramatically improved their dropdowns by including other variants that might come in handy in some cases.

Foundation includes stuff like off-canvas navigation, drilldown menus, vertical dropdowns and responsive menus, which changes their behaviour depending on the resolution (this is pretty cool). This makes Foundation leaps and bounds ahead of Bootstrap when it comes to components designed to navigate across multiple sections.

Winner: Foundation 6

Candy

Bootstrap 4 has kept its codebase small and neat for the sake of providing a rock solid foundation to developers. You can trust it and start building things straight ahead. Foundation 6 has gone ahead and included some nice little plugins such as Interchange for responsive content, Equalizer which makes elements the same height, or Abide, a drop in form validation that simply works.

Foundation also equips Panini, a file compiler similar to Assemble.io to put pages together by having partials and templates that you can reuse. They also give you Motion UI, a basic but powerful JS animation library that follows the steps of Velocity JS.

The candy, while sometimes unnecessary and bloated might be useful for prototyping or for developers that simply need to get things done, quickly. You can always remove these features from your pipeline as they are bundled as individual modules in Foundation.

Bootstrap 4, however, has a new component called Cards that will definitely come in handy for people aiming for Material Design.

Winner: tie (opinionated)

Design

Have a look at both their websites and you will immediately realise that Bootstrap is ahead when it comes to design, at least out of the box. Their team has really taken their time to polish each component into something that’s simple but looks beautifully neighbouring other components.

Even though Foundation also looks right, is a different kind of styling that may not be appealing to everyone.

Be that as it may, both frameworks are highly customisable. Although Bootstrap may look prettier on first sight, remember that using the right palette and settings you can make Foundation look even better.

Take the below winner with a grain of salt if the design is important to you. I have chosen Bootstrap as the winner in this case for the design that they provide out of the box, not for what you can do with it.

Winner: Bootstrap 4

Community

I won’t go deep into this because we already know that Bootstrap is way ahead of Foundation when it comes to community contributed plugins and support. Bootstrap is used almost everywhere and there are plugins for everything. It has become the default CSS framework for the web.

Winner: Bootstrap 4

Conclusion

If you are looking for a stable framework that you can trust and forget about it, then Bootstrap is the way to go. Even though it has been sitting in alpha for quite some time, it should be stable enough for any project, as long as you stick to their components and keep the framework up to date.

Foundation, on the other hand, is feature rich but their release process is not thoroughly tested and might break your setup from one version to the other. However, their developers are quite active on Github and are constantly fixing bugs.

At the end of the day, it all comes down to the project and the tool that better fits into it. I hope this post helps to give you a better insight into both frameworks to make an informed decision before you dive into any of them.