ZURB’s Foundation framework is awesome.  It is responsive, beautiful, SASSy, and easy to learn.

I remember the first time I generated Foundation CSS from SCSS. I was migrating my old hand-written, non-responsive, non-mobile styles from an old site to Foundation. There weren’t a lot of styles and it was about 2 days’ worth of effort. I was surprised to see that the resulting CSS output was 300+ kb. Even after minimizing, it is still 100kb and still too big considering the styles must be downloaded fully to render my pages. I had made some elementary mistakes that first time. Since then, I have learnt a few tricks to seriously trim down the CSS output with Foundation.

1. Low-hanging fruit

There are a few really easy things we can do to start off in the right direction: turn off line comments, and minify the resulting CSS:

Make sure line comments and debug info are turned off. Comment these settings in config.rb if they exist.

#line_comments = false
#debug_info = true
#sass_options = {:debug_info => true, :sourcemap => true}

Remember to run the output CSS through a minifier. A minifier can reduce the CSS size by almost 50%! I like cssminifier.com

2. Import only the components you need

Foundation defaults to importing all components. In app.scss, the line

@import "foundation";

imports all components of Foundation (Grid, Nav, Sub-nav, etc). Comment the line out or remove it, and then selectively import only the component you use. For example, if I only need the block grid, buttons, and grid components, I would have the following import statement:

// @import "foundation";
@import "foundation/components/block-grid",
    "foundation/components/buttons",
    "foundation/components/grid";

3. Use semantic classes

Semantic classes are Foundation mixins that give meanings to components. They are documented under the heading “Semantic Markup with Sass” within Foundation documentation. For example, the Side Nav component provides the mixin side-nav() to create Side Nav semantic classes.

Using semantic classes alone does not reduce the size of the output CSS. The default HTML classes should be disabled so that presentational classes are not generated in the output CSS. Doing this will prevent certain styles in components that are never used in your design from appearing in your output CSS thus reducing its size. The styles that you do use will appear in the output CSS courtesy of the semantic classes you defined. An example

.roundbutton {
  @include button($bg:#fff, $radius:1000px);
  border: solid 1px #dbcbb6;
}

The final CSS will include the roundbutton class, but not the usual button, radius, round, secondary, etc classes

To disable the default HTML classes, edit _settings.scss to set:

$include-html-classes: false

For those components that you really want default HTML classes for, you can enable them one by one. For example, to enable grid default HTML classes, do:

$include-html-grid-classes: true

If you do not require styles for printing, then disable printing classes by:

$include-print-styles: false;

4. Hand-optimize Typography

The Typography component is almost always required, but there are styles in typography that are unlikely to be used. For example, a shopping site is unlikely to require styles on <code>, <blockquote>, vcard, etc. Copy the _type.scss file, and delete styles not required by your site and import that file instead of the usual _type.scss file.

5. Only generate the grid classes that are in use

This is similar to 3. Use semantic classes. Ideally, only semantic grid classes are generated. If that is not possible, use the grid-column mixin to create the presentational classes required. Clone from _grid.scss and remove classes if semantic classes and the grid-column mixin is insufficient to give you the classes you need. The pull, push, offset classes take up a lot of bytes and are rarely used. Rarely does a site use all of the small, medium, large, xlarge, xxlarge classes. Why not remove the unused ones?

6. Disable unused visibility classes

The _settings.scss includes flags to control generation of visibility classes for tables, classes for backwards compatibility with legacy visibility, and classes for accessibility. If you don’t use them, you can disable them in the final output.

$include-table-visibility-classes: false;  // set to false if tables visibility classes are not used
$include-legacy-visibility-classes: false;  // set to false if Foundation 4 visibility behaviour is not required
$include-accessibility-classes: false;  // set to false if accessibility classes are not used

If you don’t use orientation targeting and print targeting, remove them (clone visibility.scss and comment out those classes).

Putting it all together

I applied all of the above and the final CSS size was down from 310k to 64k before minimizing. After minimizing, 24k. Not the slimmest, but acceptable. 🙂