Which CSS Grid Framework Should You Use for Web Design?

Ever wondered how all those slick “magazine” themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework – at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it’s possible to design complex web page layouts without a framework, it’s arguably an act in masochism. In this article you’ll get an overview of the current batch of Frameworks and which you should choose to use.

What is a CSS Grid Framework?

Layout grids have been used in print publishing long before the Web. They’re an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.

The same concept has been adapted for web page design for much the same reason, using CSS (Cascading StyleSheets) code to position HTML elements. In fact, many editorial sites run by large print media publishers do apply grids to achieve a look on their websites that’s similar to their print content.
Note that the vertical axis is not as well supported in CSS Grid systems, since a web page’s height is not as much of an issue as for a printed page. (Still, that’s a minor issue in web page design, unless you expect the same features as with Desktop Publishing – aka DTP – systems, which is difficult to support without a PostScript-like language for browsers to implement and support.)

960 CSS Grid System – one of the nicer designs for a framework website :-)

Why Use a CSS Grid Framework?

Not all designers support the use of using grid frameworks over tables, or even at all. But let’s face it; there are layouts you simply can’t do with just HTML tables without a great deal of painful effort – and lots of nesting that’s hard to decipher, should ever have to make changes.

Sure, if you use grids, you’ll have to add some necessary HTML tag markup to your content, thus increasing page file sizes. Also, this means that markup and style are not truly separated – a tenet which many web designers would like to adhere to. (Some people feel, rightly or wrongly, that naysayers of CSS frameworks are designers who are worried that the need for their services will decline. Though, with this logic, coders are in trouble, too, especially with the increase in cross-browser code libraries such as jQuery.)

The fact is, using a CSS grid framework means that your browser loads the CSS file(s) only once and keeps them cached “on the client side”. Plus, the additional HTML markup needed to apply the “invisible” CSS framework is rarely so significant that bandwidth issues for readers should be a concern. (Interestingly, most of the naysayers seem to be talking about Yahoo UI Grids, not so much Blueprint.)

In most of the examples I’ve been working with, and in any of the magazine themes using grids that I’ve inspected, we’re talking relatively small file size increases – especially compared to the blog platform code being used. A single large image will likely take up more space. With faster Internet connections, it really isn’t such a big deal.

Design & Aesthetic Benefits

Regardless, of whether you use CSS grids for prototyping or production systems, there are multiple aesthetic and design benefits:

1. Visual design cohesion between page elements.
2. Uniformity and consistency in HTML element placement, thereby reducing CSS coding errors.
3. Easier to apply the “rule of thirds” and the “golden section” to design, which results in a visually appealing layout to most human eyes.
4. Mostly eliminates the need to use nested HTML tables.
5. Nested sub-grids, for very complex designs that are relatively simple to produce.
6. Easier to apply images and text callouts to produce asymmetric layouts for visual texture.
7. Cross-browser support, so less screaming and hair pulling when you get around to testing for that bane of designers, IE. (Bill Gates must have felt so unloved as a child to have produced so much software that does what it wants, in defiance of standards that MSFT supposedly supports.)
8. Reduced effort for producing slicker web page layouts, compared to coding the necessary CSS from scratch.
9. Reduced future effort if you need to reposition elements or change rendering characteristics (typography, margins, etc.) for related elements en masse.
10. Usable with static pages and CMSes/ blog platforms.
11. Enables the popular use of creating “magazine” and premium themes for blog platforms. (WordPress seems to be the platform that CSS frameworks are most often used with, though any other platform that allows referencing a JavaScript source file should work just fine.)

YAML – “Yet Another Multicolumn Layout”

CSS Frameworks and Tools

Here’s a short list of some of the more popular frameworks:

1. Blueprint CSS Grid Framework.
   Robust despite only being in V0.7 (as of this writing), with lots of support from designers, and numerous tools for generating CSS code (beyond the standard 24-column, 950 px default framework). Supports the use of Blueprint “plugins”.
2. Yahoo! YUI Grids CSS, Grids Builder.
   This framework, which predates Blueprint, comes with six preset templates and four preset widths, and the layouts accomodate IAB ad unit guidelines. YUI Grids CSS is integrated with the rest of the Yahoo! UI (User Interface) Library.
3. YAML, YAML Builder.
   YAML (Yet Another Multicolumn Layout) has a fair bit of maturity, is built on web standards, and is supposedly easy to use. Though it doesn’t seem to have all that much use in the WordPress community. In fact, in the many hundreds of WP themes I’ve looked at for the last three years, I don’t recalling seeing it used once. That might be because you need a license to use it with some CMSes (Content Management Systems).
4. Grid Designer.
   This is a web tool for generating custom CSS grids. It uses its own CSS classes, so it could be said to be a framework, though it’s not as well support in the design community as some of the others.
