CSS Grid Framework

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.)

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.)

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!

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 125x125 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.

Source: NetTuts