in CSS, User Experience

CSS Framework Comparison


Deadlines are a fact of life. A developer who is considering a tool for a project may be under tight time constraints. Ease of installation is key and if a tool is more difficult than is necessary to install, the developer may opt for a different tool that is easier to set up and get moving with.

The installation of each tool was exactly what I expected. There were a couple of HTML tags to add to the page markup to include the CSS files for the framework. Two of the three frameworks, YAML and Blueprint CSS have conditional comments to load IE-specific rules. 960 Grid System does not use a separate file for IE-specific rules. This is their credit since too many HTTP requests can impact page performance. That being said, using conditional comments to load IE rules is a common and acceptable practice. I certainly would not decide against YAML, Blueprint CSS or any other tool based on one extra HTTP request. And truth be told, this is very easy for the developer to correct as part of their web page optimization.

A Problem With YAML and its Resolution

The only installation problem I encountered was with YAML. YAML was also the first framework that I reviewed and I have to admit that it made a bad first impression. I almost gave up on the framework but decided to stick it out because I saw this as an opportunity to do a true evaluation.

YAML is included by a single, core file: central_draft.css. This file then includes all the other necessary files. The trouble was that the directory structure did not match the paths indicated in the includes in central_draft.css. It was easy enough to change the paths to match the directory structure but this is something that YAML’s author should fix ASAP.

I want to make this really clear: I am glad I decided to push through the installation problems with YAML and I advise you to do the same. It is a very well-written framework and has some real advantages over the other ones I reviewed. I will speak more on that in the Conclusion.

Each framework scores very well for ease of installation. There is very little difference between the three in how they are installed. The best part is that there is a single LINK tag required to include the core of each framework in your web page.