I’ve become a little obsessed with CSS frameworks lately. I’ve tried just about all of them at one point or another. I’ve argued with many a semantic warrior who hates them for their non-descriptive clss names. I’ve fought with a few minimalists who can’t stand all of the (4kb…seriously) bloated code.

Regardless of how you feel about them, it’s pretty obvious that they save time, and that’s what we’re all after. Here’s my take on a few of them:

BlueprintCSS

Blueprint is by far the most popular CSS framework at the moment. It’s obviously best known for it’s grid. You get 24 columns to work with, and a mere 10px separates each column from its neighbor. Markup is pretty simple. To set the width of a div, just stick class=span-XX in its declaration, where XX is the number of columns you’d like that div to occupy. If you want to stick a few empty columns before or after your div, just add prepend-XX or append-XX to the class. Easy right?

Blueprint gets a little deeper though. It gives you functionality for adding a border on the right side of a div (class="border") or even a 1-column space to the right of a div with a border in the middle of that space (class="colborder"). Using appropriate form elements (i.e. fieldset, label, etc.) and adding class="text" to input boxes gets your forms looking pretty nice, and it even gives you classes for styling status messages (error, success, and information).

So Blueprint is pretty complete. Typography is done for you. Grid is done. Forms are done. Tables are done. Not bad.

My problems with Blueprint are pretty anal. I don’t like the tiny 10px space between columns. I find myself adding prepend-1 to just about everything to get some much-needed white space in there. I don’t like the typography (I think Tripoli gets it right), but that’s just my taste. I don’t like having to add class="text" to form elements when CSS can style them as-is. I don’t like the naming conventions (prepend and append? Come on!). 960.gs gets this right by changing span-XX to grid_XX and prepend/append to prefix/suffix. But it’s complete and has the support of some gurus which makes me feel safe using it.

960.gs

I really like 960.gs. It just seems to make sense. You start out with the option of a 12-column grid or a 16-column grid, or you can use both on the same page if you’d like. The naming conventions of Blueprint which bug me are fixed (prefix/suffix/grid_XX). The grid is solid. There is 20px space between columns instead of Blueprint’s 10px, which made me smile. The creator remarks that because if its simplicity and its clever design, a separate IE stylesheet wasn’t needed because fixes were included in the original stylesheet.

Typography is minimally styled. You get basic font sizes, a sans font face declaration, stuff like that. And that’s about it. The author said he took out all of the stuff that Blueprint has which he kept having to overwrite every time he made a site. Guy’s got a point. Blueprint gives us default background colors for things like table headers and “box” classes, when there’s a pretty big chance it won’t mesh with our color scheme.

That being said, 960.gs still left me wanting some more. I know that the idea is to add whatever you want to use with every sight, but I can do that without downloading a framework. I want to see how THEY would do it. I’m interested to see how Tripoli styled their forms and what Blueprint does with definition lists. Maybe they’ll convince me their way is better.

Also, having the option of 12 or 16 columns is nice, but I think having 24 trumps it. The problem is that 12 is divisible by 3 (meaning that you can have three even columns) but 12 columns just isn’t a lot to work with. It’s not flexible enough for me. So I try 16, but lose the ability for three even columns. I miss 24. Next!

LogiCSS

Now we’re talking. 24 columns, PHP utilities, more flexibility than you can shake your stick at, this is a winner, right? Wrong. All of that is true, but LogiCSS gives me a headache. 960.gs makes sense, and Blueprint doesn’t take much longer, but Logic has about double the possible class declarations of those two. It gives you options to use padding instead of margins to separate divs, options to center divs, and even options for liquid layouts, all based on class declarations.

This is awesome on paper, but it sucks to try and work it out. I could never remember which class did what, and the horrible class names didn’t help (.pc11? What?). I’ve done my share of CSS and have dealt with some nasty layouts, and I’m sure Logic would have broken itself in and made sense before too long, but it lost me at hello. It’s a framework, I don’t want to have to spend time learning it that could be spent designing, especially when there are simpler options out there. There goes that one.

YUI Grids

YUI pretty much set the stage for CSS frameworks with Grids. Unlike the previous three, you name things based not on how wide you want them to be but rather on what they are. Yes, this is semantic goodness that we can all appreciate, but it doesn’t really do what we’re after. You can nest columns, select from a few different widths, and tons of different layouts, giving you thousands of possibilities, but it just feels painful to use. If I want to say MAKE THIS DIV BE 200 PIXELS WIDE there’s no easy way to make that happen. I have to find a preset that does something close to that and go from there. I’ll compromise semantic code for this feature.

LogiCSS’s learning curve appears here also. Once again, I’m NOT SAYING it’s too hard to learn. I’m just saying there are simpler options out there which do just as good of a job, if not better. Why learn what class="yui-b" when you can sprinkle a little class="grid_4" and be done with it?

YUI’s typography styles are pretty simple, sharing 960.gs’s mantra of don’t do what will just be redone. Once again, I’m bored. Maybe I wouldn’t have redone it. Who knows? Maybe I would have used it for every site I ever designed. Maybe it would have been THAT good. But all we get is header sizes and a font face. Meh.

Elements

I must admit I didn’t spend enough time with Elements to really get a good feel for it. It’s more like a workflow than a framework, although it has elements of both. You get some stylesheets along with a folder structure, some photoshop templates, etc. Sounds nice. I just didn’t see anything in it that sparked my attention (except for the stylesheet that places little pictures next to links to show you if it’s an external link, email, word doc, pdf, etc. That was dang cool.) Check it out if you want. Maybe you’ll see something I didn’t.

Hartija - A Print Framework

Unlike the others, Hartija is ONLY a CSS framework for printing. You will only see it in action whenever you print a web page using it. Blueprint comes with one by default, but I like Hartija’s better. Why? I have no idea. Perhaps it’s the whole “do one thing and do it well” approach. It just looks a little cleaner to me. Check it out.

Tripoli

Tripoli is not a grid framework. Rather, it gives you some nice clean baseline styling of common HTML elements. Typography, forms, tables, block quotes, it’s all here. And it looks GOOD! I love Tripoli. I’ve combined the grid of Blueprint (with a bunch of things renamed) with everything else from Tripoli to get the best of both worlds, and I’m loving it so far. UPDATE: I’ve released this fusion as a standalone framework called BlueTripCSS. Check it out.

Tripoli does a lot of things right. It styles form elements without then need for a separate “text” class added to them. It pads the table data elements to get some nice looking tables. It doesn’t stick random background colors to elements that you would have had to overwrite. It gets all the inline tags (code, tt, dfn, em, kbd, etc.) looking good and consistent cross-browser. What more can I say? What it does, it does quite well. This is a promising project.

To compare it’s styling with blueprints, check out this Tripoli styled page compared to Blueprint’s version of it and see if you don’t agree with me.

YAML (Yet Another Multicolumn Layout)

YAML is a mature project. It has a great website with excellent documentation (something that all of the other frameworks except for YUI could definitely benefit from). It’s fairly fully featured. Once again, like Elements, I just didn’t see anything worth investing in.

Others

Check out this fairly complete list if my rundown left you wanting more.

What do you think? Agree? Disagree? Which is your favorite? Do you use one? Let me know.

This entry was posted on Tuesday, April 29th, 2008 at 6:25 pm and is filed under CSS, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.