Webstrong Ltd

We started exploring CSS frameworks a bit last year so thought I’d share what we’ve learned. Overall I’m very happy and delighted we made the move. I must admit at first I didn’t give them much thought, “I don’t want to be using someone else’s code, I want to write my own” I’d think. These are the ramblings of a foolish man.

With projects ever growing in size and scale, when starting a new project you want to be hitting the ground running and using a good framework plays a huge hand in this. Within minutes you have the whole skeleton of your site up and running and ready for the trickier more unique elements.

I first looked into Blueprint, but was put off by the unsemantic naming structure. So after that we cast our shadow over OOCSS and decided to give it a try. Out of all the files you get in the download, there are 3 in particular that I use constantly now in every project. I’ll link to the files and you can Firebug the hell out of them, then I’ll go through each of them.

• template.css
• grids.css
• content.css

Template

The template is obviously the frame of your site. In here you have eight main classes, throw these onto your page and you’re instantly ready to start focusing on the unique parts of your site and skip past all the repetitive parts. The classes are…

• .page (your page container, which is 950px wide, if you want a narrower / wider page you just extend this with a nicely named class of your own ex. “.myPage”)
• .liquid (takes up the 100% width of the screen in a liquidy fashion)
• .head (your header)
• .body (for clearing floated properties, for instance your leftCol or rightCol)
• .rightCol (yep)
• .leftCol (that’s right)
• .main (this takes up the full width of your container)
• .foot (exactly)

The left and right cols are great and easily changed, if halfway through the site the client decides they want the sidebar on the left instead of on the right, it’s just a matter of renaming “rightCol” to “leftCol”, without ruining the structure of your site. By default the leftCol is 250px and the rightCol is 300px, but like the .page if you want a custom width you simply extend it with a class of your own.

Grids

The grids I was most impressed with, they’re just so handy and flexible. I could explain them in grave detail, but simply study this page a bit and it will explain it perfectly, with great code examples under each section. You can have complex pages laid out in no time. Again if the structure of your site changes halfway through, these scale beautifully and are easily changeable. No more sleepless nights worrying of sudden changes from awkward clients.

Content

Finally there is the content.css file, the best part of this is I rarely ever have to bother worrying about sizing h1-h6 tags. They’re all sized in perfect proportion to the rest of the content on your site. For instance your h1 is 196% bigger than your normal font-size, your h2 is 167% bigger and so on it goes down the chain.

Benefits

So these three files I found enormously helpful in speeding things up. One of the main differences was less cross browser issues, at the end of building a site before using a framework, I’d always check it in Safari and Chrome, “yeah, that looks fine”, then check it in Explorer, “oh for the love of god…”. Now when I check it I rarely ever have any issues and if there is they’re pretty minor. Also I don’t have to keep checking to see what I named things, I know of the top of my head what everything should be called, you have the consistency factor across all your projects. There are much more in the download, but I’ve just covered the main one’s I found most helpful.

Check out the whole package yourself here and check out the creator here.