Deco Grid System (preview 2)

This is a preview site for the Deco Grid System ( that powers the CSS part of the layout engine in the upcoming Plone 5.

There's no real web site here yet, but if you want something to play with, here is a preview zip with the necessary files:

I also gave a talk about Deco at the Plone Conference 2009 (video). Check back soon, or contact me if you have any feedback.

Alex Limi

Frequently Asked Questions

How is the Deco Grid System different from other grid frameworks like Blueprint,, and others?

We believe Deco Grids a lot simpler to understand and use, the naming convention and mental model is very very simple, and it arguably degrades better.

Which browsers does the Deco Grid System work in?

All browsers as far back as (and including!) Internet Explorer 6, without any wrapping, cropping, or other bad behaviour. It’s rock solid. It may work in older browsers, but we haven’t tested this.

Does it work with both fixed and fluid layouts?

Yes! As one of the few grid frameworks that do this, we don’t assume that you need a fixed-width layout.

Does the order of the cells inside a row matter?

No, you can put them in the order that makes the most sense for screen readers and mobile devices.

Did you invent this yourself?

The base technique used in Deco is something that is documented in the article Faux Absolute Positioning at A List Apart. Deco is just a system that applies that method to the notion of a CSS grid system.

How do you do vertical positioning? Deco only supplies horizontal positioning.

"Grid" CSS systems are usually about horizontal placement. Vertical place­ment is easy to do with the usual CSS margins, and depends on the vertical rhythm of your layout, so Deco does not supply this — on purpose.

What’s a comparable CSS grid system? Are there other systems that work like Deco GS does?

The closest one in philosophy and approach would be Emastic, which has a similar goal of supplying a layout that scales well and doesn’t rely on pixel placement. Emastic uses a less robust and more complicated positioning technique, though.

What’s with the \3a notation in the definitions for the width-1:2 etc. classes?

It’s a workaround notation since Internet Explorer 6 (and 7, possibly) doesn’t support the plain backslash escape for class names with colon in them. You can of course rename this if you think it’s ugly. We think it’s easier to think of three quarters as width-3:4 instead of width-3_4 or width-3-4.

Can I nest grids inside grids?

It works, but is generally not recom­mended, so you don’t ruin your layout by breaking the invisible grid too often. It works technically speaking, though.

What is the size of the Deco Grid system?

The baseline functionality is two classes (!), plus 16 convenience classes each for position and width. After using the YUI CSS compressor, it’s 714 or 907 bytes, for the 12- and 16-column versions, respectively.

Anything else I need to know?

It’s a good rule to not combine other CSS on the divs that govern the layout — at least not margins, padding & positioning. Create your own elements inside instead. This makes things reliable and predictable, and will save you some debugging pain.

Isn’t the use of dedicated divs for layout semantic noise? Aren’t you just reinventing tables using divs?

First of all, HTML (with some exceptions like the <address> tag) isn’t really semantic, it’s structural. You can of course argue this until the cows come home, but the main thing to keep in mind is that screen readers — which are the closest we get to semantics today — have no issue with using divs like this and compared to the workarounds other layouts need, we think you’ll find this approach simple and refreshing.

The whole point of not using tables for layout is that devices such as screen readers will interpret them as data tables, which they are not. They skip over any divs. This is why divs exist in the first place — a semantics-free tag to group things with.

Are there any good tools to make it easy to work with grids?

Why, yes! I recommend Gridfox as an in-browser tool to visualize grids. For designing with standard tools, the 960 Grid System has a lot of good templates available that you can use as stencils/layers to align your layout. These apply equally well to the Deco Grid System.

How does Deco grid code look like?

There's example files included in the zip you can download, but a simple example would be:

<div class="row">
  <div class ="cell position-0 width-4">This cell is four units wide</div>
  <div class ="cell position-4 width-12">This cell is twelve units wide</div>

This produces the layout below (background color added to illustrate):

This cell is four units wide
This cell is twelve units wide