How to use the ZURB Foundation for Sites grid system without the meaningless class names

When you take a look at a front-end framework like Twitter Bootstrap or Foundation for Sites, do you cringe at the classes that you need to use to build a grid-based layout? You’re not alone.

I’ll show you how to use Foundation’s responsive grid system with your own semantic class names.

Ugliness of the default Foundation grid class names

Look at this example for setting up a simple layout using the class names that a default Foundation install provides:

In “Foundation speak,” the markup basically describes this:

• Make me a row. The following items need to be contained within that row:

  • Make me a container for my main content.

    • On small screens, this container should be full-width.
    • On “medium” screens and up, this container should be 9 columns wide (75% width).

  • Make me a container for a sidebar.

    • On small screens, this container should be full-width.
    • On “medium” screens and up, this container should be 3 columns wide (25% width).

Using class names like medium-9 columns is not very semantic. I’d rather the markup look like this:

Fortunately, we can use Foundation’s Sass mixins to clean this up and still keep it responsive.

Cleaning it up with Sass mixins

Foundation is built using the popular CSS preprocessor Sass. ZURB has taken great care to make all of Foundation’s features available as Sass mixins so you can customize and remix the styles as you need.

Take a look at the Customize with Sass documentation for Foundation’s grid system. Foundation provides Sass mixins called grid-row and grid-column that you can use in your own custom class names.

So now we can write our own Sass code that looks like this to make our dream HTML markup a reality:

I’ve tried my best in comments to describe how each line works. Let me know if any part is unclear.

Basically, you want to define how the classes should work in the mobile context first, and then build larger-screen versions afterward using media queries. In this case, I use the $medium-up variable to define where I would like the larger-screen version to start. (The default for $medium-up in Foundation 5 is 641 pixels and larger.)

Stopping Foundation from including the grid classes

Once you’ve stopped using all of the grid classes in your markup, you can tell Foundation to stop including those classes in the CSS that it outputs.

In foundation_and_overrides.scss (Rails) or _settings.scss (other), look for the $include-html-grid-classes variable and set it to false:

(Thanks to Roi and his comment below for reminding me to add this tip. )

The grid is the best place to start for this technique

Once you have this Sass mixin hammer, everything starts to look like a nail. Resist that temptation at first and think things through in each case.

I usually think twice before messing around with other elements that Foundation provides markup for. Each time you use a Sass mixin like this, you detract from any good framework’s best feature: documentation. Sure, you can look through the Foundation documentation for its Sass mixins. But the default class names are treated as first class citizens in the documentation, and they’re usually easy to understand upon first glance.

The grid classes are a perfect place to start though. There really is no semantic value in class names like row and medium-4 columns, so rename those right away based on your interface’s needs.

When the default grid classes are appropriate

Is there a time when the default grid classes are appropriate? Sure: when you’re prototyping.

It’s easy to slap on the classes while you’re trying stuff out. Just be sure to clean up your markup with semantic classes and the mixins once you’ve locked down everything.

Related resource

1. Sass and CSS style guide