From 70e9326a2be3f85b5fc19222d0298e9f1d6b1d5e Mon Sep 17 00:00:00 2001 From: Alexander Limi Date: Fri, 22 Jul 2011 02:48:25 -0700 Subject: [PATCH] Adding deco.gs --- FAQ.html | 195 +++++++++++++++++++++++++++++ decogrids-12.css | 76 ++++++++++++ decogrids-16.css | 90 ++++++++++++++ dev-notes.txt | 10 ++ example-12.html | 151 +++++++++++++++++++++++ example-16.html | 196 +++++++++++++++++++++++++++++ gapless/README.txt | 7 ++ gapless/decogrids-12-gapless.css | 71 +++++++++++ gapless/decogrids-16-gapless.css | 80 ++++++++++++ gapless/decogrids-9-gapless.css | 62 ++++++++++ gapless/example-12-gapless.html | 190 ++++++++++++++++++++++++++++ gapless/example-16-gapless.html | 204 +++++++++++++++++++++++++++++++ gapless/example-9-gapless.html | 132 ++++++++++++++++++++ images/12-col.png | Bin 0 -> 87 bytes images/16-col.png | Bin 0 -> 87 bytes 15 files changed, 1464 insertions(+) create mode 100644 FAQ.html create mode 100644 decogrids-12.css create mode 100644 decogrids-16.css create mode 100644 dev-notes.txt create mode 100644 example-12.html create mode 100644 example-16.html create mode 100644 gapless/README.txt create mode 100644 gapless/decogrids-12-gapless.css create mode 100644 gapless/decogrids-16-gapless.css create mode 100644 gapless/decogrids-9-gapless.css create mode 100644 gapless/example-12-gapless.html create mode 100644 gapless/example-16-gapless.html create mode 100644 gapless/example-9-gapless.html create mode 100644 images/12-col.png create mode 100644 images/16-col.png diff --git a/FAQ.html b/FAQ.html new file mode 100644 index 0000000..d29a8af --- /dev/null +++ b/FAQ.html @@ -0,0 +1,195 @@ + + + + + Deco Grid System + + + + + + + +
+
+

Deco Grid System (preview)

+ +

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-preview1.zip

+ +

For now, this site just serves as a location to get the files related to the Plone Conference 2009 presentation, as well as the simple demo below. Check back soon, or contact me if you have any feedback.

+ +

— Alexander Limi

+
+
+ +
+
+

+ Frequently Asked Questions +

+
+
+
+
+

+ How is the Deco Grid System different from other grid frameworks like Blueprint, 960.gs, 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. +

+
    +
  • It doesn’t ship with anything outside of the grid system — font choices, form builders, other unrelated CSS. It’s built to drop right into your existing CSS code with a minimum amount of fuss. +
    • +
  • It’s really well-suited for automated layout algorithms for CMSes and other web apps. +
    • +
  • It doesn’t assume that you always work in pixel-based layouts, like a lot of other frameworks do. +
    • +
  • It doesn’t need any workarounds/hacks to work reliably in all browsers. +
    • +
  • It’s smaller than the other grid frameworks. A lot smaller. Less than 1K — vs. 11K (Blueprint), 5.4K (960 Grids), etc. We realize that this size comparison isn’t entirely fair, since they include lots of non-grid stuff, but even when you strip their files of all that, we’re still a lot more lightweight. +
    • +
+
+
+

+ 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? +

+

+ Absolutely! +

+

+ 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?

+

+ A simple example would be: +

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

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

