- commit
- c08c6d381a0fafae622b8af1a55d6b954513f516
- parent
- 70e9326a2be3f85b5fc19222d0298e9f1d6b1d5e
- Author
- Tobias Bengfort <tobias.bengfort@gmx.net>
- Date
- 2014-01-16 09:04
rm unused files
Diffstat
| D | FAQ.html | 195 | ------------------------------------------------------------ |
| D | decogrids-16.css | 90 | ------------------------------------------------------------ |
| D | dev-notes.txt | 10 | ---------- |
| D | example-16.html | 197 | ------------------------------------------------------------ |
| D | gapless/README.txt | 7 | ------- |
| D | gapless/decogrids-12-gapless.css | 71 | ------------------------------------------------------------ |
| D | gapless/decogrids-16-gapless.css | 80 | ------------------------------------------------------------ |
| D | gapless/decogrids-9-gapless.css | 62 | ------------------------------------------------------------ |
| D | gapless/example-12-gapless.html | 191 | ------------------------------------------------------------ |
| D | gapless/example-16-gapless.html | 205 | ------------------------------------------------------------ |
| D | gapless/example-9-gapless.html | 133 | ------------------------------------------------------------ |
| D | images/12-col.png | 0 | |
| D | images/16-col.png | 0 |
13 files changed, 0 insertions, 1241 deletions
diff --git a/FAQ.html b/FAQ.html
@@ -1,195 +0,0 @@1 -1 <!DOCTYPE html>2 -1 <html>3 -1 <head>4 -1 <title>5 -1 Deco Grid System6 -1 </title>7 -1 <meta http-equiv="Content-type" content="text/html; charset=utf-8">8 -1 <style type="text/css" media="screen">9 -1 /* These classes are just here to make the FAQ have some color/whitespace.10 -1 Not part of the grid system. */11 -1 * { margin:0; padding: 0; }12 -1 body { max-width: 960px; margin: 0 auto;}13 -1 body { font: 0.825em Helvetica, Arial, sans-serif; line-height: 1.5em;}14 -1 div.row { margin-top: 1em inherit; margin-bottom: 1em; }15 -1 h1, h2 { letter-spacing: -0.05em; line-height: 1.5em;}16 -1 code { font-weight: normal; }17 -1 p, pre { margin: 0.5em 0; }18 -1 p, li {text-align: justify;}19 -1 a { text-decoration: none; border-bottom: 1px solid #888;}20 -1 ul { margin: 1em 0 1em 1.5em;}21 -1 hr { height: 1px; border: 0; color: #ccc; background-color: #ccc; margin: 2em 2em 2em 0; }22 -1 </style>23 -1 <link rel="stylesheet" href="decogrids-16.css" type="text/css" charset="utf-8">24 -1 </head>25 -1 <body>26 -127 -1 <div class="row">28 -1 <div class="cell width-full position-0">29 -1 <h1>Deco Grid System (preview)</h1>30 -131 -1 <p>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.</p>32 -133 -1 <p>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: <a href="deco-preview1.zip">deco-preview1.zip</a></p>34 -135 -1 <p>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 <a href="http://limi.net/contact-info">contact me</a> if you have any feedback.</p>36 -137 -1 <p>— <a href="http://limi.net">Alexander Limi</a></p>38 -1 </div>39 -1 </div>40 -141 -1 <div class="row">42 -1 <div class="cell width-full position-0">43 -1 <h1>44 -1 Frequently Asked Questions45 -1 </h1>46 -1 </div>47 -1 </div>48 -1 <div class="row">49 -1 <div class="cell width-1:2 position-0">50 -1 <h2>51 -1 How is the Deco Grid System different from other grid frameworks like Blueprint, 960.gs, and others?52 -1 </h2>53 -1 <p>54 -1 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.55 -1 </p>56 -1 <ul>57 -1 <li>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.58 -1 </li>59 -1 <li>It’s really well-suited for automated layout algorithms for CMSes and other web apps.60 -1 </li>61 -1 <li>It doesn’t assume that you always work in pixel-based layouts, like a lot of other frameworks do.62 -1 </li>63 -1 <li>It doesn’t need any workarounds/hacks to work reliably in all browsers.64 -1 </li>65 -1 <li>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.66 -1 </li>67 -1 </ul>68 -1 </div>69 -1 <div class="cell width-1:2 position-1:2">70 -1 <h2>71 -1 Which browsers does the Deco Grid System work in?72 -1 </h2>73 -1 <p>74 -1 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.75 -1 </p>76 -1 <h2>77 -1 Does it work with both fixed and fluid layouts?78 -1 </h2>79 -1 <p>80 -1 Absolutely!81 -1 </p>82 -1 <h2>83 -1 Does the order of the cells inside a row matter?84 -1 </h2>85 -1 <p>86 -1 No, you can put them in the order that makes the most sense for screen readers and mobile devices.87 -1 </p>88 -1 <h2>89 -1 Did you invent this yourself?90 -1 </h2>91 -1 <p>92 -1 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.93 -1 </p>94 -1 </div>95 -1 </div>96 -1 <div class="row">97 -1 <div class="cell width-1:4 position-0">98 -1 <h2>99 -1 How do you do vertical positioning? Deco only supplies horizontal positioning.100 -1 </h2>101 -1 <p>102 -1 "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.103 -1 </p>104 -1 </div>105 -1 <div class="cell width-1:4 position-1:4">106 -1 <h2>107 -1 What’s a comparable CSS grid system? Are there other systems that work like Deco GS does?108 -1 </h2>109 -1 <p>110 -1 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.111 -1 </p>112 -1 </div>113 -1 <div class="cell width-1:4 position-1:2">114 -1 <h2>115 -1 What’s with the <code>\3a</code> notation in the definitions for the <code>width-1:2</code> etc. classes?116 -1 </h2>117 -1 <p>118 -1 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 <code>width-3:4</code> instead of <code>width-3_4</code> or <code>width-3-4</code>.119 -1 </p>120 -1 </div>121 -1 <div class="cell width-1:4 position-3:4">122 -1 <h2>123 -1 Can I nest grids inside grids?124 -1 </h2>125 -1 <p>126 -1 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.127 -1 </p>128 -1 </div>129 -1 </div>130 -1 <div class="row">131 -1 <div class="cell width-1:4 position-1:2">132 -1 <h2>133 -1 What is the size of the Deco Grid system?134 -1 </h2>135 -1 <p>136 -1 The baseline functionality is two classes (!), plus 16 convenience classes each for position and width. After using the YUI CSS compressor, it’s <em>714 or 907 bytes</em>, for the 12- and 16-column versions, respectively.137 -1 </p>138 -1 </div>139 -1 <div class="cell width-1:4 position-3:4">140 -1 <h2>141 -1 Anything else I need to know?142 -1 </h2>143 -1 <p>144 -1 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.145 -1 </p>146 -1 </div>147 -1 <div class="cell width-1:2 position-0">148 -1 <h2>149 -1 Isn’t the use of dedicated divs for layout semantic noise? Aren’t you just reinventing tables using divs?150 -1 </h2>151 -1 <p>152 -1 First of all, HTML (with some exceptions like the <code><address></code> tag) isn’t really semantic, it’s <em>structural</em>. 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.153 -1 </p>154 -1 <p>155 -1 The whole point of not using tables for layout is that devices such as screen readers will interpret them as <em>data tables</em>, 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.156 -1 </p>157 -1 </div>158 -1 </div>159 -1160 -1161 -1 <div class="row">162 -1 <hr />163 -1 <div class="cell width-1:3 position-2:3">164 -1 <h2>165 -1 Are there any good tools to make it easy to work with grids?166 -1 </h2>167 -1 <p>168 -1 Why, yes! I recommend <a href="http://www.puidokas.com/portfolio/gridfox/">Gridfox</a> as an in-browser tool to visualize grids. For designing with standard tools, the <a href="http://960.gs/">960 Grid System</a> 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.169 -1 </p>170 -1 </div>171 -1 <div class="cell width-2:3 position-0">172 -1 <h2>How does Deco grid code look like?</h2>173 -1 <p>174 -1 A simple example would be:175 -1 </p>176 -1 <pre>177 -1 <div class="row">178 -1 <div class ="cell width-4 position-0">This cell is four units wide</div>179 -1 <div class ="cell width-12 position-4">This cell is twelve units wide</div>180 -1 </div></pre>181 -1 <p>182 -1 This produces the layout below (background color added to illustrate):183 -1 </p>184 -1 </div>185 -1 </div>186 -1 <div class="row">187 -1 <div class="cell width-4 position-0" style="background: #ccc; padding: 1em 0; text-align: center">188 -1 This cell is four units wide189 -1 </div>190 -1 <div class="cell width-12 position-4" style="background: #ccc; padding: 1em 0; text-align: center">191 -1 This cell is twelve units wide192 -1 </div>193 -1 </div>194 -1 </body>195 -1 </html>
diff --git a/decogrids-16.css b/decogrids-16.css
@@ -1,90 +0,0 @@1 -1 /* The 16-column Deco Grid System.2 -1 * Available in multiple variants, see http://deco.gs3 -1 *4 -1 * Cells are 4.16667% (=40px)5 -1 * Column margins are 2.08333% (=20px)6 -1 * Total is 6.25%. (=80px) (which makes 12 columns)7 -1 *8 -1 * If page width is fixed to 960px width:9 -1 * Cell will be equivalent to 40px, left/right margin will be 10px.10 -1 */11 -112 -113 -1 div.row {14 -1 float: left;15 -1 width: 100%;16 -1 display: block;17 -1 position: relative;18 -1 }19 -1 div.cell {20 -1 position: relative;21 -1 float: left;22 -1 left: 100%;23 -1 }24 -125 -1 /* Width classes.26 -1 For a given cell width, the calculation is:27 -1 width = (total cell width) * n - (column margins)28 -1 In this case: (6.25*n - 2.08333)% */29 -1 div.width-1 { width: 4.16667% }30 -1 div.width-2 { width: 10.41667% }31 -1 div.width-3 { width: 16.66667% }32 -1 div.width-4 { width: 22.91667% }33 -1 div.width-5 { width: 29.16667% }34 -1 div.width-6 { width: 35.41667% }35 -1 div.width-7 { width: 41.66667% }36 -1 div.width-8 { width: 47.91667% }37 -1 div.width-9 { width: 54.16667% }38 -1 div.width-10 { width: 60.41667% }39 -1 div.width-11 { width: 66.66667% }40 -1 div.width-12 { width: 72.91667% }41 -1 div.width-13 { width: 79.16667% }42 -1 div.width-14 { width: 85.41667% }43 -1 div.width-15 { width: 91.66667% }44 -1 div.width-16 { width: 97.91667% }45 -146 -1 /* Positioning classes, these are subtracting from a rightmost47 -1 position, which is why they seem the wrong way around */48 -1 /* For a given position, the calculation is:49 -1 -100 + (total cell width * n)50 -1 In this case: margin-left: -100 + (6.25*n) */51 -152 -1 div.position-0 { margin-left: -100% }53 -1 div.position-1 { margin-left: -93.75% }54 -1 div.position-2 { margin-left: -87.5% }55 -1 div.position-3 { margin-left: -81.25% }56 -1 div.position-4 { margin-left: -75% }57 -1 div.position-5 { margin-left: -68.75% }58 -1 div.position-6 { margin-left: -62.5% }59 -1 div.position-7 { margin-left: -56.25% }60 -1 div.position-8 { margin-left: -50% }61 -1 div.position-9 { margin-left: -43.75% }62 -1 div.position-10 { margin-left: -37.5% }63 -1 div.position-11 { margin-left: -31.25% }64 -1 div.position-12 { margin-left: -25% }65 -1 div.position-13 { margin-left: -18.75% }66 -1 div.position-14 { margin-left: -12.5% }67 -1 div.position-15 { margin-left: -6.25% }68 -169 -1 /* End of the core Deco Grid System */70 -171 -1 /* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.72 -1 Not strictly necessary. */73 -1 div.width-1\3a 2 { width: 47.91667% } /* .width-1:2 */74 -1 div.width-1\3a 4 { width: 22.91667% } /* .width-1:4 */75 -1 div.width-3\3a 4 { width: 72.91667% } /* .width-3:4 */76 -1 div.position-1\3a 4 {margin-left: -75% } /* .position-1:4 */77 -1 div.position-1\3a 2 {margin-left: -50% } /* .position-1:2 */78 -1 div.position-3\3a 4 {margin-left: -25% } /* .position-3:4 */79 -180 -181 -1 /* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions.82 -1 These do not strictly conform to the grid, but are useful for certain layouts. */83 -1 div.width-1\3a 3 { width: 31.25%; } /* .width-1:3 */84 -1 div.width-2\3a 3 { width: 64.5%; } /* .width-2:3 */85 -1 div.position-1\3a 3 {margin-left: -66.7%;} /* .position-1:3 */86 -1 div.position-2\3a 3 {margin-left: -33.4%;} /* .position-2:3 */87 -188 -1 /* Full/leftmost are useful synonyms for full width and leftmost positioning */89 -1 div.position-leftmost { margin-left: -100% }90 -1 div.width-full { width: 97.91667% }
diff --git a/dev-notes.txt b/dev-notes.txt
@@ -1,10 +0,0 @@1 -1 http://www.designinfluences.com/fluid960gs/16/2 -13 -1 For typography, possibly use http://www.blueprintcss.org/tests/parts/elements.html4 -1 as test for whether vertical rhythm is correct.5 -16 -1 Mention Faux Absolute Postioning article7 -18 -1 Mention why this won't break browsers that have rounding error with percentages/ems.9 -1 http://ejohn.org/blog/sub-pixel-problems-in-css/10 -1
diff --git a/example-16.html b/example-16.html
@@ -1,196 +0,0 @@1 -1 <!DOCTYPE html>2 -1 <html>3 -1 <head>4 -1 <meta http-equiv="Content-type" content="text/html; charset=utf-8">5 -1 <title>Deco Grid System</title>6 -1 <style type="text/css" media="screen">7 -1 /* These classes are just here to make the demo have some color/whitespace.8 -1 Not part of the grid system. */9 -1 * { margin:0; padding: 0; }10 -1 body { font: 0.825em Helvetica, Arial, sans-serif; line-height: 1.5em;}11 -1 div.row { margin-top: 1em inherit; margin-bottom: 1em; padding-left: 10px; }12 -1 div.cell {text-align: center; padding: 1em 0; background-color: #ccc; }13 -1 h1, h2 { letter-spacing: -0.05em; margin: 10px; text-align: justify; line-height: 1.25em;}14 -1 /* Uncomment the below line to test the fixed-width version, 60em = 960px: */15 -1 /* body { width: 960px; margin: 0 auto;} */16 -117 -1 /* Another approach is to make sure the page never exceeds 960px, but scales down */18 -1 body { max-width: 960px; margin: 0 auto;}19 -120 -1 /* Uncomment the below to show the grid background, only makes sense at 960px */21 -1 div.grid-background { background: url(images/16-col.png) repeat scroll 0 0 #eef; padding: 1em 0; }22 -123 -1 </style>24 -125 -1 <link rel="stylesheet" href="decogrids-16.css" type="text/css" charset="utf-8" />26 -127 -1 </head>28 -129 -130 -1 <body>31 -1 <div class="grid-background"> <!-- Dummy element to show the grid background -->32 -133 -1 <h1>34 -1 Basic 16-column grid demo, showing some common combinations.35 -1 Lock page width to 960px for a good fixed version,36 -1 where each cell will be 40px with 20px column margins.37 -1 </h1>38 -139 -1 <div class="row">40 -1 <div class ="cell width-1 position-0">01</div>41 -1 <div class ="cell width-1 position-1">02</div>42 -1 <div class ="cell width-1 position-2">03</div>43 -1 <div class ="cell width-1 position-3">04</div>44 -1 <div class ="cell width-1 position-4">05</div>45 -1 <div class ="cell width-1 position-5">06</div>46 -1 <div class ="cell width-1 position-6">07</div>47 -1 <div class ="cell width-1 position-7">08</div>48 -1 <div class ="cell width-1 position-8">09</div>49 -1 <div class ="cell width-1 position-9">10</div>50 -1 <div class ="cell width-1 position-10">11</div>51 -1 <div class ="cell width-1 position-11">12</div>52 -1 <div class ="cell width-1 position-12">13</div>53 -1 <div class ="cell width-1 position-13">14</div>54 -1 <div class ="cell width-1 position-14">15</div>55 -1 <div class ="cell width-1 position-15">16</div>56 -1 </div>57 -158 -1 <div class="row">59 -1 <div class ="cell width-2 position-0">01</div>60 -1 <div class ="cell width-2 position-2">02</div>61 -1 <div class ="cell width-2 position-4">03</div>62 -1 <div class ="cell width-2 position-6">04</div>63 -1 <div class ="cell width-2 position-8">05</div>64 -1 <div class ="cell width-2 position-10">06</div>65 -1 <div class ="cell width-2 position-12">07</div>66 -1 <div class ="cell width-2 position-14">08</div>67 -1 </div>68 -169 -1 <div class="row">70 -1 <div class ="cell width-3 position-0">01</div>71 -1 <div class ="cell width-3 position-3">02</div>72 -1 <div class ="cell width-3 position-6">03</div>73 -1 <div class ="cell width-3 position-9">04</div>74 -1 <div class ="cell width-4 position-12">05</div>75 -1 </div>76 -177 -178 -1 <div class="row">79 -1 <div class ="cell width-4 position-0">01</div>80 -1 <div class ="cell width-4 position-4">02</div>81 -1 <div class ="cell width-4 position-8">03</div>82 -1 <div class ="cell width-4 position-12">04</div>83 -1 </div>84 -185 -1 <div class="row">86 -1 <div class ="cell width-4 position-0">01</div>87 -1 <div class ="cell width-8 position-4">02</div>88 -1 <div class ="cell width-4 position-12">03</div>89 -1 </div>90 -191 -1 <div class="row">92 -1 <div class ="cell width-5 position-0">01</div>93 -1 <div class ="cell width-6 position-5">02</div>94 -1 <div class ="cell width-5 position-11">03</div>95 -1 </div>96 -197 -1 <div class="row">98 -1 <div class ="cell width-8 position-0">01</div>99 -1 <div class ="cell width-8 position-8">02</div>100 -1 </div>101 -1102 -1 <div class="row">103 -1 <div class ="cell width-9 position-0">01</div>104 -1 <div class ="cell width-7 position-9">02</div>105 -1 </div>106 -1107 -1 <div class="row">108 -1 <div class ="cell width-10 position-0">01</div>109 -1 <div class ="cell width-6 position-10">02</div>110 -1 </div>111 -1112 -1 <div class="row">113 -1 <div class ="cell width-11 position-0">01</div>114 -1 <div class ="cell width-5 position-11">02</div>115 -1 </div>116 -1117 -1 <div class="row">118 -1 <div class ="cell width-12 position-0">01</div>119 -1 <div class ="cell width-4 position-12">02</div>120 -1 </div>121 -1122 -1 <div class="row">123 -1 <div class ="cell width-13 position-0">01</div>124 -1 <div class ="cell width-3 position-13">02</div>125 -1 </div>126 -1127 -1 <div class="row">128 -1 <div class ="cell width-14 position-0">01</div>129 -1 <div class ="cell width-2 position-14">02</div>130 -1 </div>131 -1132 -1 <div class="row">133 -1 <div class ="cell width-15 position-0">01</div>134 -1 <div class ="cell width-1 position-15">02</div>135 -1 </div>136 -1137 -1 <div class="row">138 -1 <div class ="cell width-16 position-0">01</div>139 -1 </div>140 -1141 -1 <h1>Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.142 -1 Not strictly necessary, but included for your use if you want them.</h1>143 -1144 -1 <div class="row">145 -1 <div class ="cell width-1:2 position-0">01</div>146 -1 <div class ="cell width-1:2 position-1:2">02</div>147 -1 </div>148 -1149 -1 <div class="row">150 -1 <div class ="cell width-1:4 position-0">01</div>151 -1 <div class ="cell width-1:4 position-1:4">02</div>152 -1 <div class ="cell width-1:4 position-1:2">03</div>153 -1 <div class ="cell width-1:4 position-3:4">04</div>154 -1 </div>155 -1156 -1 <div class="row">157 -1 <div class ="cell width-1:4 position-0">01</div>158 -1 <div class ="cell width-1:2 position-1:4">02</div>159 -1 <div class ="cell width-1:4 position-3:4">04</div>160 -1 </div>161 -1162 -1 <div class="row">163 -1 <div class ="cell width-1:4 position-0">01</div>164 -1 <div class ="cell width-3:4 position-1:4">02</div>165 -1 </div>166 -1167 -1 <div class="row">168 -1 <div class ="cell width-3:4 position-0">01</div>169 -1 <div class ="cell width-1:4 position-3:4">02</div>170 -1 </div>171 -1172 -1 <h1>Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions.173 -1 These do not strictly conform to the grid, but are174 -1 useful for certain layouts.</h1>175 -1176 -1 <div class="row">177 -1 <div class ="cell width-1:3 position-0">01</div>178 -1 <div class ="cell width-1:3 position-1:3">02</div>179 -1 <div class ="cell width-1:3 position-2:3">03</div>180 -1 </div>181 -1182 -1 <div class="row">183 -1 <div class ="cell width-1:3 position-0">01</div>184 -1 <div class ="cell width-2:3 position-1:3">02</div>185 -1 </div>186 -1187 -1 <div class="row">188 -1 <div class ="cell width-2:3 position-0">01</div>189 -1 <div class ="cell width-1:3 position-2:3">02</div>190 -1 </div>191 -1192 -1 <p style="text-align: center">Created by <a href="http://limi.net/">Alexander Limi</a>. Placed in the Public Domain.</p>193 -1194 -1 </div>195 -1 </body>196 -1 </html196 -1 \ No newline at end of file
diff --git a/gapless/README.txt b/gapless/README.txt
@@ -1,7 +0,0 @@1 -1 This is an experimental variant with no margins, contributed by Denis Mishunov.2 -13 -1 It is useful when you have layouts where the elements are positioned right4 -1 next to each other with no whitespace.5 -16 -1 Gapless grids might have about 1px gaps sometimes due to rounding of percentage7 -1 values for the widths.
diff --git a/gapless/decogrids-12-gapless.css b/gapless/decogrids-12-gapless.css
@@ -1,71 +0,0 @@1 -1 /* The 12-column Deco Grid System.2 -1 * For the 16-column variant, see decogrids-16.css.3 -1 *4 -1 * Cells are 8.33% width. No margins5 -1 *6 -1 * If page width is fixed to 960px width:7 -1 * Cell will be roughly equivalent to 80px. No margins.8 -1 */9 -110 -1 .row {11 -1 float: left;12 -1 width: 100%;13 -1 display: block;14 -1 position: relative;15 -1 }16 -1 .cell {17 -1 position: relative;18 -1 float: left;19 -1 left: 100%;20 -1 }21 -122 -1 /* Width classes. */23 -1 .width-1 { width: 8.333% }24 -1 .width-2 { width: 16.666% }25 -1 .width-3 { width: 25% }26 -1 .width-4 { width: 33.333% }27 -1 .width-5 { width: 41.666% }28 -1 .width-6 { width: 50% }29 -1 .width-7 { width: 58.333% }30 -1 .width-8 { width: 66.666% }31 -1 .width-9 { width: 75% }32 -1 .width-10 { width: 83.333% }33 -1 .width-11 { width: 91.666% }34 -1 .width-12 { width: 100% }35 -136 -137 -1 /* Positioning classes, these are subtracting from a rightmost38 -1 position, which is why they seem the wrong way around */39 -1 /* For a given position, the calculation is margin-left: -100 + (8.33*n) */40 -1 .position-0 { margin-left: -100% }41 -1 .position-1 { margin-left: -91.666% }42 -1 .position-2 { margin-left: -83.333% }43 -1 .position-3 { margin-left: -75% }44 -1 .position-4 { margin-left: -66.666% }45 -1 .position-5 { margin-left: -58.333% }46 -1 .position-6 { margin-left: -50% }47 -1 .position-7 { margin-left: -41.666% }48 -1 .position-8 { margin-left: -33.333% }49 -1 .position-9 { margin-left: -25% }50 -1 .position-10 { margin-left: -16.666% }51 -1 .position-11 { margin-left: -8.333% }52 -153 -154 -1 /* End of the core Deco Grid System */55 -156 -1 /* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.57 -1 Not strictly necessary. */58 -1 .width-1\3a 2 { width: 50%; } /* .width-1:2 */59 -1 .width-1\3a 4 { width: 25%; } /* .width-1:4 */60 -1 .width-3\3a 4 { width: 75%; } /* .width-3:4 */61 -1 .position-1\3a 4 {margin-left: -75%;} /* .position-1:4 */62 -1 .position-1\3a 2 {margin-left: -50%;} /* .position-1:2 */63 -1 .position-3\3a 4 {margin-left: -25%;} /* .position-3:4 */64 -165 -166 -1 /* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions.67 -1 These do not strictly conform to the grid, but are useful for certain layouts. */68 -1 .width-1\3a 3 { width: 33.33%; } /* .width-1:3 */69 -1 .width-2\3a 3 { width: 66.66%; } /* .width-2:3 */70 -1 .position-1\3a 3 {margin-left: -66.66%;} /* .position-1:3 */71 -1 .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
@@ -1,80 +0,0 @@1 -1 /* The gapless 16-column Deco Grid System.2 -1 * For the 12-column variant, see decogrids-12-gapless.css.3 -1 *4 -1 * Cells are 6.25% width. No margins5 -1 *6 -1 * If page width is fixed to 960px width:7 -1 * Cell will be equivalent to 60px. No margins8 -1 */9 -110 -111 -112 -1 .row {13 -1 float: left;14 -1 width: 100%;15 -1 display: block;16 -1 position: relative;17 -1 }18 -1 .cell {19 -1 position: relative;20 -1 float: left;21 -1 left: 100%;22 -1 }23 -124 -1 /* Width classes. */25 -1 .width-1 { width: 6.25% }26 -1 .width-2 { width: 12.5% }27 -1 .width-3 { width: 18.75% }28 -1 .width-4 { width: 25% }29 -1 .width-5 { width: 31.25% }30 -1 .width-6 { width: 37.5% }31 -1 .width-7 { width: 43.75% }32 -1 .width-8 { width: 50% }33 -1 .width-9 { width: 56.25% }34 -1 .width-10 { width: 62.5% }35 -1 .width-11 { width: 68.75% }36 -1 .width-12 { width: 75% }37 -1 .width-13 { width: 81.25% }38 -1 .width-14 { width: 87.5% }39 -1 .width-15 { width: 93.75% }40 -1 .width-16 { width: 100% }41 -142 -143 -1 /* Positioning classes, these are subtracting from a rightmost44 -1 position, which is why they seem the wrong way around */45 -1 /* For a given position, the calculation is margin-left: -100 + (6.25*n) */46 -1 .position-0 { margin-left: -100% }47 -1 .position-1 { margin-left: -93.75% }48 -1 .position-2 { margin-left: -87.5% }49 -1 .position-3 { margin-left: -81.25% }50 -1 .position-4 { margin-left: -75% }51 -1 .position-5 { margin-left: -68.75% }52 -1 .position-6 { margin-left: -62.5% }53 -1 .position-7 { margin-left: -56.25% }54 -1 .position-8 { margin-left: -50% }55 -1 .position-9 { margin-left: -43.75% }56 -1 .position-10 { margin-left: -37.5% }57 -1 .position-11 { margin-left: -31.25% }58 -1 .position-12 { margin-left: -25% }59 -1 .position-13 { margin-left: -18.75% }60 -1 .position-14 { margin-left: -12.5% }61 -1 .position-15 { margin-left: -6.25% }62 -163 -1 /* End of the core Deco Grid System */64 -165 -1 /* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.66 -1 Not strictly necessary. */67 -1 .width-1\3a 2 { width: 50%; } /* .width-1:2 */68 -1 .width-1\3a 4 { width: 25%; } /* .width-1:4 */69 -1 .width-3\3a 4 { width: 75%; } /* .width-3:4 */70 -1 .position-1\3a 4 {margin-left: -75%;} /* .position-1:4 */71 -1 .position-1\3a 2 {margin-left: -50%;} /* .position-1:2 */72 -1 .position-3\3a 4 {margin-left: -25%;} /* .position-3:4 */73 -174 -175 -1 /* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions.76 -1 These do not strictly conform to the grid, but are useful for certain layouts. */77 -1 .width-1\3a 3 { width: 33.33%; } /* .width-1:3 */78 -1 .width-2\3a 3 { width: 66.66%; } /* .width-2:3 */79 -1 .position-1\3a 3 {margin-left: -66.66%;} /* .position-1:3 */80 -1 .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
@@ -1,62 +0,0 @@1 -1 /* The 9-column Deco Grid System.2 -1 *3 -1 * Cells are 11.11% width. No margins4 -1 *5 -1 */6 -17 -1 .row {8 -1 float: left;9 -1 width: 100%;10 -1 display: block;11 -1 position: relative;12 -1 }13 -1 .cell {14 -1 position: relative;15 -1 float: left;16 -1 left: 100%;17 -1 }18 -119 -1 /* Width classes.20 -1 For a given cell width, the calculation is: width: (11.11*n)% */21 -1 .width-1 { width: 11.11% }22 -1 .width-2 { width: 22.22% }23 -1 .width-3 { width: 33.33% }24 -1 .width-4 { width: 44.44% }25 -1 .width-5 { width: 55.55% }26 -1 .width-6 { width: 66.66% }27 -1 .width-7 { width: 77.77% }28 -1 .width-8 { width: 88.88% }29 -1 .width-9 { width: 100% }30 -131 -1 /* Positioning classes, these are subtracting from a rightmost32 -1 position, which is why they seem the wrong way around */33 -1 /* For a given position, the calculation is margin-left: -100 + (11.11*n) */34 -1 .position-0 { margin-left: -100% }35 -1 .position-1 { margin-left: -88.88% }36 -1 .position-2 { margin-left: -77.77% }37 -1 .position-3 { margin-left: -66.66% }38 -1 .position-4 { margin-left: -55.55% }39 -1 .position-5 { margin-left: -44.44% }40 -1 .position-6 { margin-left: -33.33% }41 -1 .position-7 { margin-left: -22.22% }42 -1 .position-8 { margin-left: -11.11% }43 -144 -145 -1 /* End of the core Deco Grid System */46 -147 -1 /* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.48 -1 Not strictly necessary. */49 -1 .width-1\3a 2 { width: 50%; } /* .width-1:2 */50 -1 .width-1\3a 4 { width: 25%; } /* .width-1:4 */51 -1 .width-3\3a 4 { width: 75%; } /* .width-3:4 */52 -1 .position-1\3a 4 {margin-left: -75%;} /* .position-1:4 */53 -1 .position-1\3a 2 {margin-left: -50%;} /* .position-1:2 */54 -1 .position-3\3a 4 {margin-left: -25%;} /* .position-3:4 */55 -156 -157 -1 /* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions.58 -1 These do not strictly conform to the grid, but are useful for certain layouts. */59 -1 .width-1\3a 3 { width: 33.33%; } /* .width-1:3 */60 -1 .width-2\3a 3 { width: 66.66%; } /* .width-2:3 */61 -1 .position-1\3a 3 {margin-left: -66.66%;} /* .position-1:3 */62 -1 .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
@@ -1,190 +0,0 @@1 -1 <!DOCTYPE html>2 -1 <html>3 -1 <head>4 -1 <meta http-equiv="Content-type" content="text/html; charset=utf-8">5 -1 <title>Deco Grid System</title>6 -1 <style type="text/css" media="screen">7 -1 /* These classes are just here to make the demo have some color/whitespace.8 -1 Not part of the grid system. */9 -1 body { font: 0.825em Helvetica, Arial, sans-serif; }10 -1 * { margin:0; padding: 0; }11 -1 div.row { margin: 1em 0; }12 -1 div.cell {text-align: center; padding: 1em 0; background-color: #ccc; }13 -1 div.even {background-color: #999;}14 -1 h1 { margin: 0 0.5em; letter-spacing: -0.05em; }15 -1 dl { margin:0.5em 2em; }16 -1 dt { font-weight: bold; }17 -1 dd { margin: 0 1em 1em; }18 -1 code { font-weight: normal; }19 -1 /* Uncomment the following to test the fixed-width version: */20 -1 /* body { width: 960px; } */21 -1 </style>22 -123 -1 <link rel="stylesheet" href="decogrids-12-gapless.css" type="text/css" charset="utf-8" />24 -125 -1 </head>26 -127 -128 -1 <body>29 -130 -1 <h1>Basic 12-column grid demo, showing some common combinations.31 -1 Lock page width to 960px for a good fixed version,32 -1 where each cell will be 40px with 10px margins.</h1>33 -134 -1 <div class="row">35 -1 <div class ="cell width-1 position-0">01</div>36 -1 <div class ="cell width-1 position-1 even">02</div>37 -1 <div class ="cell width-1 position-2">03</div>38 -1 <div class ="cell width-1 position-3 even">04</div>39 -1 <div class ="cell width-1 position-4">05</div>40 -1 <div class ="cell width-1 position-5 even">06</div>41 -1 <div class ="cell width-1 position-6">07</div>42 -1 <div class ="cell width-1 position-7 even">08</div>43 -1 <div class ="cell width-1 position-8">09</div>44 -1 <div class ="cell width-1 position-9 even">10</div>45 -1 <div class ="cell width-1 position-10">11</div>46 -1 <div class ="cell width-1 position-11 even">12</div>47 -1 </div>48 -149 -1 <div class="row">50 -1 <div class ="cell width-2 position-0">01</div>51 -1 <div class ="cell width-2 position-2 even">02</div>52 -1 <div class ="cell width-2 position-4">03</div>53 -1 <div class ="cell width-2 position-6 even">04</div>54 -1 <div class ="cell width-2 position-8">05</div>55 -1 <div class ="cell width-2 position-10 even">06</div>56 -1 </div>57 -158 -1 <div class="row">59 -1 <div class ="cell width-3 position-0">01</div>60 -1 <div class ="cell width-3 position-3 even">02</div>61 -1 <div class ="cell width-3 position-6">03</div>62 -1 <div class ="cell width-3 position-9 even">04</div>63 -1 </div>64 -165 -166 -1 <div class="row">67 -1 <div class ="cell width-4 position-0">01</div>68 -1 <div class ="cell width-4 position-4 even">02</div>69 -1 <div class ="cell width-4 position-8">03</div>70 -1 </div>71 -172 -1 <div class="row">73 -1 <div class ="cell width-4 position-0">01</div>74 -1 <div class ="cell width-8 position-4 even">02</div>75 -1 </div>76 -177 -178 -1 <div class="row">79 -1 <div class ="cell width-6 position-0">01</div>80 -1 <div class ="cell width-6 position-6 even">02</div>81 -1 </div>82 -183 -1 <div class="row">84 -1 <div class ="cell width-12 position-0">01</div>85 -1 </div>86 -187 -1 <h1>Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.88 -1 <br />Not strictly necessary, but included for your use if you want them.</h1>89 -190 -1 <div class="row">91 -1 <div class ="cell width-1:2 position-0">01</div>92 -1 <div class ="cell width-1:2 position-1:2 even">02</div>93 -1 </div>94 -195 -1 <div class="row">96 -1 <div class ="cell width-1:4 position-0">01</div>97 -1 <div class ="cell width-1:4 position-1:4 even">02</div>98 -1 <div class ="cell width-1:4 position-1:2">03</div>99 -1 <div class ="cell width-1:4 position-3:4 even">04</div>100 -1 </div>101 -1102 -1 <div class="row">103 -1 <div class ="cell width-1:4 position-0">01</div>104 -1 <div class ="cell width-1:2 position-1:4 even">02</div>105 -1 <div class ="cell width-1:4 position-3:4">04</div>106 -1 </div>107 -1108 -1 <div class="row">109 -1 <div class ="cell width-1:4 position-0">01</div>110 -1 <div class ="cell width-3:4 position-1:4 even">02</div>111 -1 </div>112 -1113 -1 <div class="row">114 -1 <div class ="cell width-3:4 position-0">01</div>115 -1 <div class ="cell width-1:4 position-3:4 even">02</div>116 -1 </div>117 -1118 -1 <h1>Convenience classes for ⅓, ⅔ widths and ⅓, ⅔ positions.119 -1 <br />Not strictly necessary, but included for your use if you want them.</h1>120 -1121 -1 <div class="row">122 -1 <div class ="cell width-1:3 position-0">01</div>123 -1 <div class ="cell width-1:3 position-1:3 even">02</div>124 -1 <div class ="cell width-1:3 position-2:3">03</div>125 -1 </div>126 -1127 -1 <div class="row">128 -1 <div class ="cell width-1:3 position-0">01</div>129 -1 <div class ="cell width-2:3 position-1:3 even">02</div>130 -1 </div>131 -1132 -1 <div class="row">133 -1 <div class ="cell width-2:3 position-0">01</div>134 -1 <div class ="cell width-1:3 position-2:3 even">02</div>135 -1 </div>136 -1137 -1 <h1>FAQ</h1>138 -1 <dl>139 -1 <dt>Which browsers does the Deco Grid System work in?</dt>140 -1 <dd>All browsers as far back as (and including!) Internet Explorer 6,141 -1 without any wrapping, cropping, or other bad behaviour. It's rock solid.142 -1 It may work in older browsers, but we haven't tested this.</dd>143 -1 <dt>Does it work with both fixed and fluid layouts?</dt>144 -1 <dd>Absolutely!</dd>145 -1 <dt>Can I nest grids inside grids?</dt>146 -1 <dd>Yup, it works fine, but make sure you understand good layout principles,147 -1 so you don't ruin your layout by breaking the invisible grid too often.</dd>148 -1 <dt>What's with the <code>\3a</code> notation for the <code>w1:2</code> etc. classes?</dt>149 -1 <dd>It's a workaround notation since Internet Explorer 6 (and 7, possibly) doesn't support150 -1 the plain backslash escape for class names with colon in them.151 -1 You can of course rename this if you think it's ugly.152 -1 We think it's easier to think of three quarters as <code>3:4</code>.</dd>153 -1 <dt>Isn't the use of dedicated divs for layout semantic noise?154 -1 Aren't you just reinventing tables using divs?</dt>155 -1 <dd>First of all, HTML (with some exceptions like the <code><address></code> tag)156 -1 isn't really semantic, it's <em>structural</em>.157 -1 You can of course argue this until the cows come home, but the main thing158 -1 to keep in mind is that screen readers — which are the closest we get to semantics today —159 -1 have no issue with using divs like this and compared to the workarounds other160 -1 layouts need, we think you'll find this approach simple and refreshing.</dd>161 -1 <dd>The whole point of not using tables for layout is that devices such as screen readers will162 -1 interpret them as <em>data tables</em>, which they are not. They swiftly skip over any divs.163 -1 This is why divs exist in the first place — a semantics-free tag to group things with.</dd>164 -1 <dd>Also, it frees us up to put the content165 -1 in a meaningful order, and makes it easier to add support for things like166 -1 mobile devices.</dd>167 -1 <dd>And, nobody reads class names and expect them to make sense. No, really. ;-)168 -1 </dd>169 -1 <dt>What is the size of the Deco Grid system?</dt>170 -1 <dd>The baseline functionality is two classes (!), plus 16 convenience classes each for position and width.171 -1 After using the YUI CSS compressor, it's <em>714 or 907 bytes</em>, for the 12- and 16-column versions, respectively.</dd>172 -1 <dt>How is the Deco Grid System different from other grid frameworks like Blueprint, 960 Grids, and others?</dt>173 -1 <dd>As we already mentioned, it's smaller. A lot smaller. Less than 1K — vs. 11K (Blueprint), 5.4K (960 Grids), etc.174 -1 We realize that this size comparison isn't entirely fair, since they include lots of non-grid stuff,175 -1 but even when you strip their files of all that, we're smaller.</dd>176 -1 <dd>We believe Deco Grids a lot simpler to understand and use, the naming convention and mental model177 -1 is very very simple, and it arguably degrades better.</dd>178 -1 <dd>It doesn't ship with anything outside of the grid system — font choices, form builders, other unrelated CSS.179 -1 It's built to drop right into your existing CSS code with a minimum amount of fuss.</dd>180 -1 <dd>It's really well-suited for automated layout algorithms for CMSes and other web apps.</dd>181 -1 <dd>It doesn't assume that you always work in pixel-based layouts, like a lot of other frameworks do.</dd>182 -1 <dd>It doesn't need any workarounds/hacks to work reliably in all browsers.</dd>183 -1 <dt>Anything else I need to know?</dt>184 -1 <dd>Never try to combine stuff into the divs that govern the layout.185 -1 Create your own elements inside instead. This makes things much easier and186 -1 very reliable and predictable.</dd>187 -1 </dl>188 -1189 -1 </body>190 -1 </html190 -1 \ No newline at end of file
diff --git a/gapless/example-16-gapless.html b/gapless/example-16-gapless.html
@@ -1,204 +0,0 @@1 -1 <!DOCTYPE html>2 -1 <html>3 -1 <head>4 -1 <meta http-equiv="Content-type" content="text/html; charset=utf-8">5 -1 <title>Deco Grid System</title>6 -1 <style type="text/css" media="screen">7 -1 /* These classes are just here to make the demo have some color/whitespace.8 -1 Not part of the grid system. */9 -1 body { font: 0.825em Helvetica, Arial, sans-serif; }10 -1 * { margin:0; padding: 0; }11 -1 div.row { margin: 1em 0; }12 -1 div.cell {text-align: center; padding: 1em 0; background-color: #ccc; }13 -1 div.even {background-color: #999;}14 -1 h1 { margin: 0 0.5em; letter-spacing: -0.05em; }15 -1 dl { margin:0.5em 2em; }16 -1 dt { font-weight: bold; }17 -1 dd { margin: 0 1em 1em; }18 -1 code { font-weight: normal; }19 -1 /* Uncomment the following to test the fixed-width version: */20 -1 /* body { width: 960px; } */21 -1 </style>22 -123 -1 <link rel="stylesheet" href="decogrids-16-gapless.css" type="text/css" charset="utf-8" />24 -125 -1 </head>26 -127 -128 -1 <body>29 -130 -1 <h1>Basic 16-column grid demo, showing some common combinations.31 -1 Lock page width to 960px for a good fixed version,32 -1 where each cell wll be 40px with 10px margins.</h1>33 -134 -1 <div class="row">35 -1 <div class ="cell width-1 position-0">01</div>36 -1 <div class ="cell width-1 position-1 even">02</div>37 -1 <div class ="cell width-1 position-2">03</div>38 -1 <div class ="cell width-1 position-3 even">04</div>39 -1 <div class ="cell width-1 position-4">05</div>40 -1 <div class ="cell width-1 position-5 even">06</div>41 -1 <div class ="cell width-1 position-6">07</div>42 -1 <div class ="cell width-1 position-7 even">08</div>43 -1 <div class ="cell width-1 position-8">09</div>44 -1 <div class ="cell width-1 position-9 even">10</div>45 -1 <div class ="cell width-1 position-10">11</div>46 -1 <div class ="cell width-1 position-11 even">12</div>47 -1 <div class ="cell width-1 position-12">13</div>48 -1 <div class ="cell width-1 position-13 even">14</div>49 -1 <div class ="cell width-1 position-14">15</div>50 -1 <div class ="cell width-1 position-15 even">16</div>51 -1 </div>52 -153 -1 <div class="row">54 -1 <div class ="cell width-2 position-0">01</div>55 -1 <div class ="cell width-2 position-2 even">02</div>56 -1 <div class ="cell width-2 position-4">03</div>57 -1 <div class ="cell width-2 position-6 even">04</div>58 -1 <div class ="cell width-2 position-8">05</div>59 -1 <div class ="cell width-2 position-10 even">06</div>60 -1 <div class ="cell width-2 position-12">07</div>61 -1 <div class ="cell width-2 position-14 even">08</div>62 -1 </div>63 -164 -1 <div class="row">65 -1 <div class ="cell width-3 position-0">01</div>66 -1 <div class ="cell width-3 position-3 even">02</div>67 -1 <div class ="cell width-3 position-6">03</div>68 -1 <div class ="cell width-3 position-9 even">04</div>69 -1 <div class ="cell width-4 position-12">05</div>70 -1 </div>71 -172 -173 -1 <div class="row">74 -1 <div class ="cell width-4 position-0">01</div>75 -1 <div class ="cell width-4 position-4 even">02</div>76 -1 <div class ="cell width-4 position-8">03</div>77 -1 <div class ="cell width-4 position-12 even">04</div>78 -1 </div>79 -180 -1 <div class="row">81 -1 <div class ="cell width-4 position-0">01</div>82 -1 <div class ="cell width-8 position-4 even">02</div>83 -1 <div class ="cell width-4 position-12">03</div>84 -1 </div>85 -186 -1 <div class="row">87 -1 <div class ="cell width-5 position-0">01</div>88 -1 <div class ="cell width-6 position-5 even">02</div>89 -1 <div class ="cell width-5 position-11">03</div>90 -1 </div>91 -192 -1 <div class="row">93 -1 <div class ="cell width-8 position-0">01</div>94 -1 <div class ="cell width-8 position-8 even">02</div>95 -1 </div>96 -197 -1 <div class="row">98 -1 <div class ="cell width-16 position-0">01</div>99 -1 </div>100 -1101 -1 <h1>Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.102 -1 <br />Not strictly necessary, but included for your use if you want them.</h1>103 -1104 -1 <div class="row">105 -1 <div class ="cell width-1:2 position-0">01</div>106 -1 <div class ="cell width-1:2 position-1:2 even">02</div>107 -1 </div>108 -1109 -1 <div class="row">110 -1 <div class ="cell width-1:4 position-0">01</div>111 -1 <div class ="cell width-1:4 position-1:4 even">02</div>112 -1 <div class ="cell width-1:4 position-1:2">03</div>113 -1 <div class ="cell width-1:4 position-3:4 even">04</div>114 -1 </div>115 -1116 -1 <div class="row">117 -1 <div class ="cell width-1:4 position-0">01</div>118 -1 <div class ="cell width-1:2 position-1:4 even">02</div>119 -1 <div class ="cell width-1:4 position-3:4">04</div>120 -1 </div>121 -1122 -1 <div class="row">123 -1 <div class ="cell width-1:4 position-0">01</div>124 -1 <div class ="cell width-3:4 position-1:4 even">02</div>125 -1 </div>126 -1127 -1 <div class="row">128 -1 <div class ="cell width-3:4 position-0">01</div>129 -1 <div class ="cell width-1:4 position-3:4 even">02</div>130 -1 </div>131 -1132 -1 <h1>Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions.133 -1 <br />These do not strictly conform to the grid, but are useful for certain layouts.</h1>134 -1135 -1 <div class="row">136 -1 <div class ="cell width-1:3 position-0">01</div>137 -1 <div class ="cell width-1:3 position-1:3 even">02</div>138 -1 <div class ="cell width-1:3 position-2:3">03</div>139 -1 </div>140 -1141 -1 <div class="row">142 -1 <div class ="cell width-1:3 position-0">01</div>143 -1 <div class ="cell width-2:3 position-1:3 even">02</div>144 -1 </div>145 -1146 -1 <div class="row">147 -1 <div class ="cell width-2:3 position-0">01</div>148 -1 <div class ="cell width-1:3 position-2:3 even">02</div>149 -1 </div>150 -1151 -1 <h1>FAQ</h1>152 -1 <dl>153 -1 <dt>Which browsers does the Deco Grid System work in?</dt>154 -1 <dd>All browsers as far back as (and including!) Internet Explorer 6,155 -1 without any wrapping, cropping, or other bad behaviour. It's rock solid.156 -1 It may work in older browsers, but we haven't tested this.</dd>157 -1 <dt>Does it work with both fixed and fluid layouts?</dt>158 -1 <dd>Absolutely!</dd>159 -1 <dt>Can I nest grids inside grids?</dt>160 -1 <dd>Yup, it works fine, but make sure you understand good layout principles,161 -1 so you don't ruin your layout by breaking the invisible grid too often.</dd>162 -1 <dt>What's with the <code>\3a</code> notation for the <code>w1:2</code> etc. classes?</dt>163 -1 <dd>It's a workaround notation since Internet Explorer 6 (and 7, possibly) doesn't support164 -1 the plain backslash escape for class names with colon in them.165 -1 You can of course rename this if you think it's ugly.166 -1 We think it's easier to think of three quarters as <code>3:4</code>.</dd>167 -1 <dt>Isn't the use of dedicated divs for layout semantic noise?168 -1 Aren't you just reinventing tables using divs?</dt>169 -1 <dd>First of all, HTML (with some exceptions like the <code><address></code> tag)170 -1 isn't really semantic, it's <em>structural</em>.171 -1 You can of course argue this until the cows come home, but the main thing172 -1 to keep in mind is that screen readers — which are the closest we get to semantics today —173 -1 have no issue with using divs like this and compared to the workarounds other174 -1 layouts need, we think you'll find this approach simple and refreshing.</dd>175 -1 <dd>The whole point of not using tables for layout is that devices such as screen readers will176 -1 interpret them as <em>data tables</em>, which they are not. They swiftly skip over any divs.177 -1 This is why divs exist in the first place — a semantics-free tag to group things with.</dd>178 -1 <dd>Also, it frees us up to put the content179 -1 in a meaningful order, and makes it easier to add support for things like180 -1 mobile devices.</dd>181 -1 <dd>And, nobody reads class names and expect them to make sense. No, really. ;-)182 -1 </dd>183 -1 <dt>What is the size of the Deco Grid system?</dt>184 -1 <dd>The baseline functionality is two classes (!), plus 16 convenience classes each for position and width.185 -1 After using the YUI CSS compressor, it's <em>714 or 907 bytes</em>, for the 12- and 16-column versions, respectively.</dd>186 -1 <dt>How is the Deco Grid System different from other grid frameworks like Blueprint, 960 Grids, and others?</dt>187 -1 <dd>As we already mentioned, it's smaller. A lot smaller. Less than 1K — vs. 11K (Blueprint), 5.4K (960 Grids), etc.188 -1 We realize that this size comparison isn't entirely fair, since they include lots of non-grid stuff,189 -1 but even when you strip their files of all that, we're smaller.</dd>190 -1 <dd>We believe Deco Grids a lot simpler to understand and use, the naming convention and mental model191 -1 is very very simple, and it arguably degrades better.</dd>192 -1 <dd>It doesn't ship with anything outside of the grid system — font choices, form builders, other unrelated CSS.193 -1 It's built to drop right into your existing CSS code with a minimum amount of fuss.</dd>194 -1 <dd>It's really well-suited for automated layout algorithms for CMSes and other web apps.</dd>195 -1 <dd>It doesn't assume that you always work in pixel-based layouts, like a lot of other frameworks do.</dd>196 -1 <dd>It doesn't need any workarounds/hacks to work reliably in all browsers.</dd>197 -1 <dt>Anything else I need to know?</dt>198 -1 <dd>Never try to combine stuff into the divs that govern the layout.199 -1 Create your own elements inside instead. This makes things much easier and200 -1 very reliable and predictable.</dd>201 -1 </dl>202 -1203 -1 </body>204 -1 </html204 -1 \ No newline at end of file
diff --git a/gapless/example-9-gapless.html b/gapless/example-9-gapless.html
@@ -1,132 +0,0 @@1 -1 <!DOCTYPE html>2 -1 <html>3 -1 <head>4 -1 <meta http-equiv="Content-type" content="text/html; charset=utf-8">5 -1 <title>Deco Grid System</title>6 -1 <style type="text/css" media="screen">7 -1 /* These classes are just here to make the demo have some color/whitespace.8 -1 Not part of the grid system. */9 -1 body { font: 0.825em Helvetica, Arial, sans-serif; }10 -1 * { margin:0; padding: 0; }11 -1 div.row { margin: 1em 0; }12 -1 div.cell {text-align: center; padding: 1em 0; background-color: #ccc; }13 -1 div.even {background-color: #999;}14 -1 h1 { margin: 0 0.5em; letter-spacing: -0.05em; }15 -1 dl { margin:0.5em 2em; }16 -1 dt { font-weight: bold; }17 -1 dd { margin: 0 1em 1em; }18 -1 code { font-weight: normal; }19 -1 /* Uncomment the following to test the fixed-width version: */20 -1 /* body { width: 972px; }21 -1 */</style>22 -123 -1 <link rel="stylesheet" href="decogrids-9-gapless.css" type="text/css" charset="utf-8" />24 -125 -1 </head>26 -127 -128 -1 <body>29 -130 -1 <h1>Basic 9-column grid demo, showing some common combinations.31 -1 Lock page width to 972px for a good fixed version,32 -1 where each cell will be 100px with 8px margins.</h1>33 -134 -1 <div class="row">35 -1 <div class ="cell width-1 position-0">01</div>36 -1 <div class ="cell width-1 position-1 even">02</div>37 -1 <div class ="cell width-1 position-2">03</div>38 -1 <div class ="cell width-1 position-3 even">04</div>39 -1 <div class ="cell width-1 position-4">05</div>40 -1 <div class ="cell width-1 position-5 even">06</div>41 -1 <div class ="cell width-1 position-6">07</div>42 -1 <div class ="cell width-1 position-7 even">08</div>43 -1 <div class ="cell width-1 position-8">09</div>44 -1 </div>45 -146 -1 <div class="row">47 -1 <div class ="cell width-2 position-0">01</div>48 -1 <div class ="cell width-3 position-2 even">02</div>49 -1 <div class ="cell width-2 position-5">03</div>50 -1 <div class ="cell width-2 position-7 even">04</div>51 -1 </div>52 -153 -154 -1 <div class="row">55 -1 <div class ="cell width-2 position-0">01</div>56 -1 <div class ="cell width-5 position-2 even">02</div>57 -1 <div class ="cell width-2 position-7">03</div>58 -1 </div>59 -160 -161 -1 <div class="row">62 -1 <div class ="cell width-3 position-0">01</div>63 -1 <div class ="cell width-3 position-3 even">02</div>64 -1 <div class ="cell width-3 position-6">03</div>65 -1 </div>66 -167 -1 <div class="row">68 -1 <div class ="cell width-4 position-0">01</div>69 -1 <div class ="cell width-5 position-4 even">02</div>70 -1 </div>71 -172 -1 <div class="row">73 -1 <div class ="cell width-3 position-0">01</div>74 -1 <div class ="cell width-6 position-3 even">02</div>75 -1 </div>76 -177 -1 <div class="row">78 -1 <div class ="cell width-9 position-0">01</div>79 -1 </div>80 -181 -1 <h1>Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.82 -1 <br />Not strictly necessary, but included for your use if you want them.</h1>83 -184 -1 <div class="row">85 -1 <div class ="cell width-1:2 position-0">01</div>86 -1 <div class ="cell width-1:2 position-1:2 even">02</div>87 -1 </div>88 -189 -1 <div class="row">90 -1 <div class ="cell width-1:4 position-0">01</div>91 -1 <div class ="cell width-1:4 position-1:4 even">02</div>92 -1 <div class ="cell width-1:4 position-1:2">03</div>93 -1 <div class ="cell width-1:4 position-3:4 even">04</div>94 -1 </div>95 -196 -1 <div class="row">97 -1 <div class ="cell width-1:4 position-0">01</div>98 -1 <div class ="cell width-1:2 position-1:4 even">02</div>99 -1 <div class ="cell width-1:4 position-3:4">04</div>100 -1 </div>101 -1102 -1 <div class="row">103 -1 <div class ="cell width-1:4 position-0">01</div>104 -1 <div class ="cell width-3:4 position-1:4 even">02</div>105 -1 </div>106 -1107 -1 <div class="row">108 -1 <div class ="cell width-3:4 position-0">01</div>109 -1 <div class ="cell width-1:4 position-3:4 even">02</div>110 -1 </div>111 -1112 -1 <h1>Convenience classes for ⅓, ⅔ widths and ⅓, ⅔ positions.113 -1 <br />Not strictly necessary, but included for your use if you want them.</h1>114 -1115 -1 <div class="row">116 -1 <div class ="cell width-1:3 position-0">01</div>117 -1 <div class ="cell width-1:3 position-1:3 even">02</div>118 -1 <div class ="cell width-1:3 position-2:3">03</div>119 -1 </div>120 -1121 -1 <div class="row">122 -1 <div class ="cell width-1:3 position-0">01</div>123 -1 <div class ="cell width-2:3 position-1:3 even">02</div>124 -1 </div>125 -1126 -1 <div class="row">127 -1 <div class ="cell width-2:3 position-0">01</div>128 -1 <div class ="cell width-1:3 position-2:3 even">02</div>129 -1 </div>130 -1131 -1 </body>132 -1 </html132 -1 \ No newline at end of file