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.

New identity, new website

I’ve been running a small web studio now for 7 years. At the start I called the business Jackfruit (after the large, exotic tropical fruit), but in the last couple of years I began to feel that the name wasn’t working as well as it should.

I work in small collaborative teams and directly with clients as a consultant, and hence my customers tend to know me by my real name. Thinking about my business as a brand, I came to the conclusion it should be as simple, direct and honest as possible. Although I work a lot in teams, I don’t sub-contract or directly employ anyone else. So using my real name as my business name just seems to make sense at this point. responsive web design layout shown at different screen sizes

Responsive design

I made the decision to ‘re-brand’ quite a while ago but it’s taken me ages to find enough time free from client work to create this new website. I can’t believe it’s finally finished! Part of the reason it took so long was that half way through I decided I really needed to learn the new techniques emerging in responsive web design (RWD). RWD is a solution to the growing problem of how to make your website work for the increasing number of mobile and tablet browsers. Instead of having to create a separate mobile version of a site (and all the extra production and maintenance work that entails) in RWD the layout of the page responds to the size of the screen by reconfiguring itself. If you are viewing this page on a desktop computer you can try this for yourself – gradually shrink your browser window and you will see the layout re-configure itself. Look at it on an iPhone, for example, and you will get a single column of content without the need to endlessly pinch-zoom to use the page.

Web type

Another huge leap forward for the web over the past couple of years has been the advent of viable font embedding. This site uses the excellent Museo Sans and Museo Slab typefaces, which are embedded using Typekit. What’s really nice is having a family of typefaces that are designed to work together like this, giving a large range of styles, all of which harmonise beautifully. I find that Museo also renders pretty well across OSX and Windows operating systems.


So finally, after far too long, I again have a website where potential clients can look at my portfolio, rather than having to cobble together endless emails of links and PDFs. Let me know if you spot any typos or bugs!