State of affairs: Bootstrap 4 vs Foundation 6.3
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 Bootstrap 4 may be very well used as a daily driver. Let us explore the current status of both frameworks, their features, flaws and decide which one is better suited to your needs.
Edit 12/03/2017:
Time has passed, and even though Foundation was initially a bit behind in terms of testing and quality, it has finally the reached the stability we are looking for. I have updated most of the items below considering how far Foundation has come.
Current status
Bootstrap 4: alpha 6
Zurb Foundation 6: stable v6.3.1
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.
Bootstrap is a little bit ahead when it comes to JS for the fact that their components are simpler, less bloated and well tested. Foundation on the other hand, has way more JS toys to play with, which is always handy. In the past, Foundation used to provide a single JS file with all components packed into it, which is no longer the case. Both Foundation and Bootstrap will allow you to choose which JS components you want if you decide not to use Babel.
Foundation was rewritten in ES6 about a year ago, which has given it enough time to iron out any issues and bugs thanks to the community.
Winner: Foundation 6
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 as a daily driver.
Foundation, on the other hand, was released as “stable” a little over a year 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.3 the team changed quite a few things making some settings obsolete and introducing stuff like ES6 on 6.2. The offcanvas was revamped and the settings are very flexible in 6.3.
Since Foundation 6 has been out in the wild for longer, exposed to more production environments, it’s stability is now excellent. Components seem to be well tested and the team is releasing updates almost every 3-4 months.
Winner: Foundation 6
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 a bit further by including 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.
Bootstrap 4 shouldn’t be any different as most class names were kept the same, which means that porting plugins to v4 shouldn’t be too difficult.
Winner: Bootstrap 4
Conclusion
If you are coming from Bootstrap and are familiar with it, then maybe you should checkout v4. 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. I have to say though, that their alpha milestones are taking an eternity to be reached. The project has been sitting in alpha for over a year.
Foundation, on the other hand, is feature rich and because it has been out in the wild for a while, it gives it an advantage over Bootstrap 4. Components are well tested and working smoothly. Bugs are constantly being fixed and the team behind it seem to be on top of things. So, if you have used Foundation in the past, or are looking for something different, then consider Foundation 6.
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.