in CSS, User Experience

CSS Framework Comparison


Designers do not like to be restricted so flexibility is an important aspect of a good framework. A grid system, by its very nature is restrictive but a good one should allow the designer as much creative leeway within a well-structured grid as possible.

The reason to voluntarily adhere to guidelines is that by so doing, some advantage is gained. A laundry list of the advantages of using a grid system are beyond the scope of this article, but a good summary is that they make the visual decision-making and execution process faster.

I have been a graphic designer for 20 years. I appreciate the sentiment among designers to have total creative freedom. That being said, I like grids and do not find that they stifle or limit my creativity in the least. As far as I am concerned, adhering to a content region that is 960 pixels wide or 950 pixels wide makes very little difference to me. I’m sure there are situations where 10 pixels can make all the difference in the world, but I can’t think of a situation where a 10 pixel difference in the page width would make or break my design.

Blueprint CSS and 960 Grid System are the more restrictive with pre-defined page widths of 950 pixels and 960 pixels respectively. I wouldn’t get too hung up on my use of the word “restrictive” however because both frameworks allow for up to 24 columns within the content area. I dont’ see the restrictions as being a hindrance by any stretch of the imagination.

YAML, yet again, takes a slightly different approach. The framework does not define the width of the content area of the web page at all. That decision is left up to the implementor. Instead, YAML subdivides the page using percentages: 20, 25, 33, 38, 40, 50, 62, 72, 75 and 80 percent. YAML uses the same percentage-based sizing for all units of measure including text, margins and padding.

The difference in flexibility seems to be a matter of degrees and very few of those. I would not consider any of the frameworks to be restrictive to my creativity.