+
+
+
+
+ This cell is four units wide +
+
+ This cell is twelve units wide +
+
+ + diff --git a/decogrids-12.css b/decogrids-12.css new file mode 100644 index 0000000..094543f --- /dev/null +++ b/decogrids-12.css @@ -0,0 +1,76 @@ +/* The 12-column Deco Grid System. + * Available in multiple variants, see http://deco.gs + * + * Cells are 6.25% (=60px) + * Margins are 1.04166% (=10px) (times two, left and right) + * Total is 8.33333%. (=80px) (which makes 12 columns) + * + * If page width is fixed to 960px width: + * Cell will be equivalent to 60px, left/right margin will be 10px. + * + */ + +div.row { + float: left; + width: 100%; + display: block; + position: relative; +} +div.cell { + position: relative; + float: left; + left: 100%; +} + +/* Width classes. + For a given cell width, the calculation is: + width = (total cell width) * n - (margin*2) + In this case: (8.333*n - 2.08333)% */ +div.width-1 { width: 6.2500% } +div.width-2 { width: 14.583% } +div.width-3 { width: 22.916% } +div.width-4 { width: 31.250% } +div.width-5 { width: 39.583% } +div.width-6 { width: 47.916% } +div.width-7 { width: 56.249% } +div.width-8 { width: 64.583% } +div.width-9 { width: 72.916% } +div.width-10 { width: 81.249% } +div.width-11 { width: 89.583% } +div.width-12 { width: 97.916% } + +/* Positioning classes, these are subtracting from a rightmost + position, which is why they seem the wrong way around */ +/* For a given position, the calculation is: + -100 + (total cell width * n) + In this case: margin-left: -100 + (8.333*n) */ +div.position-0 { margin-left: -100% } +div.position-1 { margin-left: -91.667% } +div.position-2 { margin-left: -83.334% } +div.position-3 { margin-left: -75.001% } +div.position-4 { margin-left: -66.668% } +div.position-5 { margin-left: -58.335% } +div.position-6 { margin-left: -50.002% } +div.position-7 { margin-left: -41.669% } +div.position-8 { margin-left: -33.336% } +div.position-9 { margin-left: -25.003% } +div.position-10 { margin-left: -16.67% } +div.position-11 { margin-left: -8.337% } + +/* End of the core Deco Grid System */ + +/* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. + Not strictly necessary. */ +div.width-1\3a 2 { width: 47.916%; } /* .width-1:2 */ +div.width-1\3a 4 { width: 22.916%; } /* .width-1:4 */ +div.width-3\3a 4 { width: 72.916%; } /* .width-3:4 */ +div.position-1\3a 4 {margin-left: -75.001%;} /* .position-1:4 */ +div.position-1\3a 2 {margin-left: -50.002%;} /* .position-1:2 */ +div.position-3\3a 4 {margin-left: -25.003%;} /* .position-3:4 */ + + +/* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. */ +div.width-1\3a 3 { width: 31.250%; } /* .width-1:3 */ +div.width-2\3a 3 { width: 64.583%; } /* .width-2:3 */ +div.position-1\3a 3 {margin-left: -66.668%;} /* .position-1:3 */ +div.position-2\3a 3 {margin-left: -33.336%;} /* .position-2:3 */ diff --git a/decogrids-16.css b/decogrids-16.css new file mode 100644 index 0000000..8ee95eb --- /dev/null +++ b/decogrids-16.css @@ -0,0 +1,90 @@ +/* The 16-column Deco Grid System. + * Available in multiple variants, see http://deco.gs + * + * Cells are 4.16667% (=40px) + * Column margins are 2.08333% (=20px) + * Total is 6.25%. (=80px) (which makes 12 columns) + * + * If page width is fixed to 960px width: + * Cell will be equivalent to 40px, left/right margin will be 10px. + */ + + +div.row { + float: left; + width: 100%; + display: block; + position: relative; +} +div.cell { + position: relative; + float: left; + left: 100%; +} + +/* Width classes. + For a given cell width, the calculation is: + width = (total cell width) * n - (column margins) + In this case: (6.25*n - 2.08333)% */ +div.width-1 { width: 4.16667% } +div.width-2 { width: 10.41667% } +div.width-3 { width: 16.66667% } +div.width-4 { width: 22.91667% } +div.width-5 { width: 29.16667% } +div.width-6 { width: 35.41667% } +div.width-7 { width: 41.66667% } +div.width-8 { width: 47.91667% } +div.width-9 { width: 54.16667% } +div.width-10 { width: 60.41667% } +div.width-11 { width: 66.66667% } +div.width-12 { width: 72.91667% } +div.width-13 { width: 79.16667% } +div.width-14 { width: 85.41667% } +div.width-15 { width: 91.66667% } +div.width-16 { width: 97.91667% } + +/* Positioning classes, these are subtracting from a rightmost + position, which is why they seem the wrong way around */ +/* For a given position, the calculation is: + -100 + (total cell width * n) + In this case: margin-left: -100 + (6.25*n) */ + +div.position-0 { margin-left: -100% } +div.position-1 { margin-left: -93.75% } +div.position-2 { margin-left: -87.5% } +div.position-3 { margin-left: -81.25% } +div.position-4 { margin-left: -75% } +div.position-5 { margin-left: -68.75% } +div.position-6 { margin-left: -62.5% } +div.position-7 { margin-left: -56.25% } +div.position-8 { margin-left: -50% } +div.position-9 { margin-left: -43.75% } +div.position-10 { margin-left: -37.5% } +div.position-11 { margin-left: -31.25% } +div.position-12 { margin-left: -25% } +div.position-13 { margin-left: -18.75% } +div.position-14 { margin-left: -12.5% } +div.position-15 { margin-left: -6.25% } + +/* End of the core Deco Grid System */ + +/* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. + Not strictly necessary. */ +div.width-1\3a 2 { width: 47.91667% } /* .width-1:2 */ +div.width-1\3a 4 { width: 22.91667% } /* .width-1:4 */ +div.width-3\3a 4 { width: 72.91667% } /* .width-3:4 */ +div.position-1\3a 4 {margin-left: -75% } /* .position-1:4 */ +div.position-1\3a 2 {margin-left: -50% } /* .position-1:2 */ +div.position-3\3a 4 {margin-left: -25% } /* .position-3:4 */ + + +/* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +These do not strictly conform to the grid, but are useful for certain layouts. */ +div.width-1\3a 3 { width: 31.25%; } /* .width-1:3 */ +div.width-2\3a 3 { width: 64.5%; } /* .width-2:3 */ +div.position-1\3a 3 {margin-left: -66.7%;} /* .position-1:3 */ +div.position-2\3a 3 {margin-left: -33.4%;} /* .position-2:3 */ + +/* Full/leftmost are useful synonyms for full width and leftmost positioning */ +div.position-leftmost { margin-left: -100% } +div.width-full { width: 97.91667% } diff --git a/dev-notes.txt b/dev-notes.txt new file mode 100644 index 0000000..b0c62d2 --- /dev/null +++ b/dev-notes.txt @@ -0,0 +1,10 @@ +http://www.designinfluences.com/fluid960gs/16/ + +For typography, possibly use http://www.blueprintcss.org/tests/parts/elements.html +as test for whether vertical rhythm is correct. + +Mention Faux Absolute Postioning article + +Mention why this won't break browsers that have rounding error with percentages/ems. +http://ejohn.org/blog/sub-pixel-problems-in-css/ + diff --git a/example-12.html b/example-12.html new file mode 100644 index 0000000..a3b8f55 --- /dev/null +++ b/example-12.html @@ -0,0 +1,151 @@ + + + + + Deco Grid System + + + + + + + + +
+ +

