Wakefly BlogBootstrap versus Foundation: Comparison

Two commonly used front-end frameworks in the web development world are Bootstrap and Foundation. The purpose of a framework is to give a developer or designer a bunch of built-in tools and features to get their website or application up and running very quickly. Bootstrap was created in 2010 by a team at Twitter. Foundation was created in 2008 by the developers at Zurb. Both frameworks have come a long way since they first appeared. Let’s talk about some of the features that these frameworks have in common.

Both frameworks are mobile first, which means they are built from “the bottom up”. Rather than creating a website on desktop then squeezing it into a mobile site, they suggest building with mobile in mind, then expanding to desktop. This approach keeps content easy to read, and the user happy when using your website on multiple devices. Both frameworks use a grid system to organize their content into columns that adjust to the screen’s resolution. Both frameworks also include a plethora of icons that are accessible through CSS and use SASS which gives their stylesheets additional development power. At a glance, these frameworks appear to be pretty similar but they do have some differences. Let’s highlight a few of those differences.

One feature that Foundation includes is their built-in form validation. This is easy enough to include, but it does give Foundation a leg up. Foundation also includes Interchange which is a cleaner way to handle responsive images and uses ‘em’ rather than ‘px’ in their styles. This isn’t an advantage or disadvantage but more of a developer preference. While Bootstrap does not include some of the features Foundation might, some might argue that what Bootstrap has feels more stable. Bootstrap has better browser support, including IE 8, while Foundation does not. In terms of CSS, Bootstrap can use LESS as well as SASS. Bootstrap also has the ability to use themes during development, which Foundation cannot do. This difference gives developers the impression that sites built with Bootstrap look like they are built with Bootstrap, while Foundation sites are more customized. That of course is more of an opinion but it is still something that is noticed and should be taken into consideration during development.

At the end of the day, both frameworks can do pretty much whatever you want them to do. Bootstrap and Foundation are updating regularly and constantly closing the gap between the two. Some developers might argue that Bootstrap feels more complete, while others say Foundation is more customizable. Here at Wakefly we lean toward Bootstrap, mostly because of its stability and popularity in the developer community. Both Bootstrap and Foundation are free to use.