Sleeping Columns Using the Semantic Grid System

So a couple of weeks ago I was working on building a complex responsive grid that had different column widths at different breakpoints, and blogged about it here. I found this system works pretty well and is very scalable, meaning I can quickly build complex responsive templates for new layouts on a site. However, all those classes are pretty cumbersome to work with and also mean that you’re putting all that presentational stuff into your markup. Then I came across Tyler Tate’s Semantic Grid System and I thought it might be useful to try this as an alternative.

The nice thing about Tyler’s solution is that it hides all the complexity off somewhere else (i.e. in the file grid.less that you need to include) and lets you specify your grid in a fairly simple way. Even better, there’s no need to add all those unsemantic classes into your markup. The extra constraint is that you have to use a CSS pre-processor such as LESS, so if you’re not already doing that, it does mean making some changes to your workflow. But after a bit of fiddling around I managed to get my example layout working with the Semantic Grid method instead.

@total-width: 100%;
@columns: 12;
@column-width: 5.625;
@gutter-width: 2.5;

#wrapper { padding: 1.25%; }
        
@media (min-width: 768px) and (max-width: 959px) {
        
    #header { .column(12); }
    .main-wrap { .column(8) }
    .side1 { .row(8); } /* Nested column container needs to be a row */
    .side1a, .side1b { .column(4,8) } /* Nested columns */
    .side2 { .column(4) }

}

@media (min-width: 960px) {
        
    #header { .column(12); }
    .main { .column(6) }
    .side1 { .column(3) }
    .side2 { .column(3) }
        
}       

As with my original approach, there is quite a bit of complexity in getting the nested columns to work, and this probably is the most fiddly part of the Semantic Grid code. Basically you need to pass a second parameter to the column mixin to your nested columns, as well as applying a .row mixin to the parent column. But having figured this out, it’s not too hard to use. Another small issue was that Tyler’s grid uses a system of equal numbers of columns and gutters, which means that you get right and left page margins equal to half a gutter width. I wanted a full gutter width either side, which looks a bit more balanced to me. Luckily I found it was possible to achieve a close approximation of this by adding an extra wrapper DIV around everything and applying a bit of padding to it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Help me make sure you\'re not a machine * Time limit is exhausted. Please reload the CAPTCHA.