A good CSS framework is one of the most useful tools a web designer can have on their computer. I certainly know that without Andy Taylor’s CSS Grid, this website would have taken at least double the amount of time to set up as it has done. That’s not to say they don’t come with their own issues and problems. Each of the frameworks I’ve seen has drawbacks, but I think I know how to get over two of the main ones.

Removing the .last and .omega

A fair number of these frameworks, namely Columnal and CSS Grid require that once you’ve put the last module of a row in, you add the class value of last to it. Now, I don’t know about you, but I tend to forget things like this, and then spend about an hour yelling at the screen, wondering why everything looks off.

What this class does, in the case of Columnal and CSS Grid, is remove the right hand margin of the last module, so that it doesn’t fall on the next line because it’s run out of room. But frankly, it’s not very semantic, and also not very designer-friendly, to have to remember to add this class.

This is where :last-child comes to the rescue! Let’s get right in to the code.

.row :last-child { // note the space between .row and :last-child - this makes sure that it selects the last child element in the row, regardless of what it is. For specificity, you could say .onecol:last-child, .twocol:last-child etc
    margin-right: 0;
    }

This says exactly the same thing — take away the right hand margin on the last element of the row — without the messy markup. Awesome! But what’s that? IE7 doesn’t support :last-child? I guess you’re right.

But fear not, there is a fix for that too! Using this rather fantastic and far-too-clever script, you can tell old versions of IE to behave the same way as more modern browsers. It even includes a transparent .png fix! I chose the IE9 version of the script, so IE versions 5.5 through to 8 will behave like IE9 and recognise the :last-child selector.

It really is that simple!

The float clearing problem

Another problem with the CSS frameworks of today is that they make heavy use of floats. 960.gs and a few other frameworks require that before ending each row, you should put an empty div in there with the class value of clear, or something to that effect. This is even worse than cluttered class names — you’re littering the DOM with empty and non-semantic content! Yikes!

Luckily, Dan Cederholm has just the fix — and it’s a damn good one! Lets say you have a row containing your modules, with a clearing div afterwards. Take that shameful clearfix out, and add this rule to your row’s CSS.

.row:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

This creates a pseudo element that clears all the floats before it, without littering your markup! It’s this kind of stuff that makes me do a happy dance in my chair.

But wait, once again IE doesn’t support this kind of CSS trickery! Luckily, Dan is one step ahead of IE and has a fix for that too.

* html .row { // IE6
    height: 1%
    }

*:first-child+html .row { // IE7
    min-height: 1px;
    }

That’s it. Once again, it really is that simple.

I’m not saying that the creators of the frameworks have done a bad job, far from it — their contributions to the web designing community are extraordinary and save many people a lot of time. But if you’re a little bit obsessed with the semantics of your site, and hate using clearfixing div’s all over your markup, then this is a simple solution for you.