5. 960 CSS Grid System. This system is based on a page width of 960 pixels, which is a number that’s divisible by many other numbers, making it “a highly flexible base number to work with.” However, 960 Grid only works with 12 or 16 columns.
6. CSS Boilerplate. Produced as a stripped down framework by one of the original Blueprint authors.
7. Sparkl. The documentations says you can create 1-, 2-, or 3-column pages, but the samples suggest you have more flexibility.

There are other CSS Grid frameworks you can find listed in Google Code, but of the three or four more that I looked at, most were incomplete in terms of documentation or even project files, so I’ve left them off. If you know of a framework not listed, please do let us know in the comments!

Comparison

Let me point out that this is not a comphrensive comparison of CSS frameworks. In fact, I’ve not used anything extensively other than Blueprint, though I’ve scanned docs for all of the frameworks listed above and played a bit with YAML and Grid Designer. Blueprint, YUI Grids, and YAML are arguably the "big three" in the CSS framework space, and 960 seems to be a solid fourth choice.

In choosing a framework, I’ve taken into account that I’m not a trained designer – beyond what I’ve studied on my own for years. I do dabble in design when necessary, albeit in a very minimalist form. In fact, because I spent quite a few years either publishing my own print magazine or working on others, I did a fair bit of (really bad) page layout using the principles of grid design working with Adobe PageMaker. So I find it very natural to work with CSS Grids for web design. It seems that given the number of WordPress themes out there – see the list at end of this article – that are based on a grid framework (mostly Blueprint), designers feel pretty comfortable with grids, too.

Nevertheless, with time always limited, I need something easy to learn and use, yet robust. I’ve found that Blueprint CSS Grid suits my needs. It integrates nicely with various JavaScript libraries – including jQuery, which can result in some damn sexy web interfaces. It renders well (though not 100% perfectly) in most browsers – though you need to test for that big thorn in web designers’ sides, IE browser.

Based on my loose research of CSS Grids this last year, Blueprint seems to be the most robust framework, the least restrictive, the most supported – in terms of how widespread its use is – the smallest in size, and the framework with the most tools. In fact, the beauty of Blueprint is that you can very quickly produce the CSS code for a custom framework using tools like Kematzy’s Blueprint Grid CSS Generator. Though you can do this with Grid Designer, a quick comparision would suggest it’s not as robust as Blueprint.

On the flipside, scanning and browsing the documentation for Yahoo! UI Grids CSS framework leads me to believe that if you just want to do some simple web page layout and want a handful of presets to play with, you might want to look into this option. However, I feel it’s a bit too restrictive for my liking. (You might want to read Foo Hack’s Blueprint CSS Framework vs YUI Grids.)

Ultimately, when it comes to learning something new online – such as a programming language and code library/ framework – I always apply the "shoulders of giants rule". I first shortlist the options that seem suited to what I need, then select based on how much it has been written about. Might not seem fair to newer options, but the process isn’t that much more arbitrary than how many people pick web applications to use. There’s too much out there to keep track, and having an existing supportive community makes a big difference.

Blueprint – My choice

Why I Picked Blueprint CSS

Blueprint CSS Grid Framework is what I’ll be using in all of my tutorials at NETTUTS (when it’s relevant). Instead of copying the feature list from the docs at Google Code, let me focus on why I personally picked it. Some of these points overlap with what I’ve said above:

1. Relatively small file sizes. Has compressed versions for production use, for further size decreases.
2. Print + screen stylesheets.
3. Simple to integrate and use. (Though IE browsers are problematic, depending on which version of Blueprint is being used.)
4. Easy to remember CSS classes and ids that are unlikely to clash with any that you’re already using.
5. Lots of support tools, especially for generating custom grids.
6. Lots of articles/ tutorials about Blueprint, with lots of positive vibe.
7. Lots of use of Blueprint by WordPress theme designers.

As mentioned above, I do run into IE problems – but then doesn’t everyone? Several WP themes using Blueprint have resolved IE browser issues, so I’m extrapolating in my belief that they can mostly be resolved.
Blueprint, as of this writing, does not support liquid layouts – something I’m not a huge fan of anyway. However, such support is apparently coming, in case you lean that way.

Sample Grid-based Design Process

Well this is a matter of choice, isn’t it? Some CSS Grids come with a grid.png or even a .psd file that you can use in transparent mode in Photoshop, Fireworks, GIMP, etc., while you’re laying down your design elements. I’m a bit more old school and always design my layouts by starting on paper:

1. Block off a bounding rectangle representing an entire web page. (Do this for each page you’re designing.)
2. Partition the rectangle into smaller rectangles representing primary areas: header, footer, sidebar, content area, etc.
3. Further partition primary areas and pencil in “atomic” design component (site, logo, rss button, recent posts, recent comments, search box, sample posts, post thumbnails, etc.)
4. Translate that final sketch into skeleton HTML, using real text or lorem ipsum text. The HTML markup will include the necessary CSS Grid class and id values to support the layout I need.
5. Create banners/ buttons in graphics software.
6. Test HTML mockup in as many browsers and versions as possible. (You might need to employ a few friends if you only have one computer.)
7. Convert text into CMS/platform code. (E.g., convert text blocks into the necessary WP function calls and PHP code.)

