compass-grid-plugin 0.0.1
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 +8 -0
- data/README.md +88 -0
- data/compass-grid-plugin.gemspec +21 -0
- data/example/config.rb +27 -0
- data/example/css/example.css +97 -0
- data/example/css/media.css +618 -0
- data/example/css/percentage.css +544 -0
- data/example/css/test.css +113 -0
- data/example/example.html +40 -0
- data/example/i/dino-1.jpg +0 -0
- data/example/i/dino-2.png +0 -0
- data/example/media.html +67 -0
- data/example/percentage.html +430 -0
- data/example/scss/example.scss +55 -0
- data/example/scss/media.scss +347 -0
- data/example/scss/percentage.scss +68 -0
- data/example/scss/test.scss +30 -0
- data/example/test.html +216 -0
- data/lib/compass-grid.rb +5 -0
- data/lib/compass/grid.rb +7 -0
- data/lib/compass/grid/version.rb +5 -0
- data/stylesheets/_grid.scss +127 -0
- data/stylesheets/grid/_fluid.scss +131 -0
- data/templates/project/manifest.rb +17 -0
- data/templates/project/partials/_base.scss +7 -0
- data/templates/project/screen.scss +9 -0
- metadata +89 -0
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
// import the grid
|
|
2
|
+
@import "grid";
|
|
3
|
+
@include grid-css;
|
|
4
|
+
|
|
5
|
+
// establishes page width and centers
|
|
6
|
+
#container {
|
|
7
|
+
@include grid-page;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// main page sections
|
|
11
|
+
[role="main"] {
|
|
12
|
+
@include grid-row(true); //true indicates a row is directly inside a page
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// header and footer don't have columns in this example
|
|
16
|
+
#container > header, #container > footer {
|
|
17
|
+
margin: 0 $grid-gutter-width/2; // margins, like full-width columns
|
|
18
|
+
border: 1px solid black;
|
|
19
|
+
margin-bottom: $grid-gutter-width;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// side columns
|
|
23
|
+
#left-column, #right-column {
|
|
24
|
+
@include grid-column(3, -2px); //3 columns wide
|
|
25
|
+
border: 1px solid red;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// main column
|
|
29
|
+
#main-column {
|
|
30
|
+
@include grid-column(9); //9 columns wide
|
|
31
|
+
|
|
32
|
+
// sections in the main column are rows
|
|
33
|
+
> section {
|
|
34
|
+
@include grid-row;
|
|
35
|
+
margin-bottom: $grid-gutter-width;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// hero sections don't have columns in this example
|
|
39
|
+
> section.hero {
|
|
40
|
+
border: 1px solid black;
|
|
41
|
+
margin-left: 0;
|
|
42
|
+
margin-right: 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// center column
|
|
47
|
+
#content {
|
|
48
|
+
@include grid-column(6, -2px); //6 columns wide
|
|
49
|
+
border: 1px solid blue;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// add a clearfix rule, requires compass
|
|
53
|
+
// add a clearfix rule, requires compass
|
|
54
|
+
@import "compass/utilities/general/clearfix";
|
|
55
|
+
.clearfix { @include pie-clearfix; }
|
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
// H5BP
|
|
2
|
+
@import "h5bp";
|
|
3
|
+
@include h5bp-display;
|
|
4
|
+
@include h5bp-base;
|
|
5
|
+
//@include h5bp-selection;
|
|
6
|
+
@include h5bp-links;
|
|
7
|
+
@include h5bp-typography;
|
|
8
|
+
@include h5bp-lists;
|
|
9
|
+
@include h5bp-embeds;
|
|
10
|
+
@include h5bp-figures;
|
|
11
|
+
@include h5bp-forms;
|
|
12
|
+
@include h5bp-tables;
|
|
13
|
+
|
|
14
|
+
// import the grid
|
|
15
|
+
@import "grid";
|
|
16
|
+
@import "grid/fluid";
|
|
17
|
+
@include grid-css;
|
|
18
|
+
@include fluid-css;
|
|
19
|
+
|
|
20
|
+
// generic styles
|
|
21
|
+
.float-left, .float-right { margin-bottom: ($grid-gutter-width / 2); }
|
|
22
|
+
.float-left { float: left; margin-right: ($grid-gutter-width / 2); }
|
|
23
|
+
.float-right { float: right; margin-left: ($grid-gutter-width / 2); }
|
|
24
|
+
|
|
25
|
+
// set up main layout
|
|
26
|
+
header, #main, footer {
|
|
27
|
+
@include grid-page();
|
|
28
|
+
}
|
|
29
|
+
header, footer {
|
|
30
|
+
width: grid-column-width(12);
|
|
31
|
+
}
|
|
32
|
+
header {
|
|
33
|
+
background-color: blue;
|
|
34
|
+
height: grid-column-width(1.5)
|
|
35
|
+
}
|
|
36
|
+
footer {
|
|
37
|
+
background-color: #ccc;
|
|
38
|
+
}
|
|
39
|
+
.left-column {
|
|
40
|
+
@include grid-column(3);
|
|
41
|
+
}
|
|
42
|
+
.main-column {
|
|
43
|
+
@include grid-column(9);
|
|
44
|
+
section {
|
|
45
|
+
@include grid-row();
|
|
46
|
+
}
|
|
47
|
+
section.intro {
|
|
48
|
+
margin: 0;
|
|
49
|
+
}
|
|
50
|
+
article {
|
|
51
|
+
@include grid-column(6);
|
|
52
|
+
}
|
|
53
|
+
aside {
|
|
54
|
+
@include grid-column(3);
|
|
55
|
+
.box img {
|
|
56
|
+
width: grid-column-width(3);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
//-----------------------------------
|
|
62
|
+
// Responsive
|
|
63
|
+
//-----------------------------------
|
|
64
|
+
// Old/Small Android
|
|
65
|
+
// 0 to 320px
|
|
66
|
+
// 3 columns
|
|
67
|
+
@media only screen and (min-width: 0px) {
|
|
68
|
+
.measure { background-color: red; }
|
|
69
|
+
header, #main, footer {
|
|
70
|
+
@include fluid-page();
|
|
71
|
+
}
|
|
72
|
+
header, footer {
|
|
73
|
+
max-width: none;
|
|
74
|
+
width: auto;
|
|
75
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(4, $grid-gutter-width));
|
|
76
|
+
}
|
|
77
|
+
.left-column {
|
|
78
|
+
@include fluid-column(4, $parent: 4);
|
|
79
|
+
}
|
|
80
|
+
.main-column {
|
|
81
|
+
@include fluid-column(4, $parent: 4);
|
|
82
|
+
section {
|
|
83
|
+
@include fluid-row();
|
|
84
|
+
}
|
|
85
|
+
section.intro {
|
|
86
|
+
margin: 0;
|
|
87
|
+
}
|
|
88
|
+
article {
|
|
89
|
+
@include fluid-column(4, $parent: 4);
|
|
90
|
+
|
|
91
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(4)); }
|
|
92
|
+
.float-left { float: none; margin-right: 0; }
|
|
93
|
+
.float-right { float: none; margin-left: 0; }
|
|
94
|
+
img.grid-3 { @include fluid(4, $parent: 4, $parent-plus: -$grid-gutter-width); }
|
|
95
|
+
}
|
|
96
|
+
aside {
|
|
97
|
+
@include fluid-column(4, $parent: 4);
|
|
98
|
+
.box img {
|
|
99
|
+
width: fluid-column-width(4, $parent: 4, $parent-plus: -$grid-gutter-width);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// iPhone
|
|
106
|
+
// Old/Small Android (landscape)
|
|
107
|
+
// 320px to 480px
|
|
108
|
+
// 4 to 6 columns
|
|
109
|
+
@media only screen and (min-width: 320px) {
|
|
110
|
+
.measure { background-color: orange; }
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// Most Android Phones
|
|
114
|
+
// iPhone (landscape)
|
|
115
|
+
// 480px to 540px
|
|
116
|
+
// 6 to 7 columns
|
|
117
|
+
@media only screen and (min-width: 480px) {
|
|
118
|
+
.measure { background-color: yellow; }
|
|
119
|
+
header, #main, footer {
|
|
120
|
+
@include fluid-page();
|
|
121
|
+
}
|
|
122
|
+
header, footer {
|
|
123
|
+
max-width: none;
|
|
124
|
+
width: auto;
|
|
125
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(6, $grid-gutter-width));
|
|
126
|
+
}
|
|
127
|
+
.left-column {
|
|
128
|
+
@include fluid-column(6, $parent: 6);
|
|
129
|
+
}
|
|
130
|
+
.main-column {
|
|
131
|
+
@include fluid-column(6, $parent: 6);
|
|
132
|
+
section {
|
|
133
|
+
@include fluid-row();
|
|
134
|
+
}
|
|
135
|
+
section.intro {
|
|
136
|
+
margin: 0;
|
|
137
|
+
}
|
|
138
|
+
article {
|
|
139
|
+
@include fluid-column(6, $parent: 6);
|
|
140
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
141
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
142
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
143
|
+
img.grid-3 { @include fluid(3, $parent: 6, $parent-plus: -$grid-gutter-width); }
|
|
144
|
+
}
|
|
145
|
+
aside {
|
|
146
|
+
@include fluid-column(6, $parent: 6);
|
|
147
|
+
.box img {
|
|
148
|
+
width: fluid-column-width(6, $parent: 6, $parent-plus: -$grid-gutter-width);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// New Droids/HTC
|
|
155
|
+
// 540px to 600px
|
|
156
|
+
// 7 columns
|
|
157
|
+
@media only screen and (min-width: 540px) {
|
|
158
|
+
// skip
|
|
159
|
+
.measure { background-color: green; }
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// Kindle Fire
|
|
163
|
+
// 600px to 768px
|
|
164
|
+
// 7 to 9 columns
|
|
165
|
+
@media only screen and (min-width: 600px) {
|
|
166
|
+
.measure { background-color: blue; color: white; }
|
|
167
|
+
header, #main, footer {
|
|
168
|
+
@include fluid-page();
|
|
169
|
+
}
|
|
170
|
+
header, footer {
|
|
171
|
+
max-width: none;
|
|
172
|
+
width: auto;
|
|
173
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(8, $grid-gutter-width));
|
|
174
|
+
}
|
|
175
|
+
.left-column {
|
|
176
|
+
@include fluid-column(3, $parent: 8);
|
|
177
|
+
}
|
|
178
|
+
.main-column {
|
|
179
|
+
@include fluid-column(5, $parent: 8);
|
|
180
|
+
section {
|
|
181
|
+
@include fluid-row();
|
|
182
|
+
}
|
|
183
|
+
section.intro {
|
|
184
|
+
margin: 0;
|
|
185
|
+
}
|
|
186
|
+
article {
|
|
187
|
+
@include fluid-column(5, $parent: 5);
|
|
188
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
189
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
190
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
191
|
+
img.grid-3 { @include fluid(3, $parent: 5, $parent-plus: -$grid-gutter-width); }
|
|
192
|
+
}
|
|
193
|
+
aside {
|
|
194
|
+
@include fluid-column(5, $parent: 5);
|
|
195
|
+
.box img {
|
|
196
|
+
width: fluid-column-width(5, $parent: 5, $parent-plus: -$grid-gutter-width);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// iPad
|
|
203
|
+
// 768px to 800px
|
|
204
|
+
// 9 to 10 columns
|
|
205
|
+
@media only screen and (min-width: 768px) {
|
|
206
|
+
// skip
|
|
207
|
+
.measure { background-color: purple; color: white; }
|
|
208
|
+
header, #main, footer {
|
|
209
|
+
@include fluid-page();
|
|
210
|
+
}
|
|
211
|
+
header, footer {
|
|
212
|
+
max-width: none;
|
|
213
|
+
width: auto;
|
|
214
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(9, $grid-gutter-width));
|
|
215
|
+
}
|
|
216
|
+
.left-column {
|
|
217
|
+
@include fluid-column(3, $parent: 9);
|
|
218
|
+
}
|
|
219
|
+
.main-column {
|
|
220
|
+
@include fluid-column(6, $parent: 9);
|
|
221
|
+
section {
|
|
222
|
+
@include fluid-row();
|
|
223
|
+
}
|
|
224
|
+
section.intro {
|
|
225
|
+
margin: 0;
|
|
226
|
+
}
|
|
227
|
+
article {
|
|
228
|
+
@include fluid-column(6, $parent: 6);
|
|
229
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
230
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
231
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
232
|
+
img.grid-3 { @include fluid(3, $parent: 6, $parent-plus: -$grid-gutter-width); }
|
|
233
|
+
}
|
|
234
|
+
aside {
|
|
235
|
+
@include fluid-column(6, $parent: 6);
|
|
236
|
+
.box img {
|
|
237
|
+
width: fluid-column-width(6, $parent: 6, $parent-plus: -$grid-gutter-width);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
// Android Tablets
|
|
244
|
+
// 800px to 960px
|
|
245
|
+
// 10 to 12 columns
|
|
246
|
+
@media only screen and (min-width: 800px) {
|
|
247
|
+
// skip
|
|
248
|
+
.measure { background-color: blue; color: white; }
|
|
249
|
+
header, #main, footer {
|
|
250
|
+
@include fluid-page();
|
|
251
|
+
}
|
|
252
|
+
header, footer {
|
|
253
|
+
max-width: none;
|
|
254
|
+
width: auto;
|
|
255
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(11, $grid-gutter-width));
|
|
256
|
+
}
|
|
257
|
+
.left-column {
|
|
258
|
+
@include fluid-column(3, $parent: 11);
|
|
259
|
+
}
|
|
260
|
+
.main-column {
|
|
261
|
+
@include fluid-column(8, $parent: 11);
|
|
262
|
+
section {
|
|
263
|
+
@include fluid-row();
|
|
264
|
+
}
|
|
265
|
+
section.intro {
|
|
266
|
+
margin: 0;
|
|
267
|
+
}
|
|
268
|
+
article {
|
|
269
|
+
@include fluid-column(5, $parent: 8);
|
|
270
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
271
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
272
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
273
|
+
img.grid-3 { @include fluid(3, $parent: 5, $parent-plus: -$grid-gutter-width); }
|
|
274
|
+
}
|
|
275
|
+
aside {
|
|
276
|
+
@include fluid-column(3, $parent: 8);
|
|
277
|
+
.box img {
|
|
278
|
+
width: fluid-column-width(3, $parent: 3, $parent-plus: -$grid-gutter-width);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
// Desktop
|
|
285
|
+
// 960px to 992px
|
|
286
|
+
// 12 columns
|
|
287
|
+
@media only screen and (min-width: 960px) {
|
|
288
|
+
.measure { background-color: green; }
|
|
289
|
+
|
|
290
|
+
header, #main, footer {
|
|
291
|
+
@include grid-page();
|
|
292
|
+
}
|
|
293
|
+
header, footer {
|
|
294
|
+
width: grid-column-width(12);
|
|
295
|
+
}
|
|
296
|
+
.left-column {
|
|
297
|
+
@include grid-column(3);
|
|
298
|
+
}
|
|
299
|
+
.main-column {
|
|
300
|
+
@include grid-column(9);
|
|
301
|
+
section {
|
|
302
|
+
@include grid-row();
|
|
303
|
+
}
|
|
304
|
+
section.intro {
|
|
305
|
+
margin: 0;
|
|
306
|
+
}
|
|
307
|
+
article {
|
|
308
|
+
@include grid-column(6);
|
|
309
|
+
.float-left, .float-right { margin-bottom:($grid-gutter-width / 2); }
|
|
310
|
+
.float-left { float: left; margin-right: ($grid-gutter-width / 2); }
|
|
311
|
+
.float-right { float: right; margin-left: ($grid-gutter-width / 2); }
|
|
312
|
+
img.grid-3 { @include grid(3); }
|
|
313
|
+
}
|
|
314
|
+
aside {
|
|
315
|
+
@include grid-column(3);
|
|
316
|
+
.box img {
|
|
317
|
+
width: grid-column-width(3);
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// Desktop (320 and Up)
|
|
324
|
+
// 992px to 1024px
|
|
325
|
+
@media only screen and (min-width: 992px) {
|
|
326
|
+
.measure { background-color: yellow; }
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
// iPad (landscape)
|
|
330
|
+
// Kindle Fire (landscape)
|
|
331
|
+
// 1024px to 1280px
|
|
332
|
+
@media only screen and (min-width: 1024px) {
|
|
333
|
+
.measure { background-color: orange; }
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
// Android tablets (landscape)
|
|
337
|
+
// 1280px to infinity
|
|
338
|
+
@media only screen and (min-width: 1280px) {
|
|
339
|
+
.measure { background-color: red; }
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
// retina display
|
|
343
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
|
|
344
|
+
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
@include h5bp-helpers;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
// H5BP
|
|
2
|
+
@import "h5bp";
|
|
3
|
+
@include h5bp-display;
|
|
4
|
+
@include h5bp-base;
|
|
5
|
+
//@include h5bp-selection;
|
|
6
|
+
@include h5bp-links;
|
|
7
|
+
@include h5bp-typography;
|
|
8
|
+
@include h5bp-lists;
|
|
9
|
+
@include h5bp-embeds;
|
|
10
|
+
@include h5bp-figures;
|
|
11
|
+
@include h5bp-forms;
|
|
12
|
+
@include h5bp-tables;
|
|
13
|
+
|
|
14
|
+
// import the grid
|
|
15
|
+
@import "grid";
|
|
16
|
+
@import "grid/fluid";
|
|
17
|
+
@include grid-css;
|
|
18
|
+
@include fluid-css;
|
|
19
|
+
|
|
20
|
+
.column {
|
|
21
|
+
background-color: #ccc;
|
|
22
|
+
margin-bottom: $grid-gutter-width;
|
|
23
|
+
.column {
|
|
24
|
+
background-color: darken(#ccc, 10%);
|
|
25
|
+
margin-bottom: 0;
|
|
26
|
+
.column {
|
|
27
|
+
background-color: darken(#ccc, 20%);
|
|
28
|
+
.column {
|
|
29
|
+
background-color: darken(#ccc, 30%);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
.fluid-column {
|
|
35
|
+
background-color: #ccc;
|
|
36
|
+
margin-bottom: $grid-gutter-width;
|
|
37
|
+
.fluid-column {
|
|
38
|
+
background-color: darken(#ccc, 15%);
|
|
39
|
+
margin-bottom: 0;
|
|
40
|
+
.fluid-column {
|
|
41
|
+
background-color: darken(#ccc, 30%);
|
|
42
|
+
.fluid-column {
|
|
43
|
+
background-color: darken(#ccc, 45%);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.borders {
|
|
50
|
+
.column, .fluid-column {
|
|
51
|
+
border: 2px solid black;
|
|
52
|
+
}
|
|
53
|
+
@for $i from 1 through $grid-columns {
|
|
54
|
+
.grid-#{$i} { width: grid-width($i, -4px); }
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.padding {
|
|
59
|
+
.column, .fluid-column {
|
|
60
|
+
padding: 0 $grid-gutter-width/2;
|
|
61
|
+
}
|
|
62
|
+
@for $i from 1 through $grid-columns {
|
|
63
|
+
.grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
@include h5bp-helpers;
|