Foundation 6 vs Bootstrap 4

There are many CSS frameworks out there. Out of all the available frameworks, Bootstraps and Foundation are hands down the most popular. Is Foundation better or Bootstrap is a very old debate among front-end developers. Despite serving the same functions, there are different points of strength for each of the frameworks. Twitter’s Bootstrap is currently at V4 Alpha 6 while Zurb’s Foundation is at V6. Since Bootstrap 4 is currently at Alpha version, it would be unfair to compare them in terms of stability. While Bootstrap V4 is currently relatively stable, the older Foundation 6 has definitely had a bigger share of testing and debugging. This comparison highlights advantages each of the frameworks and what each does best.

Foundation 6 vs Bootstrap 4

CSS Preprocessor

Both frameworks, Bootstrap and Foundation, are based on the widely popular SASS preprocessor. When it comes to SASS, both preprocessors are as good as they can possibly be. They both have reusable components, separate settings sheets, etc. There is a definite tie here since both frameworks run the majority favorite SASS without any problems.

Winner: Tie

CSS Reset

A good CSS reset is essential for any web developer who works on the frontend. Normalize.css and Reset.css are the undisputed, most popular CSS resets out there. For the non-veterans, Normalize.css and Reset.css are just like what their names suggest.  Normalize “normalizes” the CSS, keeping all the useful defaults rather than completely “unstyling” everything. Reset.css on the other hand simply removes all of the CSS styling completely. Some people might like Reset.css more, but Normalize.css having better documentation is a fact. This makes many people favor Normalize.css over Reset.css. Twitter’s Bootstrap 4 runs a reboot while Zurb’s Foundation 6 runs normalize. While some people might prefer Bootstrap’s reset, we believe Normalize.css to be better. For this one, we will go with Foundation 6, along with everyone who prefers Normalize.css over Reset.css.

Winner: Foundation 6

JavaScript

When it comes to JavaScript, both frameworks’ libraries are written on ES6. However, if you prefer to use ES5, both of them have an ES5 transpiled version of each component. This makes it easy for users to use them without any problems.

Both Bootstrap and Foundation have a unique edge when it comes to JavaScript. Bootstrap’s JavaScript components are simpler and less bloated. Foundation on the other hand, has more JS toys and customization options to fiddle around with, which is definitely an important feature. If you decide not to use babel, both Bootstrap and Foundation will allow you to decide which components to use and which components to leave out. It is worth mentioning that Foundation 6 was completely rewritten in JavaScript’s latest version, ES6. Given the fact that it was out for a longer period, Foundation 6 is definitely more stable.

If you prefer simpler JavaScript functionality, Bootstrap should be your choice. However, Foundation has way more JS customization options. If you don’t like them you can choose not to use them. In Bootstrap you can need some of the extra customization and not have it. In terms of JavaScript, we favor Foundation 6 over Bootstrap 4.

Winner: Foundation 6

Grid

Both Foundation 6 and Bootstrap support responsive grids. A key difference between Foundation and Bootstrap at this point is Foundation’s support for responsive gutters, which are fairly easy to set up and use. Also, in Foundation collapsed gutters are actually a thing. Things like block grids and centered columns are a very strong advantage. In addition to those extra features, Foundation’s grid system is overall cleaner than that of Bootstrap. This is largely attributed to the fact that Foundation has no containers and mainly depends on rows. Both Twitter and Zurb have made their frameworks backwards compatible. This makes the migration process as smooth and convenient as possible.

Winner: Foundation 6

Overall Design

Out of the box, Bootstrap definitely has better design. Default elements of the Bootstrap framework are well designed and masterfully polished. In terms of design, Foundation 6 is definitely lagging behind when compared to Bootstrap 4. However, both frameworks are highly customizable, so out of the box appearances are not really that important. For whom the initial design matters, Bootstrap has definitely got this one.

Winner: Bootstrap 4

Supporting Community

This is a category in which Bootstrap reigns supreme. Any web developer who uses a CSS framework knows that Bootstrap is the most popular framework out there. There are community contributed plugins for everything you might ever need. In addition to plugins, community support is awesome. Running into a problem that wasn’t solved before/cannot be solved by the helpful community members is something that is just not going to happen. Despite Bootstrap having an enormous community, Foundation has enough to have you covered. It might not as big as Bootstrap’s, but it is certainly there. However, the winner for the community category has to be Bootstrap.

Winner: Bootstrap 4

Conclusion

While web developers might prefer one over the other, both Foundation 6 and Bootstrap 4 are top notch frameworks. While we definitely favor Foundation 6, we are by no means saying that Bootstrap 4 is bad. Both frameworks are currently stable enough for most projects.  Due to being out in the wild for longer, Foundation 6 is definitely more stable than Bootstrap 4. However, this is an issue that will be solved by time. The reason we believe Foundation 6 has an edge over Bootstrap 4 is mainly due to the high level of customization it allows. If you are not the kind of developer who likes to tweak around and needs to modify a lot of things, Twitter’s Bootstrap 4 is a suitable choice. Other than that, Zurb’s Foundation 6 is definitely the way to go.