Basic 12-column grid demo, showing some common combinations. +Lock page width to 960px for a good fixed version, + where each cell will be 60px with 20px column margins.

+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
09
+
10
+
11
+
12
+
+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
+ +
+
01
+
02
+
03
+
04
+
+ + +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
03
+
+ + +
+
01
+
02
+
+ + +
+
01
+
02
+
+ +
+
01
+
+ +

Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. +Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
+ +
+
01
+
02
+
03
+
04
+
+ +
+
01
+
02
+
04
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

Convenience classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

Created by Alexander Limi. Placed in the Public Domain.

+ +
+ + \ No newline at end of file diff --git a/example-16.html b/example-16.html new file mode 100644 index 0000000..5dfb184 --- /dev/null +++ b/example-16.html @@ -0,0 +1,196 @@ + + + + + Deco Grid System + + + + + + + + +
+ +

+ Basic 16-column grid demo, showing some common combinations. + Lock page width to 960px for a good fixed version, + where each cell will be 40px with 20px column margins. +

+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
09
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
+ +
+
01
+
02
+
03
+
04
+
05
+
+ + +
+
01
+
02
+
03
+
04
+
+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
+ +

Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. +Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
+ +
+
01
+
02
+
03
+
04
+
+ +
+
01
+
02
+
04
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. + These do not strictly conform to the grid, but are + useful for certain layouts.

