Kitchen Sink (and then some)

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:

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.