compass-grid-plugin 0.0.1 → 0.0.2
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.
- data/.gitignore +4 -7
- data/example/config.rb +0 -1
- data/example/example.html +1 -1
- data/example/{test.html → fixed.html} +3 -3
- data/example/fluid.html +430 -0
- data/example/scss/example.scss +1 -1
- data/example/scss/{test.scss → fixed.scss} +1 -5
- data/example/scss/{percentage.scss → fluid.scss} +0 -16
- data/example/scss/media.scss +2 -19
- data/lib/compass-grid.rb +1 -1
- data/lib/compass/grid/version.rb +1 -1
- data/stylesheets/grid/_fluid.scss +8 -3
- metadata +6 -10
- data/example/css/example.css +0 -97
- data/example/css/media.css +0 -618
- data/example/css/percentage.css +0 -544
- data/example/css/test.css +0 -113
- data/example/percentage.html +0 -430
data/.gitignore
CHANGED
data/example/config.rb
CHANGED
data/example/example.html
CHANGED
@@ -6,18 +6,18 @@
|
|
6
6
|
<head>
|
7
7
|
<meta charset="utf-8">
|
8
8
|
|
9
|
-
<title>1KB SCSS Grid
|
9
|
+
<title>1KB SCSS Grid Fixed Grid</title>
|
10
10
|
<meta name="description" content="">
|
11
11
|
<meta name="author" content="">
|
12
12
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
13
13
|
|
14
|
-
<link rel="stylesheet" href="css/
|
14
|
+
<link rel="stylesheet" href="css/fixed.css">
|
15
15
|
</head>
|
16
16
|
|
17
17
|
<body>
|
18
18
|
<!-- normal -->
|
19
19
|
<div class="page">
|
20
|
-
<h2>
|
20
|
+
<h2>Fixed</h2>
|
21
21
|
<div class="row">
|
22
22
|
<div class="column grid-1">1</div>
|
23
23
|
<div class="column grid-11">11</div>
|
data/example/fluid.html
ADDED
@@ -0,0 +1,430 @@
|
|
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>
|
430
|
+
</html>
|