+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

Created by Alexander Limi. Placed in the Public Domain.

+ +
+ + \ No newline at end of file diff --git a/gapless/README.txt b/gapless/README.txt new file mode 100644 index 0000000..a4f2428 --- /dev/null +++ b/gapless/README.txt @@ -0,0 +1,7 @@ +This is an experimental variant with no margins, contributed by Denis Mishunov. + +It is useful when you have layouts where the elements are positioned right +next to each other with no whitespace. + +Gapless grids might have about 1px gaps sometimes due to rounding of percentage +values for the widths. diff --git a/gapless/decogrids-12-gapless.css b/gapless/decogrids-12-gapless.css new file mode 100644 index 0000000..a7cd49b --- /dev/null +++ b/gapless/decogrids-12-gapless.css @@ -0,0 +1,71 @@ +/* The 12-column Deco Grid System. + * For the 16-column variant, see decogrids-16.css. + * + * Cells are 8.33% width. No margins + * + * If page width is fixed to 960px width: + * Cell will be roughly equivalent to 80px. No margins. + */ + +.row { + float: left; + width: 100%; + display: block; + position: relative; +} +.cell { + position: relative; + float: left; + left: 100%; +} + +/* Width classes. */ +.width-1 { width: 8.333% } +.width-2 { width: 16.666% } +.width-3 { width: 25% } +.width-4 { width: 33.333% } +.width-5 { width: 41.666% } +.width-6 { width: 50% } +.width-7 { width: 58.333% } +.width-8 { width: 66.666% } +.width-9 { width: 75% } +.width-10 { width: 83.333% } +.width-11 { width: 91.666% } +.width-12 { width: 100% } + + +/* Positioning classes, these are subtracting from a rightmost + position, which is why they seem the wrong way around */ +/* For a given position, the calculation is margin-left: -100 + (8.33*n) */ +.position-0 { margin-left: -100% } +.position-1 { margin-left: -91.666% } +.position-2 { margin-left: -83.333% } +.position-3 { margin-left: -75% } +.position-4 { margin-left: -66.666% } +.position-5 { margin-left: -58.333% } +.position-6 { margin-left: -50% } +.position-7 { margin-left: -41.666% } +.position-8 { margin-left: -33.333% } +.position-9 { margin-left: -25% } +.position-10 { margin-left: -16.666% } +.position-11 { margin-left: -8.333% } + + +/* End of the core Deco Grid System */ + +/* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. + Not strictly necessary. */ +.width-1\3a 2 { width: 50%; } /* .width-1:2 */ +.width-1\3a 4 { width: 25%; } /* .width-1:4 */ +.width-3\3a 4 { width: 75%; } /* .width-3:4 */ +.position-1\3a 4 {margin-left: -75%;} /* .position-1:4 */ +.position-1\3a 2 {margin-left: -50%;} /* .position-1:2 */ +.position-3\3a 4 {margin-left: -25%;} /* .position-3:4 */ + + +/* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +These do not strictly conform to the grid, but are useful for certain layouts. */ +.width-1\3a 3 { width: 33.33%; } /* .width-1:3 */ +.width-2\3a 3 { width: 66.66%; } /* .width-2:3 */ +.position-1\3a 3 {margin-left: -66.66%;} /* .position-1:3 */ +.position-2\3a 3 {margin-left: -33.33%;} /* .position-2:3 */ diff --git a/gapless/decogrids-16-gapless.css b/gapless/decogrids-16-gapless.css new file mode 100644 index 0000000..3aa396d --- /dev/null +++ b/gapless/decogrids-16-gapless.css @@ -0,0 +1,80 @@ +/* The gapless 16-column Deco Grid System. + * For the 12-column variant, see decogrids-12-gapless.css. + * + * Cells are 6.25% width. No margins + * + * If page width is fixed to 960px width: + * Cell will be equivalent to 60px. No margins + */ + + + +.row { + float: left; + width: 100%; + display: block; + position: relative; +} +.cell { + position: relative; + float: left; + left: 100%; +} + +/* Width classes. */ +.width-1 { width: 6.25% } +.width-2 { width: 12.5% } +.width-3 { width: 18.75% } +.width-4 { width: 25% } +.width-5 { width: 31.25% } +.width-6 { width: 37.5% } +.width-7 { width: 43.75% } +.width-8 { width: 50% } +.width-9 { width: 56.25% } +.width-10 { width: 62.5% } +.width-11 { width: 68.75% } +.width-12 { width: 75% } +.width-13 { width: 81.25% } +.width-14 { width: 87.5% } +.width-15 { width: 93.75% } +.width-16 { width: 100% } + + +/* Positioning classes, these are subtracting from a rightmost + position, which is why they seem the wrong way around */ +/* For a given position, the calculation is margin-left: -100 + (6.25*n) */ +.position-0 { margin-left: -100% } +.position-1 { margin-left: -93.75% } +.position-2 { margin-left: -87.5% } +.position-3 { margin-left: -81.25% } +.position-4 { margin-left: -75% } +.position-5 { margin-left: -68.75% } +.position-6 { margin-left: -62.5% } +.position-7 { margin-left: -56.25% } +.position-8 { margin-left: -50% } +.position-9 { margin-left: -43.75% } +.position-10 { margin-left: -37.5% } +.position-11 { margin-left: -31.25% } +.position-12 { margin-left: -25% } +.position-13 { margin-left: -18.75% } +.position-14 { margin-left: -12.5% } +.position-15 { margin-left: -6.25% } + +/* End of the core Deco Grid System */ + +/* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. + Not strictly necessary. */ +.width-1\3a 2 { width: 50%; } /* .width-1:2 */ +.width-1\3a 4 { width: 25%; } /* .width-1:4 */ +.width-3\3a 4 { width: 75%; } /* .width-3:4 */ +.position-1\3a 4 {margin-left: -75%;} /* .position-1:4 */ +.position-1\3a 2 {margin-left: -50%;} /* .position-1:2 */ +.position-3\3a 4 {margin-left: -25%;} /* .position-3:4 */ + + +/* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +These do not strictly conform to the grid, but are useful for certain layouts. */ +.width-1\3a 3 { width: 33.33%; } /* .width-1:3 */ +.width-2\3a 3 { width: 66.66%; } /* .width-2:3 */ +.position-1\3a 3 {margin-left: -66.66%;} /* .position-1:3 */ +.position-2\3a 3 {margin-left: -33.33%;} /* .position-2:3 */ diff --git a/gapless/decogrids-9-gapless.css b/gapless/decogrids-9-gapless.css new file mode 100644 index 0000000..4b72702 --- /dev/null +++ b/gapless/decogrids-9-gapless.css @@ -0,0 +1,62 @@ +/* The 9-column Deco Grid System. + * + * Cells are 11.11% width. No margins + * + */ + +.row { + float: left; + width: 100%; + display: block; + position: relative; +} +.cell { + position: relative; + float: left; + left: 100%; +} + +/* Width classes. + For a given cell width, the calculation is: width: (11.11*n)% */ +.width-1 { width: 11.11% } +.width-2 { width: 22.22% } +.width-3 { width: 33.33% } +.width-4 { width: 44.44% } +.width-5 { width: 55.55% } +.width-6 { width: 66.66% } +.width-7 { width: 77.77% } +.width-8 { width: 88.88% } +.width-9 { width: 100% } + +/* Positioning classes, these are subtracting from a rightmost + position, which is why they seem the wrong way around */ +/* For a given position, the calculation is margin-left: -100 + (11.11*n) */ +.position-0 { margin-left: -100% } +.position-1 { margin-left: -88.88% } +.position-2 { margin-left: -77.77% } +.position-3 { margin-left: -66.66% } +.position-4 { margin-left: -55.55% } +.position-5 { margin-left: -44.44% } +.position-6 { margin-left: -33.33% } +.position-7 { margin-left: -22.22% } +.position-8 { margin-left: -11.11% } + + +/* End of the core Deco Grid System */ + +/* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. + Not strictly necessary. */ +.width-1\3a 2 { width: 50%; } /* .width-1:2 */ +.width-1\3a 4 { width: 25%; } /* .width-1:4 */ +.width-3\3a 4 { width: 75%; } /* .width-3:4 */ +.position-1\3a 4 {margin-left: -75%;} /* .position-1:4 */ +.position-1\3a 2 {margin-left: -50%;} /* .position-1:2 */ +.position-3\3a 4 {margin-left: -25%;} /* .position-3:4 */ + + +/* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +These do not strictly conform to the grid, but are useful for certain layouts. */ +.width-1\3a 3 { width: 33.33%; } /* .width-1:3 */ +.width-2\3a 3 { width: 66.66%; } /* .width-2:3 */ +.position-1\3a 3 {margin-left: -66.66%;} /* .position-1:3 */ +.position-2\3a 3 {margin-left: -33.33%;} /* .position-2:3 */ diff --git a/gapless/example-12-gapless.html b/gapless/example-12-gapless.html new file mode 100644 index 0000000..87961d7 --- /dev/null +++ b/gapless/example-12-gapless.html @@ -0,0 +1,190 @@ + + + + + Deco Grid System + + + + + + + + + +

