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.

@for $i from 1 through $columns {
.col-1-#{$i} {
width: (100 / $i) * 1%;

compiles to

/* Desktop Columns */
.col-1-1 {
width: 100%;

.col-1-2 {
width: 50%;

.col-1-3 {
width: 33.33333%;

.col-1-4 {
width: 25%;

.col-1-5 {
width: 20%;

.col-1-6 {
width: 16.66667%;

.col-1-7 {
width: 14.28571%;

.col-1-8 {
width: 12.5%;

.col-1-9 {
width: 11.11111%;

.col-1-10 {
width: 10%;

.col-1-11 {
width: 9.09091%;

.col-1-12 {
width: 8.33333%;

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)…

@include span-columns(4);

… compiles to CSS …


… and looks like this in HTML.

<div class="third">my nice column</div>

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:

<div class="col-6-2">...</div>
<div class="col-1plus2-1">...</div>

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“.

<div class="grid">
  <div class="col-1-4">
  <div class="col-1-4">
  <div class="col-1-4">
  <div class="col-1-4">

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.

<div class="col-1-4 tablet-col-1-2">some content here</div>

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.