Skip to main content

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

Comments

Harry said…
Another one for your list: http://csswizardry.com/typogridphy/

It's specifically for grid layouts.

Harry
Anonymous said…
Congratulations you're a thief.

http://nettuts.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/

Feel proud?
Deven Goratela said…
If you carefully see the full article, I have already mentioned at the bottom of the article about its source. I have never told anywhere that this article is written by me.
Enjoy.
Deven Goratela said…
Sorry for delayed reply. You are correct that this article is copied and if you see the end of the article, I have already mentioned the "Source" from where this article has been copied. And I feel proud to put everything in one place. I have never claimed that this article is written by me.

Popular posts from this blog

What is MICR code in a cheque?

Want to know the full form of MICR? Want to know the MICR code of any / all bank branches in India? Read on. All of us have heard about the MICR code – it is present on all our cheque leaves. The MICR code is also essential for online money transfers. But what does MICR stand for? What is its full form? How is it useful? Let’s find out. Full form of MICR MICR is an abbreviation for “Magnetic Ink Character Recognition”. Ok, that is one mystery solved! MICR on your cheques The MICR code is a 9 digit code, which is printed at the bottom of a cheque. Here’s how it looks:

Composition of the MICR code A MICR code is unique to each bank branch. Thus, a MICR code can be used to uniquely identify any bank branch. It comprises of 3 parts: The first three digits represent the city (City Code). They are aligned with the PIN code we use for postal addresses in India.The next 3 digits represent the bank (Bank Code)The last 3 digits represent the branch (Branch Code)Example 1 Let’…

Blood group tells your nature

Blood group check out your traits!! BLOOD GROUP OBLOOD GROUP ABLOOD GROUP BBLOOD GROUP ABIn a nutshellCannot stand people who hide the truthPessimistic and too sensitiveCannot take orders easilyRomantic and sentimentalBasic BehaviorMake objectives clearCareful about decision-making

VERY INTERESTING AND INFORMATIVE THINGS

If you are right handed, you will tend to chew your food on your right side. If you are left handed, you will tend to chew your food on your left side If you stop getting thirsty, you need to drink more water. For when a human body is dehydrated, its thirst mechanism shuts off. Chewing gum while peeling onions will keep you from crying.  Your tongue is germ free only if it is pink. If it is white there is a thin film of bacteria on it. The Mercedes-Benz motto is 'Das Beste oder Nichts' meaning 'the best or nothing'. The Titanic was the first ship to use the SOS signal.  The pupil of the eye expands as much as 45 percent when a person looks at something pleasing. The average person who stops smoking requires one hour less sleep a night. Laughing lowers levels of stress hormones and strengthens the immune system. Six-year-olds laugh an average of 300 times a day. Adults only laugh 15 to 100 times a day. The roar that we hear when we pl…