> ## Content Index > Fetch the complete content index at: https://blog.tsd.digital/llms.txt > Use this file to discover other available public pages before exploring further. # CSS frameworks and column class names -why I think they are wrong - URL: https://blog.tsd.digital/css-frameworks-and-column-class-names-why-i-think-they-are-wrong/ - Published: 2012-10-18T11:47:57.000Z - Updated: 2012-10-18T11:47:57.000Z - Author: Tim Gaunt - Tags: CSS, Design, HTML, Web Development, The Site Doctor, #Import 2025-04-01 05:37 Before starting the new [uCommerce demo razor store](https://bitbucket.org/uCommerce/ucommerce-razor-store?ref=blog.tsd.digital), 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](http://960.gs/?ref=blog.tsd.digital) - [Twitter Bootstrap](http://twitter.github.com/bootstrap/?ref=blog.tsd.digital) - [Kube](http://imperavi.com/kube/?ref=blog.tsd.digital) - [blueprint](http://www.blueprintcss.org/?ref=blog.tsd.digital) 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:

Column 1

Column 2

Column 3

## So how does it compare? Assuming we're working on a 12 column grid: FrameworkFull WidthHalf WidthThird Width**Grid View**960 Grid System.grid\_4.grid\_4.grid\_4[](http://blogs.thesitedoctor.co.uk/tim/content/binary/Windows-Live-Writer/Where-I-think-most-CSS-frameworks-are-st%5FA078/2012-10-18%20CSS%20Grid%20-%20960%5F2.png?ref=blog.tsd.digital)Twitter Bootstrap.span12.span6.span4[](http://blogs.thesitedoctor.co.uk/tim/content/binary/Windows-Live-Writer/Where-I-think-most-CSS-frameworks-are-st%5FA078/2012-10-18%20CSS%20Grid%20-%20Bootstrap%5F2.png?ref=blog.tsd.digital)KubeN/A.Half.Third[](http://blogs.thesitedoctor.co.uk/tim/content/binary/Windows-Live-Writer/Where-I-think-most-CSS-frameworks-are-st%5FA078/2012-10-18%20CSS%20Grid%20-%20Kube%5F2.png?ref=blog.tsd.digital)blueprint .span-12.span-6.span-4Ours.col-1-1.col-2-1.col-3-1[](http://blogs.thesitedoctor.co.uk/tim/content/binary/Windows-Live-Writer/Where-I-think-most-CSS-frameworks-are-st%5FA078/2012-10-18%20CSS%20Grid%20-%20Ours%5F2.png?ref=blog.tsd.digital) 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?