CSS frameworks and column class names -why I think they are wrong
Thursday, October 18, 2012 1:47:57 PM (GMT Daylight Time, UTC+01:00)
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:
| 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?
The Site Doctor site is featured on CSS Mania
Friday, May 09, 2008 5:10:02 PM (GMT Daylight Time, UTC+01:00)
Perhaps not a big thing to shout about for some but our new company site has been featured on CSS Mania!
Check the site out and leave your rating :)
http://cssmania.com/galleries/2008/05/08/the-site-doctor.php
And if you've not already seen it, check out the updated website design process full of jQuery loveliness: http://www.thesitedoctor.co.uk/services/website-design-and-development
What have I been up to?
Friday, September 21, 2007 11:20:01 PM (GMT Daylight Time, UTC+01:00)
It's been rather quiet on my blog recently, if you're wondering why (and don't chat to me on/off-line) I thought I would share with you what we've been working on recently.
For the past month or so The Site Doctor has been developing a new web site (www.wineandhampergifts.co.uk) for Porter and Woodman Gifts Ltd - a local company that produces personalised corporate hampers and gifts. It's been quite a challenge as they have a rather unusual ordering system that allows multiple recipients/addresses multiple items. Looking at it now, it's not so complicated but the delivery charge calculations and initial specs took a while to fully grasp. It's been really enjoyable.
I'll probably cover aspects of the site over the forthcoming months but there are a few really nice features to the Wine and Hamper Gifts site (or at least I think so), some of which the end user will never know about such as the use of generics to calculate the address/recipient/gift variations) and those that they may -for instance the use of the JavaScript1 Zoom function on the product details page (courtesy of LuckyZoom), also the design created by our excellent designer Gareth Brown all adds up to what has to be one of the best sites I've developed to date.
1 Yes, I did just say I've integrated some JavaScript into the site ;)
I doubt most of my readers are interested on the in's and out's of the project itself but from an SEO perspective, I for one am expecting pretty decent results. We opted to use the URL Rewriting ISAPI from Helicon this time round over our usual IISMods URL Rewriting ISAPI as for some reason the IISMods site has been offline for a while (and checking now has been converted into a very weird site).
Another aspect that some people may be unaware of is that the majority of the Wine and Hamper Gifts site operates the same without JavaScript as it does with JavaScript, this is important not only for screen readers but also search engines. There is only one area of the Wine and Hamper Gifts site that I'm aware of that doesn't operate without JavaScript and that is the "Personalise this gift" link on the cart page that allows the user to either edit the existing message or add one that doesn't already exist, that's because it uses a LinkButton, but I may find a way around that later.
Other features that I really like are little things like the way the drop down lists on the left hand menu are created -they're not actually drop down lists but unordered lists that are then manipulated using JavaScript, I think the JavaScript could do with a little tweaking but the result is superb. The Wine and Hamper Gifts site also creates a PDF receipt for the user which is emailed to them, this is something I've been meaning to look into for some time but haven't had the chance, luckily while I was developing the site, Sean Ronan posted to the MsWebDev list about an ASP.Net PDF library iTextSharp (a port from a Java library) which, despite a few oddities from the POV of the Java port does exactly what I wanted. The library is pretty easy to use once you get your head around it and certainly produces some nice results.
There's still more work that's needed to finalise the content and various aspects of the Wine and Hamper Gifts website but if you have a chance, check out the new Porter and Woodman Gifts Ltd Wine and Hamper Gifts website and leave a comment here letting me know what you think :D
Oh, and they've given us a pretty high target to get before Christmas so if you're thinking about treating your customers to a personalised corporate hamper or gift give a little thought to using www.wineandhampergifts.co.uk
Microsoft Expression Web and CSS -is it all it's cracked up to be?
Thursday, July 19, 2007 11:02:32 PM (GMT Daylight Time, UTC+01:00)
After a number of months of hearing how great Microsoft's latest web development environment is -Microsoft Expression Web- I thought I would install it in place of Dreamweaver on my new laptop. I was -until today- pretty impressed with some of it's features, how well it handles CSS within the IDE and had no reason to complain.
That was until today. As I write this, I'm sitting in our apartment in Croatia with the sun beating down on me, generally enjoying life. As it's incredibly hot outside around noon, I thought it would be a good idea to crack on with some work on the new The Site Doctor design -which I hope to have online shortly after I return. So I load up Microsoft Expression Web and the various pages of the new site and crack on.
I've already sorted the CSS for the site so there was no need to open any of the files or make alterations to them however I like to have them open so I can check class names and ids as I work. When I switched over at one point, I noticed that my nice, neat and tidy CSS file of around 190 lines was suddenly closer to 300. I couldn't work it out until I noticed that Microsoft Expression Web had separated out all my group declarations into separate declarations such i.e.:
Became:
Well done Microsoft, I thought you would have learnt your lesson after the fiasco that was Visual Studio 2003's HTML editing, what on earth were you thinking? I'm sure this is a simple setting I need to change (and I can understand why they've done it) but not having Internet access here there's no easy way of finding out (I've searched the help files) which means hours of careful CSS architecture have been completely trashed.
So, as soon as I realised, I spent about 20 minutes meticulously working through the bunch of CSS files open reversing the mess Microsoft had made of them and promptly closed them, safe in the knowledge Microsoft Expression Web can't mess with them again. Or so I thought.
A short while ago I needed to open one of the CSS files again to alter a few declarations and to my horror I found that the declarations had been ungrouped. I can't believe it, not content with simply altering the CSS files that are open, Microsoft Expression Web actually alters the CSS files on the FSO without you knowing.
If you're ever thinking about using Microsoft Expression Web for CSS development then don't expect your files to be neat and tidy, in my case I would say the files were increased in size by almost 5x which ok may be 1Kb --> 5Kb but if you're getting tens of thousands of hits a day, that's a serious bandwidth increase.
Not a happy bunny.