CSS Framework Comparison
Oct
13
There are several different CSS frameworks available that all employ a very useful grid system. This allows a person to make column based layouts that are evenly spaced and very clean looking. While some prefer not to use CSS frameworks, none can deny their ability to greatly increase production time on lengthy projects. Here we will be comparing a few different CSS frameworks to determine which may be the best for you.
The ones we will be covering are the 960 Grid System, Blueprint CSS, and Baseline CSS, and we will be comparing by building the same simple website layout with each one and determining each frameworks’ individual pros and cons.
960 Grid System
Link: http://960.gs/
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
The 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.
The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.
The 960 grid system uses a total page width of 960 pixels, allowing you to use the rule of thirds in your designs. It also offers the ability to use either a 12 column or 16 column grid. This is good for flexibility, but it makes reading the source code and learning the syntax a little bit different, but not too much more difficult.
It comes with a nice typography style sheet, along with a good reset as well. As with most grid frameworks, the syntax is fairly simple, and made to be user friendly. In the 12 column grid, you simply specify your wrapper to be have a class of container_12, and then specify the width of each element by columns, such as grid_6, grid_8, or grid_12 to stretch the entire width of the container. The same rules apply to the 16 column grid.
Basic HTML Layout Using Grid System
Basic Page Structure
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Further Reading
Check out NETTUTS post on Prototyping with the Grid 960 CSS Framework.
Blueprint CSS
Link: http://www.blueprintcss.org/
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
The Blueprint CSS framework is also very effective in building quick layouts that are nicely aligned and evenly spaced. It uses a grid of 24 columns, 950px total so each of 30 pixels with 10 pixel margins between columns. This allows for a little bit more flexibility as to how big or small your columns are in comparison to the 960.gs, minus the 960’s ability to go between 12 column and 16 column. Overall, the grid works great, and is personally my favored grid out of most CSS frameworks.
Blueprint is nice overall, it has some features like the colborder class which adds a divider between columns. For the most part, Blueprint is just as quick at prototyping layouts as 960 is, but each has their own ups and downs.
Basic HTML Layout Using Grid System
Basic Page Structure
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Further Reading
NETTuts has great coverage of the Blueprint CSS framework in A Closer Look At The Blueprint CSS Framework.
Baseline CSS
Link: http://baselinecss.com/
Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.
Baseline CSS is great for a couple different reasons. First it is the only framework fully compliant with HTML5 so far, and second because of it’s typographic properties that allow everything to align to the baseline of text (allows for great looking typography). Other than these two things though, I feel that the baseline system far lacks in ability compared to our other two frameworks. The grid is a little limited in only using a maximum of 8 columns (as opposed to 12, 16, or 24).
Basic HTML Layout Using Grid System
Basic Page Structure
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Further Reading
Most of the information you will need about Baseline can be found on their home website.
Overall Summary
We can see here that each of these frameworks is wonderful in itself, and each has it’s own pros and cons. Personally if I had to choose one to use most often it would probably be blueprint css, as it seems the most flexible to me, and also allows for the most customizable column layouts with 24 columns to spread across. Though for typography and great alignment, Baseline may be the way to go. Overall, it comes down to preference, so give each one a try and decide for yourself!
This entry was posted on Tuesday, October 13th, 2009 at 1:30 am and is filed under Web 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.
7 Responses to “CSS Framework Comparison”
Very nice comparison of some popular frameworks. Haven’t tried out Baseline yet, but hope to soon. Thanks for the helpful info, Seth.
I’ve been using Bluetrip (combo of 960/Blueprint/Tripoli) as a base for my last two sites. But I find the sheer quantity of .push and .pull classes confusing and overkill for me.
On my current project, I started with Bluetrip, but wanted my sidebar and main content areas text baselines to line up (frustrated print designer!) and I found Baseline. Since Baseline has HTML5 and CSS3 support, I decided to try it. This site is HTML5, CSS3 and using Typekit for fonts.
I haven’t gotten to the baseline alignments yet, but I like the relative simplicity of Baseline. However, I’m not too keen on not having the option of the “rule of thirds” for columns. (It’s set up on fourths.) And since it’s a bit wider than my original 960 layout, I’m designing in the CSS.
Who knows, by the end of the week, I might have a new hybrid worked out–if I fudge the math!
Thank you very much! I never heard of Baseline before, so I have to check it out.
Thank you for including Baseline in your choice of CSS framework. As you might already know, Baseline is very young and I’m still looking at the comments people have, most of them are about the lack of a flexible grid. I did Baseline with a strong emphasis on typography and I measured the column width for optimal line length, that’s why I ended up with a 990px width and a 4 columns layout.
However, since people seem to want more columns, I already started to remove the width as much as possible from the base style so that it only lives in the grid.css, that way I will be able to make available a more flexible grid. Now I only have to figure out if a 12 columns grid would be optimal and should I stay at 990px for the overall size.
Thanks again
Absolutely! Baseline is a great framework, as are all the ones I’ve covered in the article, and I greatly respect your focus on typography in your framework, it does add great visuals to the overall site.
Also good to hear about the upcoming changes, I’m definitely looking forward to them! Maybe I can cover the update in a new post
. I’ll keep checking the baseline site for updates. Thanks for commenting!
[...] CSS framework comparison [...]
Very nice article. Really helped my decision.