The Low Down on Frameworks: Bootstrap vs. Foundation vs. Susy

Last Updated November 28, 2016

What is a framework?

This seemed like a good place to start. Don’t worry, I’m not going to throw out Webster’s definition, or Wikipedia’s for that matter.

A framework is simply a standard way of dealing with a common type of problem. In our case, in the world of front-end development, it means creating a system of styles (CSS) and scripts (JavaScript). This includes everything from handling typography, buttons, form fields, to rotators and mobile navigation.

Think of a framework like a style guide.

Style Guide

What are the benefits?

  1. Code Faster The whole point of a framework is provide a common structure so that, as a developer, I don’t have to start from scratch and can reuse code.
  2. Consistency If you’re working with a team, a framework provides structure and consistency among projects. I can easily switch projects, knowing what naming conventions to use, and what elements I have access to.
  3. Stability You don’t have to pull a bunch of 3rd party scripts in to your code (i.e. rotator), because those features are already included within the framework itself.

Are you limiting yourself?

This is the million dollar question of the day: does a framework limit you?

I started working with frameworks in 2007. Responsive web design was barely a thing. Just to give you context, the first generation iPhone was announced February 25, 2007! Our biggest concern in development was IE6!

The web firm I was working with at the time, tasked me with finding ways to speed up our development process. The pipe dream was to create components that could be reused among projects.

NOTE:

It’s interesting to me that a lot of these conversations around “Component Driven Development” still exist, 10 years later. The only difference is the technology and how they’re being implemented (namely through JavaScript and React).

I started looking at grids and frameworks. At the time, the big players were 960, Blueprint (what we ended up using), and YUI Library (Yahoo’s Library).

The biggest pushback we received was from the designers. They were afraid that the new grid system would limit what they were able to design. — which was ironic.

Grid systems are a basic design principle.

Grid System

Need a little proof? Here are a few posts on Grid Design and Grid Theory.

Once we started implementing the new workflow, everyone discovered how much easier design and development was.

It wasn’t limiting, it was freeing.

Designs don’t have to look the same, remember the purpose of a framework is to offer a starting point.

Sites Designed on the Same Framework

For designers, it added balance, cohesiveness, and organization.

For developers, it drastically shortened our development time, especially when it came to quality assurance.


Let’s talk about some of the most popular frameworks…

Bootstrap

Twitter Bootstrap

Bootstrap is the most popular (according to GitHub, it has 94K stars and 41K downloads). It was originally created by Mark Otto, a Twitter developer, as their style guide. He was trying to encourage consistency across internal tools. In fact, it was originally named Twitter Bootstrap, but within the past few years, has dropped the “Twitter” part.

Bootstrap Buttons

Bootstrap AlertsBootstrap Form Fields

Pros

A quick disclaimer: some of these pros and cons go both ways. It just depends on personal preference. For example, form design would be a benefit of Bootstrap. Items (form labels, inputs, text areas, submit buttons) are polished and look far better than the browser defaults.

On the other hand, if you want to style your forms differently than the Bootstrap defaults, you have a lot of code to overwrite.

Cons

  1. Bootstrap was originally written in Less. In all fairness, it’s been ported to Sass.
  2. Bloated. Bootstrap includes far more elements than most sites need. Your code unnecessarily includes components that are never used.
  3. Markup is written inside HTML. There isn’t a good separation between the content layer (HTML) and presentation layer (CSS). For example, markup for the grid is written directly inside the div: <div class="col-md-6 col-xs-12"></div>. Information like this, should be reserved for a stylesheet.
  4. For a while, Bootstrap was getting some criticism: “Bootstrap has become the style guide for the internet.” It was easy to tell which sites were using Bootstrap. But, the fault, here, falls to individual designers and developers for implementing the Bootstrap defaults and not taking their site designs further.

A framework is only meant to be a starting point.

Foundation

Zurb Foundation

Foundation was originally created by a company called Zurb. They were using Foundation on every client project to help them prototype rapidly. In 2011, they released their framework to the public as open source.

Between Bootstrap and Foundation, I would pick Foundation every time.

Zurb Foundation Buttons

Zurb Foundation - Call To Action

zurb-foundation-form-fields

You might argue that Bootstrap looks more refined, but that’s my point, exactly. Foundation gives you the barebones you need. They’ve found a balance between enhancing the browser defaults and not over styling to the point where I have to spend a majority of my development time overwriting.

PROS

  1. Foundation is built on Sass. Sass is my CSS extension language of choice.
  2. Mobile first design. Like it or not, mobile traffic is just as important, if not more, than desktop. Therefore, sites should be built with a mobile first mindset. This ensures that the most important elements of a page are prioritized and receive the proper hierarchy.
  3. Their grid is fantastic. (In my humble opinion) The grid is easy to read (.large-6) and easy to implement.

CONS

  1. Bloated. Foundation includes a lot of elements that most sites will never need. It’s easy to export a custom build of the components you do need, or you can turn on and off Sass elements and JavaScript includes. But, all that still requires intentionality and management from the developer.
  2. Markup can be written in the HTML. Similar to Bootstrap, markup can be made directly on the div. This obstructs the separation between content (HTML) and presentation (CSS). In all fairness, though, Foundation does provide mixins to move this type of styling into your Sass. However, the class names remain in your CSS, bloating your documents.

Susy

Right now, Susy is my favorite framework. I am cheating a little bit. Susy is only a grid system.

One day, while I was coding, I realized the only thing that I was consistently using Foundation for was their grid system. Even though I wasn’t compiling all of Foundation’s elements to my code, it was still bloating my files. — For example, it includes styles for a small 1 column grid, whether I use it or not.

The catalyst for change was when I encountered a site that required a more complex grid system. I had a left sidebar that stayed fixed to the left side of the window. You can achieve this within Bootstrap and Foundation, but the width of the sidebar will vary based on the width of the window.

If the sidebar is 20% of the window, it will be 300 pixels on a large desktop monitor, but will be 160 pixels on a small tablet (800 pixels wide).

Susy handles both of these pain points.

You can create complex grids. That sidebar I mentioned? It can stay a consistent 300 pixels wide until I want to hide it for mobile.

Susy is completely written and implemented in Sass. Within your styles, you’ll use a series of mixins to build out the grid. My content and presentation layers stay separate and only styles that I need are being written to my compiled CSS. Beautiful!


Resources

Interested in reading more or getting someone else’s opinion?


The Conversation

  • Abraham Garcia Nuñez

    I just have to say that bootstrap, at least, gives you the ability to remove all the parts that you’re not going to use, so is not more a CON.