Leaving the the semantic grid behind

Guest Post by Kirsten

Custom WordPress themes are my bread and butter. While I’m trying to cultivate something like a theme boilerplate, my coding process is changing constantly. Whenever I think: „That’s it, I got it!“, I change my mind.

I’ve been working with SASS for quite a while and I’m very fond of it. SASS a very elegant and lean way to organize a modularized CSS workflow.
For example, SASS calculates grids very effectively. A few lines of code output a nice responsive grid.

compiles to

But there are a few drawbacks with this kind of grid. In the markup every item that is supposed to behave as a column needs an additional class like .col-2.
Thus the HTML code becomes a bit bloated which some people don’t like. Neither do I. Moreover I find the classes’ names hard to remember. They usually refer to a grid with 12 columns. So .col-4 means:

This item spans 4 columns of 12 columns, which means that this column’s width is 1/3.

Not easy to memorize, at least for me it wasn’t.

Enter The Mixin

Mixin Libraries like Bourbon Neat or grid frameworks like semantic.gs take a different approach. They provide a selection of SASS mixins to include into my stylesheet. There is no need to populate the HTML with additional classes like .col-1 and .col-3 any more. Just add the mixin to the selectors and name the classes as you like. This is far more semantic.
SASS (Neat)…

… compiles to CSS …

… and looks like this in HTML.

No bloated HTML, no weird classes.

The grid strikes back

The designs of my projects – WordPress themes mostly – generally require different sets of columns. Which means I have to make up some names for column classes whether I like it or not. At the end of the day my HTML is packed with stuff like this:

I know, it doesn’t look like it, but I really made some effort to stick to a system. But when I looked at the code a few days later I had no idea what these classes stand for.

Back to simplicity

Lately I came across an article by Chris Coyier: Don’t overthink grids

Chris comes up with something absolutely lovely: Human readable grid classes. For the first time the col-n thing made sense to me.

.col-1-4 simply means „one column of four“.

That simple. Wow.

I took Chris’ concept as a base for my personal Mobile First SASS Grid. I made some additions for columns that span several columns and I added a second level of column sets. Thus I can easily determine how the grid behaves when the viewport becomes smaller. For example a grid with 4 columns becomes a grid with 2 columns on smaller screens. It’s just adding another class to the object. Even less semantic, but very, very handy.

See my code at Github.

The non semantic grid

So, I’m back to square one and my HTML markup contains lots of .col-1-2 and .span-1-of-2 again.
I’m aware that this is not semantic markup. But I think for small projects and small teams it is a decent option nonetheless. On bigger projects with lots of lines of CSS and multiple contributors a semantic approach might be a better choice.