Bootstrap vs Foundation – Top 2 CSS Frameworks

When it comes to being a developer and designer you usually always reach a crossroads of which CSS framework should you use? There are many out there to choose from, but two of the most commonly mentioned ones are Bootstrap and Foundation. In this post, we will be comparing the two CSS frameworks, Bootstrap vs Foundation . Read more below about how using a framework can help speed up and streamline your development and design process.

What is a CSS Framework?

Building a website or app from scratch can take a lot of time and development. A CSS framework is commonly used by developers and designers as a tool to speed up the process. A CSS framework, also sometimes referred to as a front-end framework, is essentially a package that is made up of predefined HTML, CSS, and JS which can be used when starting to build out a project. This way you don’t have to code from a blank slate every time you need to create a website or web application. In this post, we are specifically focusing on front-end frameworks which usually have to deal with what the visitor actually sees.

A CSS framework usually consists of the following components:

HTML code which help make up the structure of the pages

Typography styles

CSS to visually change how elements appear (a standard set of easy to use classes)

And if we take a look at Google Trends for “Bootstrap 4” (alpha version) and “Foundation 6” (latest version) it appears there is much more activity with Bootstrap. In this post we will be focusing on comparing Bootstrap 4 vs Foundation 6. The first Bootstrap 4 alpha was released over a year ago now and is almost released.

According to BuiltWith , 11.8% of the top 100,000 websites are using Bootstrap to power their websites. And 2.3% of the top 100,000 websites are using Foundation Framework.

Advantages and Disadvantages to Using a Framework

There are many advantages to using a CSS framework. One of the biggest is probably not having to start every project or website completely from scratch. Having a good base or foundation can save you a lot of time.

Now that all sounds great, but there can also be some possible disadvantages to using a framework:

Sometimes requires lots of tweaking to make it work, could end up costing you more time

Requires documentation for changes when updating

Missing a feature you need, in which you have to introduce another 3rd party asset

Possibly unnecessary code for your unique situation

Might make collaboration harder

Bootstrap

Bootstrap, originally named Twitter Blueprint, was created by Mark Otto and Jacob Thornton and released on August 19, 2011. “A small group of Twitter employees set out to improve our team’s internal analytical and administrative tools. After some early meetings around this one product, we set out with a higher ambition to create a toolkit for anyone to use within Twitter, and beyond. Thus, we set out to build a system that would help folks like us build new projects on top of it, and Bootstrap was conceived .” – Mark Otto

It is an open-source front-end framework consisting of HTML, CSS and JavaScript. It is modular and in version 3 consists of LESS stylesheets. However, with Bootstrap 4 they have switched over to the Sass CSS preprocessor. Check out our post onSass vs LESS. It is based on a 1,170px grid system which is a responsive layout. Within the Bootstrap download (currently version 4.0.0-alpha.3 ) you’ll find the following directories and files, grouping JS and CSS together with minified versions.

Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, they support Internet Explorer 9-11 and Microsoft Edge. Note: Bootstrap doesn’t support IE8. If you need support it is recommend to use Bootstrap 3.

Foundation

Foundation is a responsive front-end framework built by ZURB , a product design company. It is open-source and was released in 2011 under the MIT license. It is modular and consists mainly of Sass stylesheets. It is based on a 940px grid system which is a responsive layout. Some brand using Foundation include Adobe, eBay, EA, Amazon, and Mozilla.

Within the Foundation download (currently Foundation 6 ) you’ll find the following directories and files, grouping JS and CSS together with minified versions. With version 6 ZURB significantly cut the file size of the outputted CSS by implementing a roughly 40-50% code reduction.

Foundation supports the latest, stable releases of all major browsers and platforms. Most of them going back two versions. On Windows, they support Internet Explorer 9-11. Note: Foundation doesn’t support IE8 because of some of the grid properties it uses as well as JavaScript.

Bootstrap vs Foundation

Both Bootstrap and Foundation (the latest versions) are now using SASS and mixins.

Both have a grid system, but Foundation has what they call responsive gutters.

For reset Bootstrap uses reboot.css and Foundation uses normalize.css

Both support up to 12 columns with fluid widths up to 75em

Below are a couple examples of the differences between some of the syntax.

Foundation

Active Development

Both frameworks are very active on Github, you can see some of the recent activity below. Bootstrap is the second most-starred project on GitHub , with over 98,000 stars and more than 44,000 forks. Foundation has over 23,000 stars and a little over 5,000 forks.

Summary

As you can see CSS frameworks are very powerful and they can help streamline your development and design process. While it appears that Bootstrap is more widely used, there isn’t really a framework that is better than the other. It usually comes down to the developer and what they are comfortable with using. Both of them have their pros and cons.

Out of the Bootstrap vs Foundation match up, do you think one is better than the other? Let us know below in the comments.