This is a preview site for the Deco Grid System (deco.gs) 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: deco-preview2.zip
I also gave a talk about Deco at the Plone Conference 2009 (video). Check back soon, or contact me if you have any feedback.
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.
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.
Yes! As one of the few grid frameworks that do this, we don’t assume that you need a fixed-width layout.
No, you can put them in the order that makes the most sense for screen readers and mobile devices.
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.
"Grid" CSS systems are usually about horizontal placement. Vertical placement 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.
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.
\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.
It works, but is generally not recommended, so you don’t ruin your layout by breaking the invisible grid too often. It works technically speaking, though.
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.
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.
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.
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.
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> </div>
This produces the layout below (background color added to illustrate):