CSS Frameworks -- what you need to know, and what else you need to know.

Start working with CSS regularly and you'll find what a pain it is to create a consistent and flexible CSS design for a web site. Some of the not so obvious problems when you start using CSS are:

1. Inconsistent layout, sizing and odd positionings between different browsers regardless of what the CSS standard says.
2. Layout using tables is uncool, and technically not a good thing -- but using nested div's can sometimes be worse than not knowing anything about div and just using tables for layout.
3. Copy-and-pasting CSS gets pretty boring quickly...
4. and putting all the CSS into one big file can get you weird but sometimes creative results
5. CSS can be pretty deep sometimes -- especially when you can't seem to figure out why a combination of CSS attributes affects the other stuff on the page.
   

After a while you might figure out how to be careful and start separating your CSS into different files depending on the what it's supposed to do. For example, reset.css for making sure all the CSS files behave the same regardless of the browser, and grid.css for the perfect 3-column layout that you have worked on for weeks.

But it is not easy to maintain your own "mini CSS framework".

Well CSS frameworks are supposed to solve all that and more. There are as many CSS frameworks as Web frameworks. Let's see some of them and compare the pros and cons.

1. Blueprint
Blueprint has been created from a typographic design basis. What this means is that Blueprint makes it a point to display a font with the same size and type the same way across different browsers. No longer would one see a perfectly nice paragraph inside a box using Firefox, while the same paragraph looks like something else in Internet Explorer.

The trick is to reset the page to a base style so as to escape any browser default page quirks. But what's impressive is that you don't have to know all the tricks and techniques in the book to achieve the same result, and a typical web developer can get up to speed with Blueprint almost immediately.

Another strength of Blueprint is the Grid system. With Blueprint, you can quickly develop a page with different kind of layouts by using the available templates. No more hacking around the div's and struggling with nested layout problems! Even better, just use Blueprint grid generator and get the page layout done instantly.

The other features of Blueprint are:

• Some default typography
• A typographic baseline
• A stylesheet for printing
• No bloat of any kind

Overall Blueprint is a very capable CSS framework that feels like a Swiss Army knife for web development with CSS. Don't be fooled by the depth of this framework with feature bloat.

2. 960 Grid
Despite the Grid in its name, 960 Grid is a feature rich CSS framework like Blueprint but with some improvements. However, they could do a little more work to explain why the anybody should use it instead of digging around for tutorials. The best introduction by far comes from the author himself here.

The author explains that he built 960 Grid based on "Grid" design ideas and he came about it after much thought. I have to admit, I don't quite grasp the concept of the Grid System. Perhaps this will be the yardstick for the framework itself -- how fast and easy it is for a total newbie like me to get something up and looking nice with 960 Grid.

Risking oversimplifying 960 Grid differences with Blueprint -- I open up the demo pages from 960 Grid and compared to Blueprint layout code -- it's actually easier to understand and digest 960 Grid layout code compared to Blueprint.

But I won't go into the rules to the layout because it would probably take another post. Suffice to say, it's easier understand 960 Grid and IMHO has much nicer rules to define a grid layout than Blueprint.

Other than that I find both Blueprint and 960 Grid do pretty much the same thing. However if I were to start a web project that requires complex layout, I would choose 960 Grid simply for the easier to understand Grid system.

3. Tripoli
Among the 3 CSS frameworks, Tripoli does the least. However like the Pareto Law, Tripoli's 20% covers 80% of the stuff that matters in daily web development.

I like the way Tripoli handles layout -- very clean and simple CSS. This is the kind of CSS framework where it's 2 AM and you need the layout done right, the style is nice and consistent across browsers, and the browser quirks are taken care of without any mistakes.

Tripoli is the no frills CSS framework that makes a nice and consistent site without too much reading into the docsweb page looks good effortlessly. From table, paragraphs, list to typography -- Tripoli is able to make a page clean, simple, and professional looking by including the CSS below:

@import url(tripoli.base.css);
@import url(plugins/tripoli.visual.css);
@import url(plugins/tripoli.type.css);

Unlike Blueprint and 960 Grid, Tripoli makes it really trivial to get a layout and styles that fits 80% of the typical use cases. Note that Tripoli is not a grid framework hence there is not concept of Grid's 12 columns, 16 columns or 24 columns layout. What Tripoli does is to provide over 30 layout styles for you to choose from. This may seems a bit backward compared to Blueprint or 960 Grid, but this is exactly the reason why many will love Tripoli for its straightfoward solution to web page layout. The demo for layout can be found here.

But don't take my word for it, Tripoli site listed down the below reasons for using it:

• Separate content from layout by putting typographic measurements into a class
• Enjoy a bullet-proof default rendering engine that's been carefully tested down to Internet Explorer 5
• Have full control over all CSS rules without disturbing browser defaults
• Improve readability and useability of your HTML content

Overall impression

The depth of Blueprint continue to impress me but I am cautious of the fact that it's no silver bullet when it comes to CSS design. 960 Grid System is indeed nice and as powerful as Blueprint, however like Blueprint it still needs a new user to sit down and figure out how it works. While Tripoli seems to be really easy I am wary that it may not fulfills future requirement.

The best design is still your own design. Framework like Blueprint, 960 Grid and Tripoli are just going to make it easier and helps you avoid the suprises. The best thing that these frameworks can provide is to make it easy to make your own template and get out of the way. It difficult to say which framework is the best -- the catch is, if you are developing on a complex layout page, none of these framework will make it any easier. The balance of pros and cons still -- like every framework -- depends largely on the requirement needs.


Additional referrences:
Theme candidate for 7 core : 960 Grid System
First Impressions of the Blueprint CSS Framework.
List of available CSS frameworks