Basic 12-column grid demo, showing some common combinations. +Lock page width to 960px for a good fixed version, + where each cell will be 40px with 10px margins.

+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
09
+
10
+
11
+
12
+
+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
+ +
+
01
+
02
+
03
+
04
+
+ + +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ + +
+
01
+
02
+
+ +
+
01
+
+ +

Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. +
Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
+ +
+
01
+
02
+
03
+
04
+
+ +
+
01
+
02
+
04
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

Convenience classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +
Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

FAQ

+
+
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?
+
Absolutely!
+
Can I nest grids inside grids?
+
Yup, it works fine, but make sure you understand good layout principles, + so you don't ruin your layout by breaking the invisible grid too often.
+
What's with the \3a notation for the w1: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 3:4.
+
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 swiftly skip over any divs. + This is why divs exist in the first place — a semantics-free tag to group things with.
+
Also, it frees us up to put the content + in a meaningful order, and makes it easier to add support for things like + mobile devices.
+
And, nobody reads class names and expect them to make sense. No, really. ;-) +
+
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.
+
How is the Deco Grid System different from other grid frameworks like Blueprint, 960 Grids, and others?
+
As we already mentioned, it's smaller. A lot smaller. Less than 1K — vs. 11K (Blueprint), 5.4K (960 Grids), etc. + We realize that this size comparison isn't entirely fair, since they include lots of non-grid stuff, + but even when you strip their files of all that, we're smaller.
+
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.
+
It doesn't ship with anything outside of the grid system — font choices, form builders, other unrelated CSS. + It's built to drop right into your existing CSS code with a minimum amount of fuss.
+
It's really well-suited for automated layout algorithms for CMSes and other web apps.
+
It doesn't assume that you always work in pixel-based layouts, like a lot of other frameworks do.
+
It doesn't need any workarounds/hacks to work reliably in all browsers.
+
Anything else I need to know?
+
Never try to combine stuff into the divs that govern the layout. + Create your own elements inside instead. This makes things much easier and + very reliable and predictable.
+
+ + + \ No newline at end of file diff --git a/gapless/example-16-gapless.html b/gapless/example-16-gapless.html new file mode 100644 index 0000000..f5aba86 --- /dev/null +++ b/gapless/example-16-gapless.html @@ -0,0 +1,204 @@ + + + + + Deco Grid System + + + + + + + + + +

