grid.html (11335B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 6 7 <html lang="en"> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title>Blueprint Grid Tests</title> 11 12 <!-- Framework CSS --> 13 <link 14 rel="stylesheet" 15 href="screen.css" 16 type="text/css" 17 media="screen, projection" 18 /> 19 <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 20 <!--[if IE 21 ]><link 22 rel="stylesheet" 23 href="ie.css" 24 type="text/css" 25 media="screen, projection" 26 /><![endif]--> 27 </head> 28 <body> 29 <div class="container showgrid"> 30 <h1>Blueprint Tests: grid.css</h1> 31 32 <div class="span-8"> 33 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 34 </div> 35 <div class="span-8"> 36 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 37 </div> 38 <div class="span-8 last"> 39 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 40 </div> 41 42 <div class="span-6 append-1"> 43 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 44 </div> 45 <div class="span-6 append-2"> 46 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 47 </div> 48 <div class="span-6 append-3 last"> 49 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 50 </div> 51 52 <div class="span-6 prepend-1"> 53 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 54 </div> 55 <div class="span-6 prepend-2"> 56 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 57 </div> 58 <div class="span-6 prepend-3 last"> 59 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 60 </div> 61 <hr /> 62 63 <div class="span-12 border"> 64 <p> 65 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 66 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 67 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 68 aliquip ex ea commodo consequat. Duis aute irure dolor in 69 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 70 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 71 culpa qui officia deserunt mollit anim id est laborum. 72 </p> 73 </div> 74 <div class="span-12 last"> 75 <p> 76 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 77 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 78 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 79 aliquip ex ea commodo consequat. Duis aute irure dolor in 80 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 81 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 82 culpa qui officia deserunt mollit anim id est laborum. 83 </p> 84 </div> 85 <hr /> 86 87 <div class="span-1 prepend-1"><p>1</p></div> 88 <div class="span-1 prepend-2"><p>2</p></div> 89 <div class="span-1 prepend-3"><p>3</p></div> 90 <div class="span-1 prepend-4"><p>4</p></div> 91 <div class="span-1 prepend-5"><p>5</p></div> 92 <div class="span-1 prepend-3 last"><p>3</p></div> 93 94 <div class="span-1 append-1"><p>1</p></div> 95 <div class="span-1 append-2"><p>2</p></div> 96 <div class="span-1 append-3"><p>3</p></div> 97 <div class="span-1 append-4"><p>4</p></div> 98 <div class="span-1 append-5"><p>5</p></div> 99 <div class="span-1 append-3 last"><p>3</p></div> 100 101 <div class="span-1 border"><p>1</p></div> 102 <div class="span-1 border"><p>2</p></div> 103 <div class="span-1 border"><p>3</p></div> 104 <div class="span-1 border"><p>4</p></div> 105 <div class="span-1 border"><p>5</p></div> 106 <div class="span-1 border"><p>6</p></div> 107 <div class="span-1 border"><p>7</p></div> 108 <div class="span-1 border"><p>8</p></div> 109 <div class="span-1 border"><p>9</p></div> 110 <div class="span-1 border"><p>10</p></div> 111 <div class="span-1 border"><p>11</p></div> 112 <div class="span-1 border"><p>12</p></div> 113 <div class="span-1 border"><p>13</p></div> 114 <div class="span-1 border"><p>14</p></div> 115 <div class="span-1 border"><p>15</p></div> 116 <div class="span-1 border"><p>16</p></div> 117 <div class="span-1 border"><p>17</p></div> 118 <div class="span-1 border"><p>18</p></div> 119 <div class="span-1 border"><p>19</p></div> 120 <div class="span-1 border"><p>20</p></div> 121 <div class="span-1 border"><p>21</p></div> 122 <div class="span-1 border"><p>22</p></div> 123 <div class="span-1 border"><p>23</p></div> 124 <div class="span-1 last"><p>24</p></div> 125 126 <div class="span-4"><p>1</p></div> 127 <div class="span-4"><p>2</p></div> 128 <div class="span-4"><p>3</p></div> 129 <div class="span-4"><p>4</p></div> 130 <div class="span-4"><p>5</p></div> 131 <div class="span-4 last"><p>6</p></div> 132 133 <div class="prepend-23 span-1 last"><p>24</p></div> 134 135 <div class="prepend-1 span-1"><p>2</p></div> 136 <div class="prepend-20 span-1 append-1 last"><p>23</p></div> 137 <hr /> 138 139 <div class="span-24"> 140 <p> 141 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 142 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 143 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 144 aliquip ex ea commodo consequat. Duis aute irure dolor in 145 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 146 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 147 culpa qui officia deserunt mollit anim id est laborum. 148 </p> 149 </div> 150 151 <div class="span-12"> 152 <div class="span-6"> 153 <p> 154 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 155 eiusmod. 156 </p> 157 </div> 158 159 <div class="span-6 last"> 160 <p> 161 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 162 eiusmod tempor incididunt ut labore et dolore magna aliqua. 163 </p> 164 </div> 165 166 <div class="span-12 last"> 167 <p> 168 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 169 eiusmod tempor incididunt ut labore et dolore magna aliqua. 170 </p> 171 </div> 172 </div> 173 174 <div class="span-12 last"> 175 <div class="span-6"> 176 <p> 177 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 178 eiusmod. 179 </p> 180 </div> 181 182 <div class="span-6 last"> 183 <p> 184 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 185 eiusmod tempor incididunt ut labore et dolore magna aliqua. 186 </p> 187 </div> 188 189 <div class="span-12 last"> 190 <p> 191 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 192 eiusmod tempor incididunt ut labore et dolore magna aliqua. 193 </p> 194 </div> 195 </div> 196 197 <div class="span-14 prepend-5 append-5 last"> 198 <p> 199 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 200 eiusmod tempor incididunt ut labore et dolore magna aliqua. 201 </p> 202 </div> 203 <hr /> 204 205 <div class="span-12"> 206 <h5>TESTING .PUSH-1 TO .PUSH-5</h5> 207 208 <div class="span-2"><img src="test-small.jpg" class="push-1" /></div> 209 <div class="span-10 last"> 210 <p> 211 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 212 eiusmod tempor incididunt ut labore et dolore magna aliqua. 213 </p> 214 </div> 215 216 <div class="span-2"><img src="test-small.jpg" class="push-2" /></div> 217 <div class="span-10 last"> 218 <p> 219 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 220 eiusmod tempor incididunt ut labore et dolore magna aliqua. 221 </p> 222 </div> 223 224 <div class="span-2"><img src="test-small.jpg" class="push-3" /></div> 225 <div class="span-10 last"> 226 <p> 227 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 228 eiusmod tempor incididunt ut labore et dolore magna aliqua. 229 </p> 230 </div> 231 232 <div class="span-2"><img src="test-small.jpg" class="push-4" /></div> 233 <div class="span-10 last"> 234 <p> 235 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 236 eiusmod tempor incididunt ut labore et dolore magna aliqua. 237 </p> 238 </div> 239 240 <div class="span-2"><img src="test-small.jpg" class="push-5" /></div> 241 <div class="span-10 last"> 242 <p> 243 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 244 eiusmod tempor incididunt ut labore et dolore magna aliqua. 245 </p> 246 </div> 247 </div> 248 249 <div class="span-12 last"> 250 <h5>TESTING .PULL-1 TO .PULL-5</h5> 251 252 <div class="span-10"> 253 <p> 254 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 255 eiusmod tempor incididunt ut labore et dolore magna aliqua. 256 </p> 257 </div> 258 <div class="span-2 last"> 259 <img src="test-small.jpg" class="top pull-1" /> 260 </div> 261 262 <div class="span-10"> 263 <p> 264 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 265 eiusmod tempor incididunt ut labore et dolore magna aliqua. 266 </p> 267 </div> 268 <div class="span-2 last"> 269 <img src="test-small.jpg" class="top pull-2" /> 270 </div> 271 272 <div class="span-10"> 273 <p> 274 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 275 eiusmod tempor incididunt ut labore et dolore magna aliqua. 276 </p> 277 </div> 278 <div class="span-2 last"> 279 <img src="test-small.jpg" class="top pull-3" /> 280 </div> 281 282 <div class="span-10"> 283 <p> 284 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 285 eiusmod tempor incididunt ut labore et dolore magna aliqua. 286 </p> 287 </div> 288 <div class="span-2 last"> 289 <img src="test-small.jpg" class="top pull-4" /> 290 </div> 291 292 <div class="span-10"> 293 <p> 294 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 295 eiusmod tempor incididunt ut labore et dolore magna aliqua. 296 </p> 297 </div> 298 <div class="span-2 last"> 299 <img src="test-small.jpg" class="top pull-5" /> 300 </div> 301 </div> 302 303 <div class="span-24"> 304 <p> 305 <a href="http://validator.w3.org/check?uri=referer"> 306 <img 307 src="valid.png" 308 alt="Valid HTML 4.01 Strict" 309 height="31" 310 width="88" 311 class="bottom" 312 /></a> 313 </p> 314 </div> 315 </div> 316 </body> 317 </html>