compass-grid-plugin 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore CHANGED
@@ -1,8 +1,5 @@
1
1
 
2
- /project.sublime-project
3
- /project.sublime-workspace
4
- /test/.sass-cache
5
- /test/css/test.css
6
- /test/css/example.css
7
- /compass-grid-0.0.1.gem
8
- /compass-grid-plugin-0.0.1.gem
2
+ *.sublime-*
3
+ *.sass-cache
4
+ *.css
5
+ *.gem
@@ -1,5 +1,4 @@
1
1
  # Require any additional compass plugins here.
2
- require 'compass-h5bp'
3
2
  require 'compass-grid'
4
3
 
5
4
  # Set this to the root of your project when deployed:
@@ -11,7 +11,7 @@
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/test.css">
14
+ <link rel="stylesheet" href="css/example.css">
15
15
  </head>
16
16
 
17
17
  <body>
@@ -6,18 +6,18 @@
6
6
  <head>
7
7
  <meta charset="utf-8">
8
8
 
9
- <title>1KB SCSS Grid Test Page</title>
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/test.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>Normal</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>
@@ -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>