You’ll notice that nowhere in that process is the use of graphics software for layout mockup. That’s because I am not a designer and use a very minimalist approach for what I design (for myself only). But if you do plan to use, say, Fireworks for your mockup, you would do so between steps #3 and #4.

Summary

I’ve tried to be comprehensive in my search for CSS Grid Frameworks, scanning over 120 articles for leads. However, it’s possible I’ve missed some options, so feel free to offer others.
Whichever CSS framework you decide to use, do so because it best suits your general needs. If the pages/ templates you design will have advertising, consider what type of ads. Early on, when I picked themes for my sites, I chose for AdSense ads (which are IAB-compliant). More recently, I’ve been picking/ designing for blocks of 125×125 ads, which I highly prefer over most AdSense blocks.
If you’re interested, there is a W3C draft specification entitled CSS Grid Positioning Module Level 3 (written by two Microsoft employees) that discusses integrating grid-based layout into CSS. The features discussed in this draft could be in IE 8.

References

Related Tools

1. Blueprint CSS AIR Grid Tool.
2. Blueprint CSS Quick Reference (PDF, 1 page).
3. CSS Grid Calculator.
4. Diagnostic CSS.
5. Reset CSS.

Some Articles or Sites About CSS Grid Frameworks

Here are links to a few of the many great articles out there about CSS Grids.

1. 456 Berea Street – Grids, Tables, CSS.
2. A List Apart – Thinking Outside the Grid, Setting Type on the Web to a Baseline Grid.
3. Olav Bjørkøy – Launch: Blueprint, a CSS Framework.
4. Mark Boulton’s 5-part series, Five Simple Steps to Designing Grid Systems.
5. Jeff Croft – What’s Not to Love About CSS Frameworks?
6. CSS Demos – Hands on With Blueprint, a CSS Framework.
7. CSS Tricks – GridControl.
8. Design by Grid.
9. Cameron Moll – Gridding the 960.
10. Smashing Magazine – Design With Grid-Based Approach, Six Creative Column Techniques.
11. Stone Mind – First Impressions of the Blueprint CSS Framework.
12. Subtraction – Oh Yeeaahh! (or How to Use Grid in a Layout)
13. Tutorial Blog.
14. Vandelay Design – 65 Resources for Grid-Based Design.
15. W3 – CSS and Grid Layout.
16. Web Designer Wall – Grid and Column Designs.

Revolution – The Premium Theme

46 Free or Paid Specialty Themes

If you feel that you’re not ready to tackle grids and theme design yet but need a grid-based theme, here’s probably one of the most comprehensive lists you’ll find. (There are actually more than 46, if you include variations.) It includes magazine, magazine-like, gallery, specialty and various premium themes that use either explicit or implicit CSS grids. (It’s possible one or two do not use grids, though at first glance, they appear to.)
A few of these themes are free or have a free version. Most are for the WordPress platform. This list only includes themes available to the general public, not necessarily custom grid themes used by various bloggers. (See select links in the previous list, including Web Designer Wall and Smashing Magazine for snapshots of such sites. Also see Khoi Vinh’s Subtraction, as an example of a visually impactful grid-based site.)
Warning: Some of these themes might not work in WP 2.5x+

1. Artfull Magazine. (Make sure you use the theme switcher on this page – bottom right corner.)
2. Block Magazine.
3. BranfordMagazine.
4. Chimera Pro.
5. Content Press.
6. Cornerstone.
7. CSS Gallery.
8. Deadwood, Deadwood Lite.
9. Fjords09.
10. Forte. (Note: Currently showing a suspended page)
11. Fresh News.
12. Futurosity.
13. Grid Focus.
14. Gridline – Lite, News, Magazine.
15. Gridlock.
16. IndoMagz.
17. Jello Wala Mello.
18. Live Wire series.
19. Magazine News.
20. Massive News.
21. Mimbo, Mimbo Pro.
22. Monochrome – Gallery, Author, Pro, Lite.
23. Nautica.
24. News – Quommunication.
25. NewsPixel.
26. NewsPress.
27. Options.
28. Overstand.
29. Premium News Theme – The Gazette Edition.
30. Rebel Magazine.
31. Revolution and several variations.
32. Showcase Gallery.
33. Simplicity.
34. Structure.
35. Tauren Pro.
36. TMA – The Morning After.
37. Trevilian Way.
38. Victoria.
39. Visionary.
40. Visualization.
41. WordPress Magazine (Gabfire).
42. WP-Magazine Theme.
43. WP-Polaroid.
44. Ygo CMS.
45. Your Revolution.
46. Zeke.

The above list of magazine themes is compiled from the following references, as well as from searching Google.com.

1. Bootstrapper.
2. Clever Sage.
3. Graph Paper Press.
4. Michael Doig.
5. The Blog Entrepreneur.
6. Theme Playground.
7. Vandelay Design.
8. Visual Blast.
9. Web Hosting Show.
10. Squidoo Magazine Themes lens.