compass-grid-plugin 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. data/README.md +45 -29
  2. data/compass-grid-plugin.gemspec +3 -3
  3. data/example/config.rb +26 -27
  4. data/example/example.html +39 -39
  5. data/example/fixed.html +215 -215
  6. data/example/fluid.html +453 -429
  7. data/example/media.html +66 -66
  8. data/example/scss/example-fluid.scss +2 -1
  9. data/example/scss/example.scss +54 -54
  10. data/example/scss/fluid.scss +23 -7
  11. data/example/scss/media.scss +329 -329
  12. data/lib/compass-grid.rb +14 -1
  13. data/lib/compass/grid.rb +6 -6
  14. data/lib/compass/grid/version.rb +1 -1
  15. data/stylesheets/_grid.scss +151 -126
  16. data/stylesheets/grid/_fluid.scss +49 -28
  17. data/stylesheets/grid/fluid/_helpers.scss +14 -0
  18. data/templates/project/manifest.rb +16 -16
  19. data/templates/project/partials/_base.scss +6 -6
  20. data/templates/project/screen.scss +9 -9
  21. metadata +8 -7
data/example/fluid.html CHANGED
@@ -1,430 +1,454 @@
1
- <!doctype html>
2
- <!--[if lt IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
- <!--[if IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
- <!--[if IE 8]> <html class="fluid-no-js lt-ie9" lang="en"> <![endif]-->
5
- <!--[if gt IE 8]><!--> <html class="fluid-no-js" lang="en"> <!--<![endif]-->
6
- <head>
7
- <meta charset="utf-8">
8
-
9
- <title>1KB SCSS Grid Fluid Page</title>
10
- <meta name="description" content="">
11
- <meta name="author" content="">
12
- <meta name="viewport" content="width=device-width,initial-scale=1">
13
-
14
- <link rel="stylesheet" href="css/fluid.css">
15
- </head>
16
-
17
- <body>
18
- <!-- normal -->
19
- <div class="page">
20
- <h2>Fixed</h2>
21
- <div class="row">
22
- <div class="column grid-1">1</div>
23
- <div class="column grid-11">11</div>
24
- </div>
25
- <div class="row">
26
- <div class="column grid-2">2</div>
27
- <div class="column grid-10">10</div>
28
- </div>
29
- <div class="row">
30
- <div class="column grid-3">3</div>
31
- <div class="column grid-9">9</div>
32
- </div>
33
- <div class="row">
34
- <div class="column grid-4">4</div>
35
- <div class="column grid-8">8</div>
36
- </div>
37
- <div class="row">
38
- <div class="column grid-5">5</div>
39
- <div class="column grid-7">7</div>
40
- </div>
41
- <div class="row">
42
- <div class="column grid-6">6</div>
43
- <div class="column grid-6">6</div>
44
- </div>
45
- <div class="row">
46
- <div class="column grid-12">12</div>
47
- </div>
48
- </div>
49
-
50
- <!-- fluid -->
51
- <div class="fluid-page">
52
- <h2>Fluid</h2>
53
- <div class="fluid-row">
54
- <div class="fluid-column fluid-1">1</div>
55
- <div class="fluid-column fluid-11">11</div>
56
- </div>
57
- <div class="fluid-row">
58
- <div class="fluid-column fluid-2">2</div>
59
- <div class="fluid-column fluid-10">10</div>
60
- </div>
61
- <div class="fluid-row">
62
- <div class="fluid-column fluid-3">3</div>
63
- <div class="fluid-column fluid-9">9</div>
64
- </div>
65
- <div class="fluid-row">
66
- <div class="fluid-column fluid-4">4</div>
67
- <div class="fluid-column fluid-8">8</div>
68
- </div>
69
- <div class="fluid-row">
70
- <div class="fluid-column fluid-5">5</div>
71
- <div class="fluid-column fluid-7">7</div>
72
- </div>
73
- <div class="fluid-row">
74
- <div class="fluid-column fluid-6">6</div>
75
- <div class="fluid-column fluid-6">6</div>
76
- </div>
77
- <div class="fluid-row">
78
- <div class="fluid-column fluid-12">12</div>
79
- </div>
80
- </div>
81
-
82
- <!-- fluid nested -->
83
- <div class="fluid-page">
84
- <h2>Fluid Nested</h2>
85
- <div class="fluid-row">
86
- <div class="fluid-column fluid-1">1</div>
87
- <div class="fluid-column fluid-11">11
88
- <div class="fluid-row">
89
- <div class="fluid-column fluid-1">1</div>
90
- <div class="fluid-column fluid-10">10
91
- <div class="fluid-row">
92
- <div class="fluid-column fluid-1">1</div>
93
- <div class="fluid-column fluid-9">9
94
- <div class="fluid-row">
95
- <div class="fluid-column fluid-1">1</div>
96
- <div class="fluid-column fluid-8">8</div>
97
- </div>
98
- </div>
99
- </div>
100
- </div>
101
- </div>
102
- </div>
103
- </div>
104
- <div class="fluid-row">
105
- <div class="fluid-column fluid-2">2
106
- <div class="fluid-row">
107
- <div class="fluid-column fluid-1">1</div>
108
- <div class="fluid-column fluid-1">1</div>
109
- </div>
110
- </div>
111
- <div class="fluid-column fluid-10">10
112
- <div class="fluid-row">
113
- <div class="fluid-column fluid-1">1</div>
114
- <div class="fluid-column fluid-9">9
115
- <div class="fluid-row">
116
- <div class="fluid-column fluid-1">1</div>
117
- <div class="fluid-column fluid-8">8
118
- <div class="fluid-row">
119
- <div class="fluid-column fluid-1">1</div>
120
- <div class="fluid-column fluid-7">7</div>
121
- </div>
122
- </div>
123
- </div>
124
- </div>
125
- </div>
126
- </div>
127
- </div>
128
- <div class="fluid-row">
129
- <div class="fluid-column fluid-3">3
130
- <div class="fluid-row">
131
- <div class="fluid-column fluid-1">1</div>
132
- <div class="fluid-column fluid-2">2
133
- <div class="fluid-row">
134
- <div class="fluid-column fluid-1">1</div>
135
- <div class="fluid-column fluid-1">1</div>
136
- </div>
137
- </div>
138
- </div>
139
- </div>
140
- <div class="fluid-column fluid-9">9
141
- <div class="fluid-row">
142
- <div class="fluid-column fluid-1">1</div>
143
- <div class="fluid-column fluid-8">8
144
- <div class="fluid-row">
145
- <div class="fluid-column fluid-1">1</div>
146
- <div class="fluid-column fluid-7">7
147
- <div class="fluid-row">
148
- <div class="fluid-column fluid-1">1</div>
149
- <div class="fluid-column fluid-6">6</div>
150
- </div>
151
- </div>
152
- </div>
153
- </div>
154
- </div>
155
- </div>
156
- </div>
157
- <div class="fluid-row">
158
- <div class="fluid-column fluid-4">4
159
- <div class="fluid-row">
160
- <div class="fluid-column fluid-1">1</div>
161
- <div class="fluid-column fluid-3">3
162
- <div class="fluid-row">
163
- <div class="fluid-column fluid-1">1</div>
164
- <div class="fluid-column fluid-2">2
165
- <div class="fluid-row">
166
- <div class="fluid-column fluid-1">1</div>
167
- <div class="fluid-column fluid-1">1</div>
168
- </div>
169
- </div>
170
- </div>
171
- </div>
172
- </div>
173
- </div>
174
- <div class="fluid-column fluid-8">8
175
- <div class="fluid-row">
176
- <div class="fluid-column fluid-1">1</div>
177
- <div class="fluid-column fluid-7">7
178
- <div class="fluid-row">
179
- <div class="fluid-column fluid-1">1</div>
180
- <div class="fluid-column fluid-6">6
181
- <div class="fluid-row">
182
- <div class="fluid-column fluid-1">1</div>
183
- <div class="fluid-column fluid-5">5</div>
184
- </div>
185
- </div>
186
- </div>
187
- </div>
188
- </div>
189
- </div>
190
- </div>
191
- <div class="fluid-row">
192
- <div class="fluid-column fluid-5">5
193
- <div class="fluid-row">
194
- <div class="fluid-column fluid-1">1</div>
195
- <div class="fluid-column fluid-4">4
196
- <div class="fluid-row">
197
- <div class="fluid-column fluid-1">1</div>
198
- <div class="fluid-column fluid-3">3
199
- <div class="fluid-row">
200
- <div class="fluid-column fluid-1">1</div>
201
- <div class="fluid-column fluid-2">2</div>
202
- </div>
203
- </div>
204
- </div>
205
- </div>
206
- </div>
207
- </div>
208
- <div class="fluid-column fluid-7">7
209
- <div class="fluid-row">
210
- <div class="fluid-column fluid-1">1</div>
211
- <div class="fluid-column fluid-6">6
212
- <div class="fluid-row">
213
- <div class="fluid-column fluid-1">1</div>
214
- <div class="fluid-column fluid-5">5
215
- <div class="fluid-row">
216
- <div class="fluid-column fluid-1">1</div>
217
- <div class="fluid-column fluid-4">4</div>
218
- </div>
219
- </div>
220
- </div>
221
- </div>
222
- </div>
223
- </div>
224
- </div>
225
- <div class="fluid-row">
226
- <div class="fluid-column fluid-6">6
227
- <div class="fluid-row">
228
- <div class="fluid-column fluid-1">1</div>
229
- <div class="fluid-column fluid-5">5
230
- <div class="fluid-row">
231
- <div class="fluid-column fluid-1">1</div>
232
- <div class="fluid-column fluid-4">4
233
- <div class="fluid-row">
234
- <div class="fluid-column fluid-1">1</div>
235
- <div class="fluid-column fluid-3">3</div>
236
- </div>
237
- </div>
238
- </div>
239
- </div>
240
- </div>
241
- </div>
242
- <div class="fluid-column fluid-6">6
243
- <div class="fluid-row">
244
- <div class="fluid-column fluid-1">1</div>
245
- <div class="fluid-column fluid-5">5
246
- <div class="fluid-row">
247
- <div class="fluid-column fluid-1">1</div>
248
- <div class="fluid-column fluid-4">4
249
- <div class="fluid-row">
250
- <div class="fluid-column fluid-1">1</div>
251
- <div class="fluid-column fluid-3">3</div>
252
- </div>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
- </div>
258
- </div>
259
- <div class="fluid-row">
260
- <div class="fluid-column fluid-12">12</div>
261
- </div>
262
- </div>
263
-
264
- <!-- borders -->
265
- <div class="fluid-page borders">
266
- <h2>Borders</h2>
267
- <div class="fluid-row">
268
- <div class="fluid-column fluid-1">1</div>
269
- <div class="fluid-column fluid-11">11</div>
270
- </div>
271
- <div class="fluid-row">
272
- <div class="fluid-column fluid-2">2</div>
273
- <div class="fluid-column fluid-10">10</div>
274
- </div>
275
- <div class="fluid-row">
276
- <div class="fluid-column fluid-3">3</div>
277
- <div class="fluid-column fluid-9">9</div>
278
- </div>
279
- <div class="fluid-row">
280
- <div class="fluid-column fluid-4">4</div>
281
- <div class="fluid-column fluid-8">8</div>
282
- </div>
283
- <div class="fluid-row">
284
- <div class="fluid-column fluid-5">5</div>
285
- <div class="fluid-column fluid-7">7</div>
286
- </div>
287
- <div class="fluid-row">
288
- <div class="fluid-column fluid-6">6</div>
289
- <div class="fluid-column fluid-6">6</div>
290
- </div>
291
- <div class="fluid-row">
292
- <div class="fluid-column fluid-12">12</div>
293
- </div>
294
- </div>
295
-
296
- <!-- padding -->
297
- <div class="fluid-page padding">
298
- <h2>Padding</h2>
299
- <div class="fluid-row">
300
- <div class="fluid-column fluid-1">1</div>
301
- <div class="fluid-column fluid-11">11</div>
302
- </div>
303
- <div class="fluid-row">
304
- <div class="fluid-column fluid-2">2</div>
305
- <div class="fluid-column fluid-10">10</div>
306
- </div>
307
- <div class="fluid-row">
308
- <div class="fluid-column fluid-3">3</div>
309
- <div class="fluid-column fluid-9">9</div>
310
- </div>
311
- <div class="fluid-row">
312
- <div class="fluid-column fluid-4">4</div>
313
- <div class="fluid-column fluid-8">8</div>
314
- </div>
315
- <div class="fluid-row">
316
- <div class="fluid-column fluid-5">5</div>
317
- <div class="fluid-column fluid-7">7</div>
318
- </div>
319
- <div class="fluid-row">
320
- <div class="fluid-column fluid-6">6</div>
321
- <div class="fluid-column fluid-6">6</div>
322
- </div>
323
- <div class="fluid-row">
324
- <div class="fluid-column fluid-12">12</div>
325
- </div>
326
- </div>
327
-
328
- <!-- fluid-before -->
329
- <div class="fluid-page">
330
- <h2>Offset Before</h2>
331
- <div class="fluid-row">
332
- <div class="fluid-column fluid-10">10</div>
333
- <div class="fluid-column fluid-1 fluid-before-1">1 before</div>
334
- </div>
335
- <div class="fluid-row">
336
- <div class="fluid-column fluid-9">9</div>
337
- <div class="fluid-column fluid-1 fluid-before-2">2 before</div>
338
- </div>
339
- <div class="fluid-row">
340
- <div class="fluid-column fluid-8">8</div>
341
- <div class="fluid-column fluid-1 fluid-before-3">3 before</div>
342
- </div>
343
- <div class="fluid-row">
344
- <div class="fluid-column fluid-7">7</div>
345
- <div class="fluid-column fluid-1 fluid-before-4">4 before</div>
346
- </div>
347
- <div class="fluid-row">
348
- <div class="fluid-column fluid-6">6</div>
349
- <div class="fluid-column fluid-1 fluid-before-5">5 before</div>
350
- </div>
351
- <div class="fluid-row">
352
- <div class="fluid-column fluid-5">5</div>
353
- <div class="fluid-column fluid-1 fluid-before-6">6 before</div>
354
- </div>
355
- <div class="fluid-row">
356
- <div class="fluid-column fluid-4">4</div>
357
- <div class="fluid-column fluid-1 fluid-before-7">7 before</div>
358
- </div>
359
- <div class="fluid-row">
360
- <div class="fluid-column fluid-3">3</div>
361
- <div class="fluid-column fluid-1 fluid-before-8">8 before</div>
362
- </div>
363
- <div class="fluid-row">
364
- <div class="fluid-column fluid-2">2</div>
365
- <div class="fluid-column fluid-1 fluid-before-9">9 before</div>
366
- </div>
367
- <div class="fluid-row">
368
- <div class="fluid-column fluid-1">1</div>
369
- <div class="fluid-column fluid-1 fluid-before-10">10 before</div>
370
- </div>
371
- <div class="fluid-row">
372
- <div class="fluid-column fluid-1 fluid-before-11">11 before</div>
373
- </div>
374
- <div class="fluid-row">
375
- <div class="fluid-column fluid-12">12</div>
376
- </div>
377
- </div>
378
-
379
- <!-- fluid-after -->
380
- <div class="fluid-page">
381
- <h2>Offset After</h2>
382
- <div class="fluid-row">
383
- <div class="fluid-column fluid-1 fluid-after-1">1 after</div>
384
- <div class="fluid-column fluid-10">10</div>
385
- </div>
386
- <div class="fluid-row">
387
- <div class="fluid-column fluid-1 fluid-after-2">2 after</div>
388
- <div class="fluid-column fluid-9">9</div>
389
- </div>
390
- <div class="fluid-row">
391
- <div class="fluid-column fluid-1 fluid-after-3">3 after</div>
392
- <div class="fluid-column fluid-8">8</div>
393
- </div>
394
- <div class="fluid-row">
395
- <div class="fluid-column fluid-1 fluid-after-4">4 after</div>
396
- <div class="fluid-column fluid-7">7</div>
397
- </div>
398
- <div class="fluid-row">
399
- <div class="fluid-column fluid-1 fluid-after-5">5 after</div>
400
- <div class="fluid-column fluid-6">6</div>
401
- </div>
402
- <div class="fluid-row">
403
- <div class="fluid-column fluid-1 fluid-after-6">6 after</div>
404
- <div class="fluid-column fluid-5">5</div>
405
- </div>
406
- <div class="fluid-row">
407
- <div class="fluid-column fluid-1 fluid-after-7">7 after</div>
408
- <div class="fluid-column fluid-4">4</div>
409
- </div>
410
- <div class="fluid-row">
411
- <div class="fluid-column fluid-1 fluid-after-8">8 after</div>
412
- <div class="fluid-column fluid-3">3</div>
413
- </div>
414
- <div class="fluid-row">
415
- <div class="fluid-column fluid-1 fluid-after-9">9 after</div>
416
- <div class="fluid-column fluid-2">2</div>
417
- </div>
418
- <div class="fluid-row">
419
- <div class="fluid-column fluid-1 fluid-after-10">10 after</div>
420
- <div class="fluid-column fluid-1">1</div>
421
- </div>
422
- <div class="fluid-row">
423
- <div class="fluid-column fluid-1 fluid-after-11">11 after</div>
424
- </div>
425
- <div class="fluid-row">
426
- <div class="fluid-column fluid-12">12</div>
427
- </div>
428
- </div>
429
- </body>
1
+ <!doctype html>
2
+ <!--[if lt IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
+ <!--[if IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
+ <!--[if IE 8]> <html class="fluid-no-js lt-ie9" lang="en"> <![endif]-->
5
+ <!--[if gt IE 8]><!--> <html class="fluid-no-js" lang="en"> <!--<![endif]-->
6
+ <head>
7
+ <meta charset="utf-8">
8
+
9
+ <title>1KB SCSS Grid Fluid Page</title>
10
+ <meta name="description" content="">
11
+ <meta name="author" content="">
12
+ <meta name="viewport" content="width=device-width,initial-scale=1">
13
+
14
+ <link rel="stylesheet" href="css/fluid.css">
15
+ </head>
16
+
17
+ <body>
18
+ <!-- normal -->
19
+ <div class="page">
20
+ <h2>Fixed</h2>
21
+ <div class="row">
22
+ <div class="column grid-1">1</div>
23
+ <div class="column grid-11">11</div>
24
+ </div>
25
+ <div class="row">
26
+ <div class="column grid-2">2</div>
27
+ <div class="column grid-10">10</div>
28
+ </div>
29
+ <div class="row">
30
+ <div class="column grid-3">3</div>
31
+ <div class="column grid-9">9</div>
32
+ </div>
33
+ <div class="row">
34
+ <div class="column grid-4">4</div>
35
+ <div class="column grid-8">8</div>
36
+ </div>
37
+ <div class="row">
38
+ <div class="column grid-5">5</div>
39
+ <div class="column grid-7">7</div>
40
+ </div>
41
+ <div class="row">
42
+ <div class="column grid-6">6</div>
43
+ <div class="column grid-6">6</div>
44
+ </div>
45
+ <div class="row">
46
+ <div class="column grid-12">12</div>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- fluid -->
51
+ <div class="fluid-page">
52
+ <h2>Fluid</h2>
53
+ <div class="fluid-row">
54
+ <div class="fluid-column fluid-1">1</div>
55
+ <div class="fluid-column fluid-11">11</div>
56
+ </div>
57
+ <div class="fluid-row">
58
+ <div class="fluid-column fluid-2">2</div>
59
+ <div class="fluid-column fluid-10">10</div>
60
+ </div>
61
+ <div class="fluid-row">
62
+ <div class="fluid-column fluid-3">3</div>
63
+ <div class="fluid-column fluid-9">9</div>
64
+ </div>
65
+ <div class="fluid-row">
66
+ <div class="fluid-column fluid-4">4</div>
67
+ <div class="fluid-column fluid-8">8</div>
68
+ </div>
69
+ <div class="fluid-row">
70
+ <div class="fluid-column fluid-5">5</div>
71
+ <div class="fluid-column fluid-7">7</div>
72
+ </div>
73
+ <div class="fluid-row">
74
+ <div class="fluid-column fluid-6">6</div>
75
+ <div class="fluid-column fluid-6">6</div>
76
+ </div>
77
+ <div class="fluid-row">
78
+ <div class="fluid-column fluid-12">12</div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- fluid corrected -->
83
+ <div class="fluid-page corrected">
84
+ <h2>Fluid Corrected</h2>
85
+ <div class="fluid-row">
86
+ <div class="fluid-column fluid-1">1</div>
87
+ <div class="fluid-column fluid-11">11
88
+ <div class="fluid-row">
89
+ <div class="fluid-column fluid-1">1</div>
90
+ <div class="fluid-column fluid-10">10
91
+ <div class="fluid-row">
92
+ <div class="fluid-column fluid-1">1</div>
93
+ <div class="fluid-column fluid-9">9
94
+ <div class="fluid-row">
95
+ <div class="fluid-column fluid-1">1</div>
96
+ <div class="fluid-column fluid-8">8</div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- fluid nested -->
107
+ <div class="fluid-page">
108
+ <h2>Fluid Nested</h2>
109
+ <div class="fluid-row">
110
+ <div class="fluid-column fluid-1">1</div>
111
+ <div class="fluid-column fluid-11">11
112
+ <div class="fluid-row">
113
+ <div class="fluid-column fluid-1">1</div>
114
+ <div class="fluid-column fluid-10">10
115
+ <div class="fluid-row">
116
+ <div class="fluid-column fluid-1">1</div>
117
+ <div class="fluid-column fluid-9">9
118
+ <div class="fluid-row">
119
+ <div class="fluid-column fluid-1">1</div>
120
+ <div class="fluid-column fluid-8">8</div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <div class="fluid-row">
129
+ <div class="fluid-column fluid-2">2
130
+ <div class="fluid-row">
131
+ <div class="fluid-column fluid-1">1</div>
132
+ <div class="fluid-column fluid-1">1</div>
133
+ </div>
134
+ </div>
135
+ <div class="fluid-column fluid-10">10
136
+ <div class="fluid-row">
137
+ <div class="fluid-column fluid-1">1</div>
138
+ <div class="fluid-column fluid-9">9
139
+ <div class="fluid-row">
140
+ <div class="fluid-column fluid-1">1</div>
141
+ <div class="fluid-column fluid-8">8
142
+ <div class="fluid-row">
143
+ <div class="fluid-column fluid-1">1</div>
144
+ <div class="fluid-column fluid-7">7</div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ <div class="fluid-row">
153
+ <div class="fluid-column fluid-3">3
154
+ <div class="fluid-row">
155
+ <div class="fluid-column fluid-1">1</div>
156
+ <div class="fluid-column fluid-2">2
157
+ <div class="fluid-row">
158
+ <div class="fluid-column fluid-1">1</div>
159
+ <div class="fluid-column fluid-1">1</div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="fluid-column fluid-9">9
165
+ <div class="fluid-row">
166
+ <div class="fluid-column fluid-1">1</div>
167
+ <div class="fluid-column fluid-8">8
168
+ <div class="fluid-row">
169
+ <div class="fluid-column fluid-1">1</div>
170
+ <div class="fluid-column fluid-7">7
171
+ <div class="fluid-row">
172
+ <div class="fluid-column fluid-1">1</div>
173
+ <div class="fluid-column fluid-6">6</div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ <div class="fluid-row">
182
+ <div class="fluid-column fluid-4">4
183
+ <div class="fluid-row">
184
+ <div class="fluid-column fluid-1">1</div>
185
+ <div class="fluid-column fluid-3">3
186
+ <div class="fluid-row">
187
+ <div class="fluid-column fluid-1">1</div>
188
+ <div class="fluid-column fluid-2">2
189
+ <div class="fluid-row">
190
+ <div class="fluid-column fluid-1">1</div>
191
+ <div class="fluid-column fluid-1">1</div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div class="fluid-column fluid-8">8
199
+ <div class="fluid-row">
200
+ <div class="fluid-column fluid-1">1</div>
201
+ <div class="fluid-column fluid-7">7
202
+ <div class="fluid-row">
203
+ <div class="fluid-column fluid-1">1</div>
204
+ <div class="fluid-column fluid-6">6
205
+ <div class="fluid-row">
206
+ <div class="fluid-column fluid-1">1</div>
207
+ <div class="fluid-column fluid-5">5</div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ <div class="fluid-row">
216
+ <div class="fluid-column fluid-5">5
217
+ <div class="fluid-row">
218
+ <div class="fluid-column fluid-1">1</div>
219
+ <div class="fluid-column fluid-4">4
220
+ <div class="fluid-row">
221
+ <div class="fluid-column fluid-1">1</div>
222
+ <div class="fluid-column fluid-3">3
223
+ <div class="fluid-row">
224
+ <div class="fluid-column fluid-1">1</div>
225
+ <div class="fluid-column fluid-2">2</div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <div class="fluid-column fluid-7">7
233
+ <div class="fluid-row">
234
+ <div class="fluid-column fluid-1">1</div>
235
+ <div class="fluid-column fluid-6">6
236
+ <div class="fluid-row">
237
+ <div class="fluid-column fluid-1">1</div>
238
+ <div class="fluid-column fluid-5">5
239
+ <div class="fluid-row">
240
+ <div class="fluid-column fluid-1">1</div>
241
+ <div class="fluid-column fluid-4">4</div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ <div class="fluid-row">
250
+ <div class="fluid-column fluid-6">6
251
+ <div class="fluid-row">
252
+ <div class="fluid-column fluid-1">1</div>
253
+ <div class="fluid-column fluid-5">5
254
+ <div class="fluid-row">
255
+ <div class="fluid-column fluid-1">1</div>
256
+ <div class="fluid-column fluid-4">4
257
+ <div class="fluid-row">
258
+ <div class="fluid-column fluid-1">1</div>
259
+ <div class="fluid-column fluid-3">3</div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div class="fluid-column fluid-6">6
267
+ <div class="fluid-row">
268
+ <div class="fluid-column fluid-1">1</div>
269
+ <div class="fluid-column fluid-5">5
270
+ <div class="fluid-row">
271
+ <div class="fluid-column fluid-1">1</div>
272
+ <div class="fluid-column fluid-4">4
273
+ <div class="fluid-row">
274
+ <div class="fluid-column fluid-1">1</div>
275
+ <div class="fluid-column fluid-3">3</div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ <div class="fluid-row">
284
+ <div class="fluid-column fluid-12">12</div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- borders -->
289
+ <div class="fluid-page borders">
290
+ <h2>Borders</h2>
291
+ <div class="fluid-row">
292
+ <div class="fluid-column fluid-1">1</div>
293
+ <div class="fluid-column fluid-11">11</div>
294
+ </div>
295
+ <div class="fluid-row">
296
+ <div class="fluid-column fluid-2">2</div>
297
+ <div class="fluid-column fluid-10">10</div>
298
+ </div>
299
+ <div class="fluid-row">
300
+ <div class="fluid-column fluid-3">3</div>
301
+ <div class="fluid-column fluid-9">9</div>
302
+ </div>
303
+ <div class="fluid-row">
304
+ <div class="fluid-column fluid-4">4</div>
305
+ <div class="fluid-column fluid-8">8</div>
306
+ </div>
307
+ <div class="fluid-row">
308
+ <div class="fluid-column fluid-5">5</div>
309
+ <div class="fluid-column fluid-7">7</div>
310
+ </div>
311
+ <div class="fluid-row">
312
+ <div class="fluid-column fluid-6">6</div>
313
+ <div class="fluid-column fluid-6">6</div>
314
+ </div>
315
+ <div class="fluid-row">
316
+ <div class="fluid-column fluid-12">12</div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- padding -->
321
+ <div class="fluid-page padding">
322
+ <h2>Padding</h2>
323
+ <div class="fluid-row">
324
+ <div class="fluid-column fluid-1">1</div>
325
+ <div class="fluid-column fluid-11">11</div>
326
+ </div>
327
+ <div class="fluid-row">
328
+ <div class="fluid-column fluid-2">2</div>
329
+ <div class="fluid-column fluid-10">10</div>
330
+ </div>
331
+ <div class="fluid-row">
332
+ <div class="fluid-column fluid-3">3</div>
333
+ <div class="fluid-column fluid-9">9</div>
334
+ </div>
335
+ <div class="fluid-row">
336
+ <div class="fluid-column fluid-4">4</div>
337
+ <div class="fluid-column fluid-8">8</div>
338
+ </div>
339
+ <div class="fluid-row">
340
+ <div class="fluid-column fluid-5">5</div>
341
+ <div class="fluid-column fluid-7">7</div>
342
+ </div>
343
+ <div class="fluid-row">
344
+ <div class="fluid-column fluid-6">6</div>
345
+ <div class="fluid-column fluid-6">6</div>
346
+ </div>
347
+ <div class="fluid-row">
348
+ <div class="fluid-column fluid-12">12</div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- fluid-before -->
353
+ <div class="fluid-page">
354
+ <h2>Offset Before</h2>
355
+ <div class="fluid-row">
356
+ <div class="fluid-column fluid-10">10</div>
357
+ <div class="fluid-column fluid-1 fluid-before-1">1 before</div>
358
+ </div>
359
+ <div class="fluid-row">
360
+ <div class="fluid-column fluid-9">9</div>
361
+ <div class="fluid-column fluid-1 fluid-before-2">2 before</div>
362
+ </div>
363
+ <div class="fluid-row">
364
+ <div class="fluid-column fluid-8">8</div>
365
+ <div class="fluid-column fluid-1 fluid-before-3">3 before</div>
366
+ </div>
367
+ <div class="fluid-row">
368
+ <div class="fluid-column fluid-7">7</div>
369
+ <div class="fluid-column fluid-1 fluid-before-4">4 before</div>
370
+ </div>
371
+ <div class="fluid-row">
372
+ <div class="fluid-column fluid-6">6</div>
373
+ <div class="fluid-column fluid-1 fluid-before-5">5 before</div>
374
+ </div>
375
+ <div class="fluid-row">
376
+ <div class="fluid-column fluid-5">5</div>
377
+ <div class="fluid-column fluid-1 fluid-before-6">6 before</div>
378
+ </div>
379
+ <div class="fluid-row">
380
+ <div class="fluid-column fluid-4">4</div>
381
+ <div class="fluid-column fluid-1 fluid-before-7">7 before</div>
382
+ </div>
383
+ <div class="fluid-row">
384
+ <div class="fluid-column fluid-3">3</div>
385
+ <div class="fluid-column fluid-1 fluid-before-8">8 before</div>
386
+ </div>
387
+ <div class="fluid-row">
388
+ <div class="fluid-column fluid-2">2</div>
389
+ <div class="fluid-column fluid-1 fluid-before-9">9 before</div>
390
+ </div>
391
+ <div class="fluid-row">
392
+ <div class="fluid-column fluid-1">1</div>
393
+ <div class="fluid-column fluid-1 fluid-before-10">10 before</div>
394
+ </div>
395
+ <div class="fluid-row">
396
+ <div class="fluid-column fluid-1 fluid-before-11">11 before</div>
397
+ </div>
398
+ <div class="fluid-row">
399
+ <div class="fluid-column fluid-12">12</div>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- fluid-after -->
404
+ <div class="fluid-page">
405
+ <h2>Offset After</h2>
406
+ <div class="fluid-row">
407
+ <div class="fluid-column fluid-1 fluid-after-1">1 after</div>
408
+ <div class="fluid-column fluid-10">10</div>
409
+ </div>
410
+ <div class="fluid-row">
411
+ <div class="fluid-column fluid-1 fluid-after-2">2 after</div>
412
+ <div class="fluid-column fluid-9">9</div>
413
+ </div>
414
+ <div class="fluid-row">
415
+ <div class="fluid-column fluid-1 fluid-after-3">3 after</div>
416
+ <div class="fluid-column fluid-8">8</div>
417
+ </div>
418
+ <div class="fluid-row">
419
+ <div class="fluid-column fluid-1 fluid-after-4">4 after</div>
420
+ <div class="fluid-column fluid-7">7</div>
421
+ </div>
422
+ <div class="fluid-row">
423
+ <div class="fluid-column fluid-1 fluid-after-5">5 after</div>
424
+ <div class="fluid-column fluid-6">6</div>
425
+ </div>
426
+ <div class="fluid-row">
427
+ <div class="fluid-column fluid-1 fluid-after-6">6 after</div>
428
+ <div class="fluid-column fluid-5">5</div>
429
+ </div>
430
+ <div class="fluid-row">
431
+ <div class="fluid-column fluid-1 fluid-after-7">7 after</div>
432
+ <div class="fluid-column fluid-4">4</div>
433
+ </div>
434
+ <div class="fluid-row">
435
+ <div class="fluid-column fluid-1 fluid-after-8">8 after</div>
436
+ <div class="fluid-column fluid-3">3</div>
437
+ </div>
438
+ <div class="fluid-row">
439
+ <div class="fluid-column fluid-1 fluid-after-9">9 after</div>
440
+ <div class="fluid-column fluid-2">2</div>
441
+ </div>
442
+ <div class="fluid-row">
443
+ <div class="fluid-column fluid-1 fluid-after-10">10 after</div>
444
+ <div class="fluid-column fluid-1">1</div>
445
+ </div>
446
+ <div class="fluid-row">
447
+ <div class="fluid-column fluid-1 fluid-after-11">11 after</div>
448
+ </div>
449
+ <div class="fluid-row">
450
+ <div class="fluid-column fluid-12">12</div>
451
+ </div>
452
+ </div>
453
+ </body>
430
454
  </html>