ezy 0.3.2 → 0.3.3
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.
- checksums.yaml +4 -4
- data/VERSION +1 -1
- data/ezy.gemspec +2 -2
- data/sass/ezy/_grid.scss +22 -12
- data/sass/ezy/grid/_debug.scss +38 -8
- data/sass/ezy/grid/_layout.scss +3 -3
- data/test/css/grid/layout/debug.css +393 -0
- data/test/html/grid/debug.html +63 -0
- data/test/html/grid/fluid.html +1 -1
- data/test/html/grid/responsive.html +1 -1
- data/test/scss/grid/layout/debug.scss +102 -0
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ea7c45ea129dca650a63acc44ab043dbc39c2574
|
|
4
|
+
data.tar.gz: b0da396f0be98e2b8c6f9237e17f5fe22eec0ae7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2adc99bf0c320be16d0c33754a000d5b3ca4317446bb4bbf905da099d5ebaf9c4f9a582fbb92a7ed0237ddad21c5af6a06f76796e07c582c06172f147576f2b1
|
|
7
|
+
data.tar.gz: 96b005ac29c7ce246bc10d92c326017fab0ff0c30d73bc427a59bec4971c5d5a8b9723b7acd8484558b550659af37f92ed6882cc373134a784654bb5bfbbf91e
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.3.
|
|
1
|
+
0.3.3
|
data/ezy.gemspec
CHANGED
data/sass/ezy/_grid.scss
CHANGED
|
@@ -13,6 +13,7 @@ $gutter-property : "margin" !default;
|
|
|
13
13
|
$total-columns : 12 !default;
|
|
14
14
|
$is-fluid : true !default;
|
|
15
15
|
$grid-padding : 0 !default;
|
|
16
|
+
$debug-selector : "body" !default;
|
|
16
17
|
|
|
17
18
|
// ---------------------------------------------------------------------------
|
|
18
19
|
// Variables used in grid context
|
|
@@ -47,10 +48,10 @@ $init-gutter-property: $gutter-property;
|
|
|
47
48
|
|
|
48
49
|
// ---------------------------------------------------------------------------
|
|
49
50
|
// @mixin master
|
|
50
|
-
//
|
|
51
|
+
//
|
|
51
52
|
// Sets width on page. If the grid is fluid, it's set as a max-width
|
|
52
53
|
// Extends the grid master placeholder selector
|
|
53
|
-
// $context : Number of columns in the current context.
|
|
54
|
+
// $context : Number of columns in the current context.
|
|
54
55
|
|
|
55
56
|
@mixin master(
|
|
56
57
|
$context : $total-columns,
|
|
@@ -77,7 +78,7 @@ $init-gutter-property: $gutter-property;
|
|
|
77
78
|
|
|
78
79
|
@if $grid-padding-left { padding-left: $grid-padding-left; }
|
|
79
80
|
@if $grid-padding-right { padding-right: $grid-padding-right; }
|
|
80
|
-
|
|
81
|
+
|
|
81
82
|
@if ( not $at-breakpoint ) {
|
|
82
83
|
@extend %ezy-master;
|
|
83
84
|
}
|
|
@@ -93,7 +94,7 @@ $init-gutter-property: $gutter-property;
|
|
|
93
94
|
|
|
94
95
|
// ---------------------------------------------------------------------------
|
|
95
96
|
// @mixin container
|
|
96
|
-
//
|
|
97
|
+
//
|
|
97
98
|
// Sets width on page. If the grid is fluid, it's set as a max-width
|
|
98
99
|
// Extends the grid master placeholder selector
|
|
99
100
|
// $context : Number of columns in the current context
|
|
@@ -119,6 +120,15 @@ $init-gutter-property: $gutter-property;
|
|
|
119
120
|
@if (not $at-breakpoint) {
|
|
120
121
|
@extend %ezy-container;
|
|
121
122
|
}
|
|
123
|
+
// Debug info about layouts
|
|
124
|
+
@if $debug {
|
|
125
|
+
@include debug-layout-styles;
|
|
126
|
+
@include debug-layout-info("CONTEXT :: columns: #{$total-columns} | column-width: #{$column-width} | gutter-width: #{$gutter-width} | at-breakpoint: #{$at-breakpoint}");
|
|
127
|
+
&:before {
|
|
128
|
+
@include span-columns( $total-columns );
|
|
129
|
+
width: auto;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
122
132
|
}
|
|
123
133
|
|
|
124
134
|
// ---------------------------------------------------------------------------
|
|
@@ -139,9 +149,9 @@ $init-gutter-property: $gutter-property;
|
|
|
139
149
|
|
|
140
150
|
// ---------------------------------------------------------------------------
|
|
141
151
|
// @mixin grid-init
|
|
142
|
-
//
|
|
152
|
+
//
|
|
143
153
|
// Prints out placeholder selectors used with columns. Helps reduce the CSS output.
|
|
144
|
-
//
|
|
154
|
+
//
|
|
145
155
|
// Should be called after setting grid variables:
|
|
146
156
|
// ----------------
|
|
147
157
|
// $column-width
|
|
@@ -178,7 +188,7 @@ $init-gutter-property: $gutter-property;
|
|
|
178
188
|
|
|
179
189
|
// ---------------------------------------------------------------------------
|
|
180
190
|
// @mixin span-columns
|
|
181
|
-
//
|
|
191
|
+
//
|
|
182
192
|
// Sets width and gutter on columns
|
|
183
193
|
// Uses @extend for gutters outside media queries if grid-init() has been called
|
|
184
194
|
// $columns : Number of columns to span
|
|
@@ -211,13 +221,13 @@ $init-gutter-property: $gutter-property;
|
|
|
211
221
|
@include debug-info( $columns, $context );
|
|
212
222
|
}
|
|
213
223
|
|
|
214
|
-
// Setting base column styles when a column can't
|
|
224
|
+
// Setting base column styles when a column can't
|
|
215
225
|
// have extended the base columns placeholder selector
|
|
216
226
|
@if ( not $grid-init ) {
|
|
217
227
|
@include column-base;
|
|
218
228
|
}
|
|
219
229
|
|
|
220
|
-
// Some crazy logic to set gutter or
|
|
230
|
+
// Some crazy logic to set gutter or
|
|
221
231
|
// extend column placeholder selectors
|
|
222
232
|
|
|
223
233
|
@if $grid-init and ( not $at-breakpoint ) {
|
|
@@ -230,14 +240,14 @@ $init-gutter-property: $gutter-property;
|
|
|
230
240
|
} @else {
|
|
231
241
|
@extend %ezy-column-#{ $grid-init-index }-#{ $context };
|
|
232
242
|
}
|
|
233
|
-
|
|
243
|
+
|
|
234
244
|
} @else {
|
|
235
245
|
@extend %ezy-column-#{ $grid-init-index };
|
|
236
246
|
}
|
|
237
247
|
|
|
238
248
|
}
|
|
239
249
|
@if ( $gutter-property and $gutter-property != $init-gutter-property )
|
|
240
|
-
or ( not $grid-init )
|
|
250
|
+
or ( not $grid-init )
|
|
241
251
|
or $at-breakpoint {
|
|
242
252
|
|
|
243
253
|
@if $is-fluid and $context {
|
|
@@ -247,7 +257,7 @@ $init-gutter-property: $gutter-property;
|
|
|
247
257
|
@warn $context-warn;
|
|
248
258
|
} @else {
|
|
249
259
|
@include gutters( $gutter-property: $gutter-property );
|
|
250
|
-
}
|
|
260
|
+
}
|
|
251
261
|
|
|
252
262
|
}
|
|
253
263
|
}
|
data/sass/ezy/grid/_debug.scss
CHANGED
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
// ---------------------------------------------------------------------------
|
|
2
|
-
// @mixin
|
|
2
|
+
// @mixin
|
|
3
|
+
|
|
4
|
+
@mixin debug-text {
|
|
5
|
+
background-color: #EBEBEB;
|
|
6
|
+
border: 1px solid #7A7A7A;
|
|
7
|
+
color: #000;
|
|
8
|
+
display: inline-block;
|
|
9
|
+
font-family: monospace, serif;
|
|
10
|
+
font-size: 8px;
|
|
11
|
+
left: 0;
|
|
12
|
+
line-height: 11px;
|
|
13
|
+
padding: 0px 2px;
|
|
14
|
+
position: absolute;
|
|
15
|
+
top: 0;
|
|
16
|
+
z-index: 999;
|
|
17
|
+
}
|
|
3
18
|
|
|
4
19
|
@mixin debug-styles {
|
|
5
20
|
position: relative;
|
|
6
21
|
&:before {
|
|
7
|
-
|
|
8
|
-
display: inline-block;
|
|
9
|
-
font-family: monospace, serif;
|
|
10
|
-
font-size: 8px;
|
|
11
|
-
line-height: 11px;
|
|
12
|
-
padding: 0px 2px;
|
|
13
|
-
position: absolute;
|
|
22
|
+
@include debug-text;
|
|
14
23
|
}
|
|
15
24
|
}
|
|
16
25
|
|
|
@@ -20,3 +29,24 @@
|
|
|
20
29
|
content: "#{ $debug-text }";
|
|
21
30
|
}
|
|
22
31
|
}
|
|
32
|
+
|
|
33
|
+
@mixin debug-layout-styles {
|
|
34
|
+
@include debug-styles;
|
|
35
|
+
&:before {
|
|
36
|
+
bottom: 0;
|
|
37
|
+
padding: 1px 4px;
|
|
38
|
+
top: auto;
|
|
39
|
+
white-space: pre-wrap;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
-moz-box-sizing: border-box;
|
|
42
|
+
-webkit-box-sizing: border-box;
|
|
43
|
+
-o-box-sizing: border-box;
|
|
44
|
+
-ms-box-sizing: border-box;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@mixin debug-layout-info( $info ) {
|
|
49
|
+
&:before {
|
|
50
|
+
content: "#{ $info }";
|
|
51
|
+
}
|
|
52
|
+
}
|
data/sass/ezy/grid/_layout.scss
CHANGED
|
@@ -42,9 +42,9 @@ $layouts: ();
|
|
|
42
42
|
// ---------------------------------------------------------------------------
|
|
43
43
|
// @mixin at-layout
|
|
44
44
|
|
|
45
|
-
@mixin at-layout(
|
|
46
|
-
$layout,
|
|
47
|
-
$legacy-support : false
|
|
45
|
+
@mixin at-layout(
|
|
46
|
+
$layout,
|
|
47
|
+
$legacy-support : false
|
|
48
48
|
) {
|
|
49
49
|
|
|
50
50
|
// Storing reference to global variables
|
|
@@ -0,0 +1,393 @@
|
|
|
1
|
+
/* ------------------------------------------------- *
|
|
2
|
+
* Ezy Grid by Frej Raahede Nielsen
|
|
3
|
+
* http://github.com/raahede/ezy
|
|
4
|
+
* ------------------------------------------------- *
|
|
5
|
+
*/
|
|
6
|
+
/* ------------------------------------------------- *
|
|
7
|
+
* Micro Clearfix
|
|
8
|
+
* http://nicolasgallagher.com/micro-clearfix-hack/
|
|
9
|
+
*/
|
|
10
|
+
.page:before, .grid:before,
|
|
11
|
+
.page:after,
|
|
12
|
+
.grid:after {
|
|
13
|
+
content: " ";
|
|
14
|
+
display: table;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.page:after, .grid:after {
|
|
18
|
+
clear: both;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.page, .grid {
|
|
22
|
+
/**
|
|
23
|
+
* For IE 6/7 only
|
|
24
|
+
* Include this rule to trigger hasLayout and contain floats.
|
|
25
|
+
*/
|
|
26
|
+
*zoom: 1;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* --- End clearfix --- */
|
|
30
|
+
.page {
|
|
31
|
+
margin-left: auto;
|
|
32
|
+
margin-right: auto;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.grid:before, .small, .medium, .large {
|
|
36
|
+
/* Grid column base at a 4-column context */
|
|
37
|
+
margin-left: 3.125%;
|
|
38
|
+
margin-right: 3.125%;
|
|
39
|
+
float: left;
|
|
40
|
+
/* Fixing double margin on IE6 */
|
|
41
|
+
_display: inline;
|
|
42
|
+
position: relative;
|
|
43
|
+
}
|
|
44
|
+
.grid:before, .small:before, .medium:before, .large:before {
|
|
45
|
+
background-color: #EBEBEB;
|
|
46
|
+
border: 1px solid #7A7A7A;
|
|
47
|
+
color: #000;
|
|
48
|
+
display: inline-block;
|
|
49
|
+
font-family: monospace, serif;
|
|
50
|
+
font-size: 8px;
|
|
51
|
+
left: 0;
|
|
52
|
+
line-height: 11px;
|
|
53
|
+
padding: 0px 2px;
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 0;
|
|
56
|
+
z-index: 999;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.page {
|
|
60
|
+
max-width: 300px;
|
|
61
|
+
/* Forcing static grid on IE6 and IE7 */
|
|
62
|
+
*width: 300px;
|
|
63
|
+
padding-left: 10px;
|
|
64
|
+
padding-right: 10px;
|
|
65
|
+
}
|
|
66
|
+
@media (min-width: 321px) {
|
|
67
|
+
.page {
|
|
68
|
+
max-width: 620px;
|
|
69
|
+
/* Forcing static grid on IE6 and IE7 */
|
|
70
|
+
*width: 620px;
|
|
71
|
+
padding-left: 10px;
|
|
72
|
+
padding-right: 10px;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
@media (min-width: 641px) {
|
|
76
|
+
.page {
|
|
77
|
+
max-width: 940px;
|
|
78
|
+
/* Forcing static grid on IE6 and IE7 */
|
|
79
|
+
*width: 940px;
|
|
80
|
+
padding-left: 10px;
|
|
81
|
+
padding-right: 10px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
.no-media-queries .page {
|
|
85
|
+
/* Fallback for browsers not supporting media queries */
|
|
86
|
+
max-width: 940px;
|
|
87
|
+
/* Forcing static grid on IE6 and IE7 */
|
|
88
|
+
*width: 940px;
|
|
89
|
+
padding-left: 10px;
|
|
90
|
+
padding-right: 10px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.grid {
|
|
94
|
+
margin-left: -3.33333%;
|
|
95
|
+
margin-right: -3.33333%;
|
|
96
|
+
position: relative;
|
|
97
|
+
}
|
|
98
|
+
.grid:before {
|
|
99
|
+
background-color: #EBEBEB;
|
|
100
|
+
border: 1px solid #7A7A7A;
|
|
101
|
+
color: #000;
|
|
102
|
+
display: inline-block;
|
|
103
|
+
font-family: monospace, serif;
|
|
104
|
+
font-size: 8px;
|
|
105
|
+
left: 0;
|
|
106
|
+
line-height: 11px;
|
|
107
|
+
padding: 0px 2px;
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 0;
|
|
110
|
+
z-index: 999;
|
|
111
|
+
}
|
|
112
|
+
.grid:before {
|
|
113
|
+
bottom: 0;
|
|
114
|
+
padding: 1px 4px;
|
|
115
|
+
top: auto;
|
|
116
|
+
white-space: pre-wrap;
|
|
117
|
+
box-sizing: border-box;
|
|
118
|
+
-moz-box-sizing: border-box;
|
|
119
|
+
-webkit-box-sizing: border-box;
|
|
120
|
+
-o-box-sizing: border-box;
|
|
121
|
+
-ms-box-sizing: border-box;
|
|
122
|
+
}
|
|
123
|
+
.grid:before {
|
|
124
|
+
content: "CONTEXT :: columns: 4 | column-width: 60px | gutter-width: 20px | at-breakpoint: false";
|
|
125
|
+
}
|
|
126
|
+
.grid:before {
|
|
127
|
+
/* Spanning 4 of 4 columns */
|
|
128
|
+
width: 93.75%;
|
|
129
|
+
width: auto;
|
|
130
|
+
}
|
|
131
|
+
.grid:before:before {
|
|
132
|
+
content: "4 of 4";
|
|
133
|
+
}
|
|
134
|
+
@media (min-width: 321px) {
|
|
135
|
+
.grid {
|
|
136
|
+
margin-left: -1.6129%;
|
|
137
|
+
margin-right: -1.6129%;
|
|
138
|
+
position: relative;
|
|
139
|
+
}
|
|
140
|
+
.grid:before {
|
|
141
|
+
background-color: #EBEBEB;
|
|
142
|
+
border: 1px solid #7A7A7A;
|
|
143
|
+
color: #000;
|
|
144
|
+
display: inline-block;
|
|
145
|
+
font-family: monospace, serif;
|
|
146
|
+
font-size: 8px;
|
|
147
|
+
left: 0;
|
|
148
|
+
line-height: 11px;
|
|
149
|
+
padding: 0px 2px;
|
|
150
|
+
position: absolute;
|
|
151
|
+
top: 0;
|
|
152
|
+
z-index: 999;
|
|
153
|
+
}
|
|
154
|
+
.grid:before {
|
|
155
|
+
bottom: 0;
|
|
156
|
+
padding: 1px 4px;
|
|
157
|
+
top: auto;
|
|
158
|
+
white-space: pre-wrap;
|
|
159
|
+
box-sizing: border-box;
|
|
160
|
+
-moz-box-sizing: border-box;
|
|
161
|
+
-webkit-box-sizing: border-box;
|
|
162
|
+
-o-box-sizing: border-box;
|
|
163
|
+
-ms-box-sizing: border-box;
|
|
164
|
+
}
|
|
165
|
+
.grid:before {
|
|
166
|
+
content: "CONTEXT :: columns: 8 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
|
|
167
|
+
}
|
|
168
|
+
.grid:before {
|
|
169
|
+
/* Spanning 8 of 8 columns */
|
|
170
|
+
width: 96.875%;
|
|
171
|
+
margin-left: 1.5625%;
|
|
172
|
+
margin-right: 1.5625%;
|
|
173
|
+
width: auto;
|
|
174
|
+
}
|
|
175
|
+
.grid:before:before {
|
|
176
|
+
content: "8 of 8";
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
@media (min-width: 641px) {
|
|
180
|
+
.grid {
|
|
181
|
+
margin-left: -1.06383%;
|
|
182
|
+
margin-right: -1.06383%;
|
|
183
|
+
position: relative;
|
|
184
|
+
}
|
|
185
|
+
.grid:before {
|
|
186
|
+
background-color: #EBEBEB;
|
|
187
|
+
border: 1px solid #7A7A7A;
|
|
188
|
+
color: #000;
|
|
189
|
+
display: inline-block;
|
|
190
|
+
font-family: monospace, serif;
|
|
191
|
+
font-size: 8px;
|
|
192
|
+
left: 0;
|
|
193
|
+
line-height: 11px;
|
|
194
|
+
padding: 0px 2px;
|
|
195
|
+
position: absolute;
|
|
196
|
+
top: 0;
|
|
197
|
+
z-index: 999;
|
|
198
|
+
}
|
|
199
|
+
.grid:before {
|
|
200
|
+
bottom: 0;
|
|
201
|
+
padding: 1px 4px;
|
|
202
|
+
top: auto;
|
|
203
|
+
white-space: pre-wrap;
|
|
204
|
+
box-sizing: border-box;
|
|
205
|
+
-moz-box-sizing: border-box;
|
|
206
|
+
-webkit-box-sizing: border-box;
|
|
207
|
+
-o-box-sizing: border-box;
|
|
208
|
+
-ms-box-sizing: border-box;
|
|
209
|
+
}
|
|
210
|
+
.grid:before {
|
|
211
|
+
content: "CONTEXT :: columns: 12 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
|
|
212
|
+
}
|
|
213
|
+
.grid:before {
|
|
214
|
+
/* Spanning 12 of 12 columns */
|
|
215
|
+
width: 97.91667%;
|
|
216
|
+
margin-left: 1.04167%;
|
|
217
|
+
margin-right: 1.04167%;
|
|
218
|
+
width: auto;
|
|
219
|
+
}
|
|
220
|
+
.grid:before:before {
|
|
221
|
+
content: "12 of 12";
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
.no-media-queries .grid {
|
|
225
|
+
/* Fallback for browsers not supporting media queries */
|
|
226
|
+
margin-left: -1.06383%;
|
|
227
|
+
margin-right: -1.06383%;
|
|
228
|
+
position: relative;
|
|
229
|
+
}
|
|
230
|
+
.no-media-queries .grid:before {
|
|
231
|
+
background-color: #EBEBEB;
|
|
232
|
+
border: 1px solid #7A7A7A;
|
|
233
|
+
color: #000;
|
|
234
|
+
display: inline-block;
|
|
235
|
+
font-family: monospace, serif;
|
|
236
|
+
font-size: 8px;
|
|
237
|
+
left: 0;
|
|
238
|
+
line-height: 11px;
|
|
239
|
+
padding: 0px 2px;
|
|
240
|
+
position: absolute;
|
|
241
|
+
top: 0;
|
|
242
|
+
z-index: 999;
|
|
243
|
+
}
|
|
244
|
+
.no-media-queries .grid:before {
|
|
245
|
+
bottom: 0;
|
|
246
|
+
padding: 1px 4px;
|
|
247
|
+
top: auto;
|
|
248
|
+
white-space: pre-wrap;
|
|
249
|
+
box-sizing: border-box;
|
|
250
|
+
-moz-box-sizing: border-box;
|
|
251
|
+
-webkit-box-sizing: border-box;
|
|
252
|
+
-o-box-sizing: border-box;
|
|
253
|
+
-ms-box-sizing: border-box;
|
|
254
|
+
}
|
|
255
|
+
.no-media-queries .grid:before {
|
|
256
|
+
content: "CONTEXT :: columns: 12 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
|
|
257
|
+
}
|
|
258
|
+
.no-media-queries .grid:before {
|
|
259
|
+
/* Spanning 12 of 12 columns */
|
|
260
|
+
width: 97.91667%;
|
|
261
|
+
margin-left: 1.04167%;
|
|
262
|
+
margin-right: 1.04167%;
|
|
263
|
+
width: auto;
|
|
264
|
+
}
|
|
265
|
+
.no-media-queries .grid:before:before {
|
|
266
|
+
content: "12 of 12";
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.small, .medium, .large {
|
|
270
|
+
background: hotpink;
|
|
271
|
+
text-align: center;
|
|
272
|
+
zoom: 1;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.small {
|
|
276
|
+
/* Spanning 2 of 4 columns */
|
|
277
|
+
width: 43.75%;
|
|
278
|
+
}
|
|
279
|
+
.small:before {
|
|
280
|
+
content: "2 of 4";
|
|
281
|
+
}
|
|
282
|
+
@media (min-width: 321px) {
|
|
283
|
+
.small {
|
|
284
|
+
/* Spanning 2 of 8 columns */
|
|
285
|
+
width: 21.875%;
|
|
286
|
+
margin-left: 1.5625%;
|
|
287
|
+
margin-right: 1.5625%;
|
|
288
|
+
}
|
|
289
|
+
.small:before {
|
|
290
|
+
content: "2 of 8";
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
@media (min-width: 641px) {
|
|
294
|
+
.small {
|
|
295
|
+
/* Spanning 3 of 12 columns */
|
|
296
|
+
width: 22.91667%;
|
|
297
|
+
margin-left: 1.04167%;
|
|
298
|
+
margin-right: 1.04167%;
|
|
299
|
+
}
|
|
300
|
+
.small:before {
|
|
301
|
+
content: "3 of 12";
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
.no-media-queries .small {
|
|
305
|
+
/* Fallback for browsers not supporting media queries */
|
|
306
|
+
/* Spanning 3 of 12 columns */
|
|
307
|
+
width: 22.91667%;
|
|
308
|
+
margin-left: 1.04167%;
|
|
309
|
+
margin-right: 1.04167%;
|
|
310
|
+
}
|
|
311
|
+
.no-media-queries .small:before {
|
|
312
|
+
content: "3 of 12";
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.medium {
|
|
316
|
+
/* Spanning 4 of 4 columns */
|
|
317
|
+
width: 93.75%;
|
|
318
|
+
}
|
|
319
|
+
.medium:before {
|
|
320
|
+
content: "4 of 4";
|
|
321
|
+
}
|
|
322
|
+
@media (min-width: 321px) {
|
|
323
|
+
.medium {
|
|
324
|
+
/* Spanning 4 of 8 columns */
|
|
325
|
+
width: 46.875%;
|
|
326
|
+
margin-left: 1.5625%;
|
|
327
|
+
margin-right: 1.5625%;
|
|
328
|
+
}
|
|
329
|
+
.medium:before {
|
|
330
|
+
content: "4 of 8";
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
@media (min-width: 641px) {
|
|
334
|
+
.medium {
|
|
335
|
+
/* Spanning 6 of 12 columns */
|
|
336
|
+
width: 47.91667%;
|
|
337
|
+
margin-left: 1.04167%;
|
|
338
|
+
margin-right: 1.04167%;
|
|
339
|
+
}
|
|
340
|
+
.medium:before {
|
|
341
|
+
content: "6 of 12";
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
.no-media-queries .medium {
|
|
345
|
+
/* Fallback for browsers not supporting media queries */
|
|
346
|
+
/* Spanning 6 of 12 columns */
|
|
347
|
+
width: 47.91667%;
|
|
348
|
+
margin-left: 1.04167%;
|
|
349
|
+
margin-right: 1.04167%;
|
|
350
|
+
}
|
|
351
|
+
.no-media-queries .medium:before {
|
|
352
|
+
content: "6 of 12";
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.large {
|
|
356
|
+
/* Spanning 4 of 4 columns */
|
|
357
|
+
width: 93.75%;
|
|
358
|
+
}
|
|
359
|
+
.large:before {
|
|
360
|
+
content: "4 of 4";
|
|
361
|
+
}
|
|
362
|
+
@media (min-width: 321px) {
|
|
363
|
+
.large {
|
|
364
|
+
/* Spanning 8 of 8 columns */
|
|
365
|
+
width: 96.875%;
|
|
366
|
+
margin-left: 1.5625%;
|
|
367
|
+
margin-right: 1.5625%;
|
|
368
|
+
}
|
|
369
|
+
.large:before {
|
|
370
|
+
content: "8 of 8";
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
@media (min-width: 641px) {
|
|
374
|
+
.large {
|
|
375
|
+
/* Spanning 12 of 12 columns */
|
|
376
|
+
width: 97.91667%;
|
|
377
|
+
margin-left: 1.04167%;
|
|
378
|
+
margin-right: 1.04167%;
|
|
379
|
+
}
|
|
380
|
+
.large:before {
|
|
381
|
+
content: "12 of 12";
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
.no-media-queries .large {
|
|
385
|
+
/* Fallback for browsers not supporting media queries */
|
|
386
|
+
/* Spanning 12 of 12 columns */
|
|
387
|
+
width: 97.91667%;
|
|
388
|
+
margin-left: 1.04167%;
|
|
389
|
+
margin-right: 1.04167%;
|
|
390
|
+
}
|
|
391
|
+
.no-media-queries .large:before {
|
|
392
|
+
content: "12 of 12";
|
|
393
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 9]> <html class="no-media-queries"> <![endif]-->
|
|
3
|
+
<!--[if gte IE 9]><!--> <html> <!--<![endif]-->
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
|
|
7
|
+
<title>Grid: debug</title>
|
|
8
|
+
|
|
9
|
+
<meta name="description" content="Ezy Grid Demo">
|
|
10
|
+
<meta name="viewport" content="width=device-width">
|
|
11
|
+
|
|
12
|
+
<link href="../../css/grid/layout/debug.css" rel="stylesheet">
|
|
13
|
+
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<div class="page">
|
|
17
|
+
<div class="grid">
|
|
18
|
+
<div class="small">
|
|
19
|
+
<p>Small</p>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="small">
|
|
22
|
+
<p>Small</p>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="small">
|
|
25
|
+
<p>Small</p>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="small">
|
|
28
|
+
<p>Small</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="small">
|
|
31
|
+
<p>Small</p>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="small">
|
|
34
|
+
<p>Small</p>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="medium">
|
|
37
|
+
<p>Medium</p>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="large">
|
|
40
|
+
<p>Large</p>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="medium">
|
|
43
|
+
<p>Medium</p>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="small">
|
|
46
|
+
<p>Small</p>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="small">
|
|
49
|
+
<p>Small</p>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="medium">
|
|
52
|
+
<p>Medium</p>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="medium">
|
|
55
|
+
<p>Medium</p>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="large">
|
|
58
|
+
<p>Large</p>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
data/test/html/grid/fluid.html
CHANGED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
// ------------------------------------
|
|
2
|
+
// Imports
|
|
3
|
+
|
|
4
|
+
@import "../../../../sass/ezy/grid";
|
|
5
|
+
|
|
6
|
+
$debug: true;
|
|
7
|
+
|
|
8
|
+
// ------------------------------------
|
|
9
|
+
// Number of columns on different screen sizes
|
|
10
|
+
|
|
11
|
+
$columns-mobile : 4;
|
|
12
|
+
$columns-tablet : 8;
|
|
13
|
+
$columns-desktop : 12;
|
|
14
|
+
|
|
15
|
+
// ------------------------------------
|
|
16
|
+
// Grid settings
|
|
17
|
+
|
|
18
|
+
$column-width : 60px;
|
|
19
|
+
$gutter-width : 20px;
|
|
20
|
+
$grid-padding : 10px;
|
|
21
|
+
$total-columns : $columns-mobile; // mobile first
|
|
22
|
+
$is-fluid : true;
|
|
23
|
+
|
|
24
|
+
// ------------------------------------
|
|
25
|
+
// Breakpoint settings
|
|
26
|
+
|
|
27
|
+
// Selector for browsers not supporting media queries
|
|
28
|
+
// (IE8 and down)
|
|
29
|
+
$legacy-selector: ".no-media-queries";
|
|
30
|
+
|
|
31
|
+
// ------------------------------------
|
|
32
|
+
// Defining media query breakpoints
|
|
33
|
+
|
|
34
|
+
$breakpoint-tablet : set-breakpoint( $min: grid-width( $columns-mobile ) + 1 );
|
|
35
|
+
$breakpoint-desktop : set-breakpoint( $min: grid-width( $columns-tablet ) + 1, $legacy-support: true ); // Default for old IE
|
|
36
|
+
|
|
37
|
+
// ------------------------------------
|
|
38
|
+
// Defining grid layouts
|
|
39
|
+
|
|
40
|
+
$mobile : set-layout( $total-columns, $grid-padding ); // mobile first
|
|
41
|
+
$tablet : set-layout( $columns-tablet, $at-breakpoint: $breakpoint-tablet );
|
|
42
|
+
$desktop : set-layout( $columns-desktop, $at-breakpoint: $breakpoint-desktop );
|
|
43
|
+
|
|
44
|
+
// ------------------------------------
|
|
45
|
+
// Initializing grid for cleaner output
|
|
46
|
+
|
|
47
|
+
@include grid-init();
|
|
48
|
+
|
|
49
|
+
// ------------------------------------
|
|
50
|
+
// Grid layouts
|
|
51
|
+
|
|
52
|
+
.page {
|
|
53
|
+
@include each-layout {
|
|
54
|
+
@include master;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.grid {
|
|
59
|
+
@include each-layout {
|
|
60
|
+
@include container;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
%column {
|
|
65
|
+
background: hotpink;
|
|
66
|
+
text-align: center;
|
|
67
|
+
zoom: 1;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.small {
|
|
71
|
+
@extend %column;
|
|
72
|
+
@include span-columns( 2 ); // 2 of 4 columns on mobile
|
|
73
|
+
@include at-layout( $tablet ) {
|
|
74
|
+
@include span-columns( 2 ); // 2 of 8 columns on tablet
|
|
75
|
+
}
|
|
76
|
+
@include at-layout( $desktop ) {
|
|
77
|
+
@include span-columns( 3 ); // 3 of 12 columns on desktop
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.medium {
|
|
82
|
+
@extend %column;
|
|
83
|
+
@include span-columns( 4 ); // 4 of 4 columns on mobile
|
|
84
|
+
@include at-layout( $tablet ) {
|
|
85
|
+
@include span-columns( 4 ); // 4 of 8 columns on tablet
|
|
86
|
+
}
|
|
87
|
+
@include at-layout( $desktop ) {
|
|
88
|
+
@include span-columns( 6 ); // 6 of 12 columns on desktop
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.large {
|
|
93
|
+
@extend %column;
|
|
94
|
+
@include span-columns( 4 ); // 4 of 4 columns on mobile
|
|
95
|
+
@include at-layout( $tablet ) {
|
|
96
|
+
@include span-columns( 8 ); // 8 of 8 columns on tablet
|
|
97
|
+
}
|
|
98
|
+
@include at-layout( $desktop ) {
|
|
99
|
+
@include span-columns( 12 ); // 12 of 12 columns on desktio
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ezy
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.3.
|
|
4
|
+
version: 0.3.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Frej Raahede Nielsen
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-04-
|
|
11
|
+
date: 2014-04-16 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: compass
|
|
@@ -81,6 +81,7 @@ files:
|
|
|
81
81
|
- test/css/grid/elastic.css
|
|
82
82
|
- test/css/grid/fluid.css
|
|
83
83
|
- test/css/grid/gutter.css
|
|
84
|
+
- test/css/grid/layout/debug.css
|
|
84
85
|
- test/css/grid/layout/fluid.css
|
|
85
86
|
- test/css/grid/layout/grid-settings.css
|
|
86
87
|
- test/css/grid/layout/responsive.css
|
|
@@ -101,6 +102,7 @@ files:
|
|
|
101
102
|
- test/scss/grid/elastic.scss
|
|
102
103
|
- test/scss/grid/fluid.scss
|
|
103
104
|
- test/scss/grid/gutter.scss
|
|
105
|
+
- test/scss/grid/layout/debug.scss
|
|
104
106
|
- test/scss/grid/layout/fluid.scss
|
|
105
107
|
- test/scss/grid/layout/grid-settings.scss
|
|
106
108
|
- test/scss/grid/layout/responsive.scss
|
|
@@ -118,6 +120,7 @@ files:
|
|
|
118
120
|
- test/scss/sprites/simple.scss
|
|
119
121
|
- test/scss/sprites/size.scss
|
|
120
122
|
- test/scss/sprites/spacing.scss
|
|
123
|
+
- test/html/grid/debug.html
|
|
121
124
|
- test/html/grid/fluid.html
|
|
122
125
|
- test/html/grid/grid-settings.html
|
|
123
126
|
- test/html/grid/responsive.html
|