CSS Framework Badge

7 Feb

Layout 1 | Layout 2 | Layout 3

For the CSS Framework Badge, I used the 960 CSS framework, specifically the 12 column framework. The first time I sat down to work on it, I opened the 960 zip file and just stared at my screen in horror. I went through Thomas Cannon’s article, “Using the 960 grid system as a design framework,” hoping it would make things magically fit together in my brain. Not so. I found his “tutorial” a bit ironic. One of the major benefits of the framework is that it eliminates a lot of tedious and precise coding, making the process of building a decent-looking website much more accessible to those who are new to coding. All I could think (or rather mentally scream) while reading Cannon’s instructions was “You say to do this but you don’t say HOW!?” Cue frustrated weeping, self-deprecating sputtering, etc.

Layout 1 using the 960 CSS Framework

Layout 1

A pint of chocolate ice cream later, decided to give it another shot. But how? Screw Cannon. Prof. Zac Gordon is my hero. His tutorial successfully dumbed-down the overwhelming mass of gibberish enough so I could figure out what the heck I was actually supposed to be doing. For the first layout, I just duplicated the demo.html file and slowly cut things out, rearranged, and added new code to make my own design. By the third layout, I didn’t even have to look at the demo anymore.

The CSS framework approach certainly makes things way easier (after you get over the initial emotional rollercoaster anyway) than building a site from scratch, but it has its drawbacks. Pro: it’s flexible. You can easily move the columns of content around with a few clicks, change the size of columns, etc. Con: There is a limit to that flexibility. I’ve been using the framework to build another website (not for this badge) and I keep finding myself getting frustrated with the 960px width limitation. On the other hand, there are most likely other frameworks out there that I haven’t looked into that are larger, but…eh, I don’t have an excuse here.

Layout 2 using the 960 CSS Framework

Layout 2

Another thing I wasn’t too fond of was the 10px gutters on either side of each column. Sure, they were not hard to get rid of in my own CSS file, but I just don’t like them.

Aside from that little quibble, I’m quite pleased with how the designs turned out. They weren’t too much trouble once I figured out what to do, and the majority of the time I spent was just me being OCD about making everything look super-special-awesome.


Layout 3 using the 960 CSS Framework

Layout 3



Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: