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:
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:
FrameworkFull WidthHalf WidthThird WidthGrid View960 Grid System.grid_4.grid_4.grid_4Twitter Bootstrap.span12.span6.span4KubeN/A.Half.Thirdblueprint .span-12.span-6.span-4Ours.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?