compass-grid-plugin 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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>