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)…
.third{ @include span-columns(4); }
… compiles to CSS …
.third{ width:33.3333%; float:left; padding-right:3%; }
… and looks like this in HTML.
<div class="third">my nice column</div>
No bloated HTML, no weird classes.
Really?
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> <div class="col-1-4"> </div> <div class="col-1-4"> </div> <div class="col-1-4"> </div> </div>
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.