Basic 16-column grid demo, showing some common combinations. +Lock page width to 960px for a good fixed version, + where each cell wll be 40px with 10px margins.

+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
09
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
+ +
+
01
+
02
+
03
+
04
+
05
+
+ + +
+
01
+
02
+
03
+
04
+
+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
+ +

Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. +
Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
+ +
+
01
+
02
+
03
+
04
+
+ +
+
01
+
02
+
04
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +
These do not strictly conform to the grid, but are useful for certain layouts.

+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

FAQ

+
+
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?
+
Absolutely!
+
Can I nest grids inside grids?
+
Yup, it works fine, but make sure you understand good layout principles, + so you don't ruin your layout by breaking the invisible grid too often.
+
What's with the \3a notation for the w1: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 3:4.
+
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 swiftly skip over any divs. + This is why divs exist in the first place — a semantics-free tag to group things with.
+
Also, it frees us up to put the content + in a meaningful order, and makes it easier to add support for things like + mobile devices.
+
And, nobody reads class names and expect them to make sense. No, really. ;-) +
+
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.
+
How is the Deco Grid System different from other grid frameworks like Blueprint, 960 Grids, and others?
+
As we already mentioned, it's smaller. A lot smaller. Less than 1K — vs. 11K (Blueprint), 5.4K (960 Grids), etc. + We realize that this size comparison isn't entirely fair, since they include lots of non-grid stuff, + but even when you strip their files of all that, we're smaller.
+
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.
+
It doesn't ship with anything outside of the grid system — font choices, form builders, other unrelated CSS. + It's built to drop right into your existing CSS code with a minimum amount of fuss.
+
It's really well-suited for automated layout algorithms for CMSes and other web apps.
+
It doesn't assume that you always work in pixel-based layouts, like a lot of other frameworks do.
+
It doesn't need any workarounds/hacks to work reliably in all browsers.
+
Anything else I need to know?
+
Never try to combine stuff into the divs that govern the layout. + Create your own elements inside instead. This makes things much easier and + very reliable and predictable.
+
+ + + \ No newline at end of file diff --git a/gapless/example-9-gapless.html b/gapless/example-9-gapless.html new file mode 100644 index 0000000..a899c25 --- /dev/null +++ b/gapless/example-9-gapless.html @@ -0,0 +1,132 @@ + + + + + Deco Grid System + + + + + + + + + +

Basic 9-column grid demo, showing some common combinations. +Lock page width to 972px for a good fixed version, + where each cell will be 100px with 8px margins.

+ +
+
01
+
02
+
03
+
04
+
05
+
06
+
07
+
08
+
09
+
+ +
+
01
+
02
+
03
+
04
+
+ + +
+
01
+
02
+
03
+
+ + +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +
+
01
+
+ +

Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. +
Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
+ +
+
01
+
02
+
03
+
04
+
+ +
+
01
+
02
+
04
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ +

Convenience classes for ⅓, ⅔ widths and ⅓, ⅔ positions. +
Not strictly necessary, but included for your use if you want them.

+ +
+
01
+
02
+
03
+
+ +
+
01
+
02
+
+ +
+
01
+
02
+
+ + + \ No newline at end of file diff --git a/images/12-col.png b/images/12-col.png new file mode 100644 index 0000000000000000000000000000000000000000..d41b66441ba3f555eb4c6a8c75789f2eed7ec221 GIT binary patch literal 87 zcmeAS@N?(olHy`uVBq!ia0vp^0YJ>i!3HEf4{QDhQgWUyjv*3~$$$R;w`UG~aJO1X lR4Db