CSS frameworks and column class names -why I think they are wrong

Before starting the new uCommerce demo razor store, we had a chat through the options as far as CSS frameworks were concerned. The main consideration we had was that it had to be a framework that the community was familiar with as we weren't looking to explain the framework but rather demo the uCommerce functionality.

The frameworks we considered using were:

• 960 Grid System
• Twitter Bootstrap
• Kube
• blueprint

One thing that has been bothering me for some time with all these various frameworks is the class naming convention they use for the columns.

The issue I have is that I still don't think it's clear and leaves me having to think -especially when you start moving over to a responsive design.

An Alternative Solution

For quite some time now we've been using an alternative class naming convention which I personally find far more descriptive and doesn't care about how many columns you're using.

It's simple, name the column classes as though they're "upside down fractions" e.g.: a column that spans 1 of two 2 columns on the page would be: .col-2-1 (there are two columns per row and you want this one to span 1 of those two).

Why's it better? Mainly because it's descriptive -so you know how may columns will be in the row and how many this column spans. You can easily spot areas to group columns together e.g. .col-4-2 should be .col-2-1. Want a 3 column layout with the centre column being 50% of the page? No problem:

<div class="col-4-1">
	<p>Column 1</p>
</div>
<div class="col-2-1">
	<p>Column 2</p>
</div>
<div class="col-4-1">
	<p>Column 3</p>
</div>

So how does it compare?

Assuming we're working on a 12 column grid:

Framework	Full Width	Half Width	Third Width	Grid View
960 Grid System	.grid_4	.grid_4	.grid_4
Twitter Bootstrap	.span12	.span6	.span4
Kube	N/A	.Half	.Third
blueprint	.span-12	.span-6	.span-4
Ours	.col-1-1	.col-2-1	.col-3-1

I realise that some people don't like fractions but I find that this naming convention a little easier to work with when mixing and matching column layouts. What do you think? How do you name your column classes?