Redesigning Archetyped: Comparing CSS Frameworks

Foundation vs Bourbon
By Sol in Know

I like Foundation, I really do. As a CSS framework, it gives you everything you need to build virtually any kind of website.

But that’s the problem– does Foundation give you more than you actually need for most sites?

I decided to take a look at Foundation’s impact on a site’s overall weight and compared it to Bourbon, a CSS framework that takes a different approach.

Note: All tests were conducted using Foundation v5. Sass source files were compiled (uncompressed) with Grunt’s Sass plugin (grunt-sass).

Kitchen Sink (and then some)

As a baseline, let’s start with Foundation’s maximum impact.

Foundation (Complete): 135KB

For a complex web application or large expansive site, a 100KB+ CSS file might not seem out of place. However, for a site with only a few layouts like Archetyped, such a large CSS file is overkill.

The fact of the matter is that Foundation is several times larger than any other asset (images, templates, etc.) in Archetyped’s upcoming design.

Going Modular

Okay, so Foundation turned out to be a beast, but perhaps we can tame it. One of Foundation’s finest features is that it’s fully modular, allowing you to load only the components you need.

Grid

Foundation has a very robust grid system that makes it incredibly easy to build layouts. Foundation’s grid is full of features and very customizable, letting you build any type of grid you could possibly need.

Foundation (Grid Module): 19KB

Loading only Foundation’s grid definitely trimmed the fat, but it’s still heavier than I would like. In a bit, I’ll take a look at whether another grid framework can do the job with less code.

Typography

Foundation also provides a great baseline for a site’s typography. Everything from a heading’s font size to a paragraph’s line height are in perfect harmony. Let’s see what Foundation’s typographic unity will cost us.

Foundation (Type module): 8KB

While the type module is a relatively small chunk (6%) of Foundation’s entire framework, I wonder whether it could be smaller.

Essentials

Paring it down to the essentials, Archetyped’s new design requires a robust grid and unified typography.

Foundation (Grid + Type Modules): 24KB

Loading only the essential modules is a great way to minimize Foundation’s impact on a site’s load time. However, at 24KB, the resultant CSS file is still the heaviest asset by far in Archetyped’s otherwise very lightweight design.

Enter the Contender: Bourbon

To find out if we can decrease the stylesheet’s impact on our site’s load time without losing essential functionality, I decided to take a look at a CSS framework that takes a different approach.

Bourbon is a Sass mixin library that simplifies the creation of cross-browser compatible stylesheets. Sass mixins are basically functions and thus only add to a CSS file’s size when they are used by other style rules. As a result, Bourbon is very lightweight by default.

Bourbon: 0KB

Neat: The Grid

Neat is Bourbon’s lightweight grid framework. Like Bourbon, Neat is primarily mixin-based, so it is very lightweight as well.

Neat (default): 97B (that’s bytes fool!)

That’s more like it.

But of course, as Neat is a mixin library, it’s not fair to compare it directly to Foundation’s grid module (19KB).

Foundation’s grid provides predefined class names for every possible column width (e.g. large-2, large-3, etc.) which you add directly to your HTML. In this way, the grid layout is defined in your site’s HTML files when using Foundation. It also means that there are a lot of predefined style rules that you may never use depending on your site’s design, which would result in an unnecessarily large stylesheet.

By contrast, Neat’s mixins are meant to be added to your own custom style rules, not to the HTML. This allows you to define only the grid elements that you need for your layouts, giving you full control over the ultimate size of the stylesheet.

While this may make for a less intuitive rapid-prototyping experience compared to Foundation, removing all layout-specific references from your HTML keeps such details where they should be in the first place– in the stylesheet.

However, for the sake of comparison, I created a few classes that I could add to the HTML to get a similar implementation to Foundation:

//Row
.row {
    @include outer-container;
}

//Full-width block
.large-12 {
    @include span-columns(12);
}

//Centered 8-column block
.large-8-centered {
    @include span-columns(8);
    @include shift(2);
}

This is not a full class-based grid system, but it does reflect the needs of a simple article-based grid layout. Note how the file size of the resultant CSS file balloons compared to Neat’s default (and non-functional) file size:

Neat (Simple Grid): 561B (yes, still bytes)

The nice thing about Neat is that you can use its mixins to create a grid layout simply by targeting the HTML elements in your layout. Adding style rules directly to article, header, and nav elements keeps things much cleaner than having a bunch of layout-specific classes scattered throughout your HTML.

Bitters: Typography (and more)

Bitters is yet another Bourbon-based module. This time though, instead of being a quiet mixin library, Bitters actually has something to say, and adds just a bit of style to various HTML elements. This provides you with a nice starting point for you site’s design.

Bitters (Complete): 6.2KB

Bitters in its entirety is already smaller than Foundation’s type module, but you can do even better. As mentioned, Bitters adds styling to many HTML elements (forms, tables, etc.) by default. Loading only the typography module, Bitters shrinks down even further:

Bitters (Typography module): 1.3KB

Not bad at all.

Essentials

Just like we did with Foundation, let’s now combine Bourbon, Neat (w/simple grid), and Bitters’ typography module to show us the full impact of our essential styles:

Bourbon (Grid + Typography essentials): 1.8KB

Using Bourbon, Neat, and Bitters, we have a tiny stylesheet that meets our needs. At over 13 times smaller than similar functionality from Foundation, we now have a stylesheet as lightweight as the rest of our site.

Bourbon it is

Based on these results, it’s clear that Bourbon is the better option for Archetyped’s new design both in terms of functionality and impact on load time.

Does this mean that Foundation not a good fit for your site? Not at all. When you need a CSS framework that accounts for everything, Foundation is tough to beat. Large sites or applications with a variety of different layouts should definitely consider Foundation. However, for a minimal site with a relatively low number of layouts like Archetyped, Foundation is simply overkill.

Resources

  • Bourbon — A lightweight cross-browser Sass mixin library.
  • Neat — A lightweight grid framework for Bourbon.
  • Bitters — A dash of predefined style for Bourbon and Neat.
  • Foundation — A mature and feature-filled CSS framework (grid, typography, etc.).
  • Sass — An awesome CSS preprocessor.

Follow the Redesign: New Episodes Bi-Weekly

Archetyped is being redesigned, starting from square one. Instead of designing and building the site in stealth mode and releasing it to much fanfare, I’m sharing the entire process with you!

Along with tutorials, tips, and other goodies that will help you build better websites, I’ll also be sharing my thoughts and experiences as I rebuild this site from the ground up.

So come on, hop on and come along for the ride! Sign up below to get automatic updates when a new episode comes out.