420 Summit

Lots and lots of boxes

I wanted to take some time to redesign this site and rather than build it out in some secret corner, I figured I may as well just do it here. After all, it’s unlikely more than five or six people will even notice.

Because of an upcoming newspaperish type site I decided to explore a few CSS grid frameworks. They’re all the rage these days, or so I hear. More importantly, I’m going to have a great deal of information to convey in a very small space and without a formal structure I’m hosed.

So I looked at a few grid based CSS libraries.

• Yahoo UI Library – Big, comprehensive and absolutely mind-numbing. I didn’t make it past the first page of the docs. I’m sure it’s a wonderful piece of work but the presentation scared me away. If I wanted to work I wouldn’t be downloading canned stylesheets.

• 960 Grid System – The opposite of the Yahoo! library. A simple system presented gorgeously. This one sold me on extending the pages beyond the 800×600 window I’ve been basing sites on for a decade. The minimalist approach was appealing but the documentation was lacking. I found myself doing math on a holiday weekend and that’s a bad thing.

• Blueprint – The big daddy of CSS grids. Well documented and incredibly flexible. The interior (slightly broken) pages of this site use it and the only thing I don’t like is it’s relatively large size. I would rather start with a small baseline file and add what I need than remove redundant and/or unnecessary markup.

• Typogridphy – Our winner. I was sold on this one the second I opened (and stole borrowed) the example page. Based on the 960 grid above, Typogridphy places a little more emphasis on vertical elements and typography. Extra points for using actual numbers representing column widths for class selectors.