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.