Bootstrap vs Foundation - Top 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 frontend 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 frontend 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)
• JavaScript to change dynamic elements such as drop downs, expanding menus, etc.
• Responsive media queries
• Cross-browser compatibility fixes

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.

Here are some other advantages:

1. Easier to maintain code with snippets and libraries
2. More organized and easy to setup
3. Easier decisions that are already made for you
4. Responsive media queries and browser compatibility fixes already included
5. Most are free and open source
6. Stable and well tested code by hundreds of developers
7. Usually the ability to contribute on GitHub
8. Get regular updates, bug fixes, and new feature

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

1. Sometimes requires lots of tweaking to make it work, could end up costing you more time
2. Requires documentation for changes when updating
3. Missing a feature you need, in which you have to introduce another third party asset
4. Possibly unnecessary code for your unique situation
5. 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 frontend framework consisting of HTML, CSS and JavaScript. It is modular and in version 3 consists of Less style sheets. However, with Bootstrap 4 they have switched over to the Sass CSS preprocessor. Check out our post on Sass 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/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   └── bootstrap.min.css.map
    └── js/
        ├── bootstrap.js
        └── bootstrap.min.js

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

Foundation

Foundation is a responsive frontend 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 style sheets. It is based on a 940px grid system which is a responsive layout. Foundation also provides users with starter templates allowing them to begin creating their next web project even faster. Some brands using Foundation include Adobe, eBay, EA, Amazon, and Mozilla.

Within the Foundation download (Foundation) 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-sites/
    ├── plugins/
    │   ├── foundation.abide.js
    │   ├── foundation.accordion.js
    │   ├── foundation.accordionMenu.js
    │   └── foundation.core.js
    │   └── foundation.drilldown.js
    │   └── foundation.dropdown.js
    │   └── foundation.dropdownMenu.js
    │   └── foundation.equalizer.js
    │   └── foundation.interchange.js
    │   └── foundation.magellan.js
    │   └── foundation.offcanvas.js
    │   └── foundation.orbit.js
    │   └── foundation.responsiveMenu.js
    │   └── foundation.responsiveToggle.js
    │   └── foundation.reveal.js
    │   └── foundation.slider.js
    │   └── foundation.sticky.js
    │   └── foundation.tabs.js
    │   └── foundation.toggler.js
    │   └── foundation.tooltip.js
    │   └── foundation.util.box.js
    │   └── foundation.util.keyboard.js
    │   └── foundation.util.mediaQuery.js
    │   └── foundation.util.motion.js
    │   └── foundation.util.nest.js
    │   └── foundation.util.timerAndImageLoader.js
    │   └── foundation.util.touch.js
    │   └── foundation.util.triggers.js
    └── foundation-flex.css
    └── foundation-flex.min.css
    └── foundation-rtl.css
    └── foundation-rtl.min.css
    └── foundation.css
    └── foundation.js
    └── foundation.min.css
    └── foundation.min.js

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. 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.

Single column class syntax

Bootstrap

.col-xs-1
.col-sm-1
.col-md-1
.col-lg-1
.col-xl-1

Foundation

.small-1.columns
.medium-1.columns
.large-1.columns
.[custom]-1.columns

Containers

Bootstrap

<div class="container">

or

<div class="container-fluid">

Foundation

div class="row"

Gutters

Bootstrap

Not available.

Foundation (cool feature of Foundation)

<div class="row large-collapse medium-uncollapse [custom]-collapse">

Media Queries

Bootstrap

// Extra small devices (portrait phones, less than ???px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

// Sass mixins
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Foundation

// Small
None

// Medium
@media screen and (min-width: 40em)

// Large
@media screen and (min-width: 64em)

// [Custom]
@media screen and (min-width: [custom]em)

// CUSTOM BREAKPOINTS (Sass)
$breakpoints: (
    // all px values are converted to ems
    small: 0px,
    medium: 640px,
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px,
    [custom]: ...px,
);

Nested Columns

Bootstrap

<div class="row">
    <div class="col-sm-9">
        <div class="row">
            <!-- nested columns add up to 12 -->
            <div class="col-xs-8 col-sm-6">...</div>
            <div class="col-xs-4 col-sm-6">...</div>
        </div>
    </div>
</div>

Foundation

<div class="row">
    <div class="small-6 columns">
        <div class="row">
            <!-- nested columns add up to 12 -->
            <div class="small-6 columns">...</div>
            <div class="small-6 columns">...</div>
        </div>
    </div>
</div>

Offset columns

Bootstrap

<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4 col-md-offset-4">...</div>
</div>

Foundation

<div class="row">
    <div class="large-1 columns">1</div>
    <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

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.