ezy 0.0.7 → 0.0.8
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 +1 -1
- data/sass/ezy/_grid.scss +39 -53
- data/sass/ezy/_sprites.scss +16 -10
- data/test/css/grid/elastic.css +1 -0
- data/test/css/grid/fluid.css +3 -0
- data/test/css/grid/gutter.css +129 -58
- data/test/css/grid/responsive.css +4 -0
- data/test/css/grid/static.css +3 -0
- data/test/css/sprites/layout.css +4 -4
- data/test/css/sprites/position.css +8 -8
- data/test/css/sprites/repeat.css +6 -6
- data/test/css/sprites/resolution.css +25 -0
- data/test/css/sprites/retina.css +5 -5
- data/test/css/sprites/simple.css +1 -1
- data/test/css/sprites/spacing.css +4 -4
- data/test/scss/grid/gutter.scss +77 -42
- data/test/scss/sprites/resolution.scss +23 -0
- metadata +3 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e7b9087ea62ca40b3cdf5404be3e1369b8fd5620
|
4
|
+
data.tar.gz: 5cc4539b113cd219ec2a6c1a24e7af0eb507201b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 13b0c11a859f8f4eef501a676b28af83cd2da38eafec70d3b3ae45833695c6763284d3aefd5d74e2faa633e71fd8f02817cbb8dac3cf04b4ba3715da83311bb4
|
7
|
+
data.tar.gz: 7e490d565c7eb6c7114164134ddd7d77341a12a54f94e5a1458bf32b5293ddf57be29c53f0c3df4312fb273b7a8da78b5eed58da2cfc07f97ea34bec0083a675
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.8
|
data/ezy.gemspec
CHANGED
data/sass/ezy/_grid.scss
CHANGED
@@ -8,17 +8,18 @@
|
|
8
8
|
// Mandatory grid settings
|
9
9
|
// Defaults: can be overridden
|
10
10
|
|
11
|
-
$column-width:
|
12
|
-
$gutter-width:
|
13
|
-
$gutter-property: "margin" !default;
|
14
|
-
$total-columns:
|
15
|
-
$is-fluid:
|
11
|
+
$column-width: 4em !default;
|
12
|
+
$gutter-width: 1em !default;
|
13
|
+
$default-gutter-property: "margin" !default;
|
14
|
+
$total-columns: 12 !default;
|
15
|
+
$is-fluid: true !default;
|
16
16
|
|
17
17
|
// ---------------------------------------------------------------------------
|
18
18
|
// Variables used in grid context
|
19
19
|
|
20
20
|
$grid-init: false;
|
21
21
|
$context-warn: "You must set $context if $is-fluid is set to true.";
|
22
|
+
$init-gutter-property: $default-gutter-property;
|
22
23
|
|
23
24
|
// ---------------------------------------------------------------------------
|
24
25
|
// @function layout-width
|
@@ -90,9 +91,10 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
90
91
|
$property: false
|
91
92
|
) {
|
92
93
|
@if (not $property) {
|
93
|
-
$property: $gutter-property;
|
94
|
+
$property: $default-gutter-property;
|
94
95
|
}
|
95
96
|
@if $property == "margin" or $property == "padding" {
|
97
|
+
float: left;
|
96
98
|
#{ $property }: {
|
97
99
|
left: gutter( $context );
|
98
100
|
right: gutter( $context );
|
@@ -185,16 +187,15 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
185
187
|
|
186
188
|
@mixin grid-init() {
|
187
189
|
$grid-init: true;
|
190
|
+
$init-gutter-property: $default-gutter-property;
|
188
191
|
@if $is-fluid {
|
189
192
|
@for $i from 1 through $total-columns {
|
190
193
|
%ezy-column-#{ $i } {
|
191
|
-
float: left;
|
192
194
|
@include gutters( $i );
|
193
195
|
}
|
194
196
|
}
|
195
197
|
} @else {
|
196
198
|
%ezy-column {
|
197
|
-
float: left;
|
198
199
|
@include gutters;
|
199
200
|
}
|
200
201
|
}
|
@@ -229,65 +230,50 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
229
230
|
/* Spanning #{ $columns } columns */
|
230
231
|
width: $width;
|
231
232
|
}
|
232
|
-
@if $gutter-property and $is-fluid and $context {
|
233
|
-
@include gutters( $context, $gutter-property );
|
234
233
|
|
235
|
-
|
236
|
-
@warn $context-warn;
|
234
|
+
@if $gutter-property and $gutter-property != $default-gutter-property {
|
237
235
|
|
238
|
-
|
239
|
-
|
236
|
+
@if $is-fluid and $context {
|
237
|
+
@include gutters( $context, $gutter-property );
|
240
238
|
|
241
|
-
|
242
|
-
|
239
|
+
} @else if ( not $is-fluid ) {
|
240
|
+
@include gutters( $property: $gutter-property );
|
243
241
|
|
244
|
-
|
245
|
-
|
246
|
-
|
242
|
+
} @else if $is-fluid and ( not $context ) {
|
243
|
+
@warn $context-warn;
|
244
|
+
}
|
247
245
|
|
248
|
-
} @else if $is-fluid and $context and ( not $grid-init ) {
|
249
|
-
@include gutters( $context );
|
250
|
-
@warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
|
251
|
-
|
252
246
|
} @else if $is-fluid and $context {
|
253
|
-
|
247
|
+
|
248
|
+
@if $at-breakpoint or $init-gutter-property != $default-gutter-property {
|
249
|
+
@include gutters( $context );
|
250
|
+
|
251
|
+
} @else if ( $total-columns < $context ) {
|
252
|
+
@include gutters( $context );
|
253
|
+
@warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
|
254
|
+
|
255
|
+
} @else if ( not $grid-init ) {
|
256
|
+
@include gutters( $context );
|
257
|
+
@warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
|
258
|
+
|
259
|
+
} @else {
|
260
|
+
@extend %ezy-column-#{ $context };
|
261
|
+
}
|
262
|
+
|
254
263
|
|
255
264
|
} @else if $is-fluid { // $context not set
|
265
|
+
|
256
266
|
@warn $context-warn;
|
257
267
|
|
258
|
-
} @else if $grid-init { // Grid is static
|
268
|
+
} @else if $grid-init and $init-gutter-property == $default-gutter-property { // Grid is static
|
259
269
|
@extend %ezy-column;
|
260
270
|
|
261
271
|
} @else {
|
262
|
-
@warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
|
263
272
|
@include gutters( $context );
|
264
|
-
}
|
265
273
|
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
// @include gutters( $context );
|
271
|
-
// } @else if (not $grid-init) {
|
272
|
-
// @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
|
273
|
-
// @include gutters( $context );
|
274
|
-
// } @else {
|
275
|
-
// @extend %ezy-column-#{ $context };
|
276
|
-
// }
|
277
|
-
// } @else {
|
278
|
-
// @include gutters( $context );
|
279
|
-
// }
|
280
|
-
// @if $columns > $context {
|
281
|
-
// @warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
|
282
|
-
// }
|
283
|
-
// @if (not $context) {
|
284
|
-
// @warn $context-warn;
|
285
|
-
// }
|
286
|
-
// } @else if (not $grid-init) {
|
287
|
-
// @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
|
288
|
-
// @include gutters( $context );
|
289
|
-
// } @else {
|
290
|
-
// @extend %ezy-column;
|
291
|
-
// }
|
274
|
+
@if (not $grid-init) {
|
275
|
+
@warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
|
276
|
+
}
|
277
|
+
}
|
292
278
|
}
|
293
279
|
|
data/sass/ezy/_sprites.scss
CHANGED
@@ -7,6 +7,11 @@
|
|
7
7
|
// when compiling your SCSS, read this thread:
|
8
8
|
// https://github.com/chriseppstein/compass/issues/897
|
9
9
|
|
10
|
+
// ---------------------------------------------------------------------------
|
11
|
+
// Global variable for device pixel ratio
|
12
|
+
|
13
|
+
$min-device-pixel-ratio: 2 !default;
|
14
|
+
|
10
15
|
// ---------------------------------------------------------------------------
|
11
16
|
// Sprite map store
|
12
17
|
|
@@ -154,15 +159,16 @@ $sprite-maps: ();
|
|
154
159
|
//
|
155
160
|
// Retina media query mixin
|
156
161
|
|
157
|
-
@mixin at-retina {
|
162
|
+
@mixin at-retina( $ratio: 2 ) {
|
158
163
|
@media
|
159
|
-
only screen and (-webkit-min-device-pixel-ratio:
|
160
|
-
only screen and ( min--moz-device-pixel-ratio:
|
161
|
-
only screen and ( -moz-min-device-pixel-ratio:
|
162
|
-
only screen and (
|
163
|
-
only screen and (
|
164
|
-
only screen and (
|
165
|
-
only screen and ( min-resolution:
|
164
|
+
only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }),
|
165
|
+
only screen and ( min--moz-device-pixel-ratio: #{ $ratio }),
|
166
|
+
only screen and ( -moz-min-device-pixel-ratio: #{ $ratio }),
|
167
|
+
only screen and ( -ms-min-device-pixel-ratio: #{ $ratio }),
|
168
|
+
only screen and ( -o-min-device-pixel-ratio: #{ $ratio }/1),
|
169
|
+
only screen and ( min-device-pixel-ratio: #{ $ratio }),
|
170
|
+
only screen and ( min-resolution: #{ $ratio * 96 }dpi),
|
171
|
+
only screen and ( min-resolution: #{ $ratio }dppx) {
|
166
172
|
@content;
|
167
173
|
}
|
168
174
|
}
|
@@ -226,7 +232,7 @@ $sprite-maps: ();
|
|
226
232
|
}
|
227
233
|
%sprite-placeholder-#{ $name }-retina {
|
228
234
|
@if $sprite-retina {
|
229
|
-
@include at-retina {
|
235
|
+
@include at-retina( $min-device-pixel-ratio ) {
|
230
236
|
/* Retina sprite */
|
231
237
|
background-image: sprite-url( $sprite-retina );
|
232
238
|
background-size: image-width( sprite-path( $sprite-retina ) )/2 auto;
|
@@ -272,7 +278,7 @@ $sprite-maps: ();
|
|
272
278
|
$pos-y: return-offset( nth( $pos, 2 ), $offset-y, "$offset-y must be a number, a pixel value or a percentage!" );
|
273
279
|
background-position: $pos-x $pos-y;
|
274
280
|
@if $retina-map {
|
275
|
-
@include at-retina {
|
281
|
+
@include at-retina( $min-device-pixel-ratio ) {
|
276
282
|
/* Retina sprite */
|
277
283
|
$pos: sprite-position($retina-map, $image);
|
278
284
|
$pos-x: return-offset( nth( $pos, 1 )/2, $offset-x-retina, "$offset-x-retina must be a number, a pixel value or a percentage!" );
|
data/test/css/grid/elastic.css
CHANGED
data/test/css/grid/fluid.css
CHANGED
@@ -42,6 +42,7 @@
|
|
42
42
|
.span-columns-2 {
|
43
43
|
/* Spanning 2 of 12 columns */
|
44
44
|
width: 13.88%;
|
45
|
+
float: left;
|
45
46
|
margin-left: 1.38%;
|
46
47
|
margin-right: 1.38%;
|
47
48
|
}
|
@@ -49,6 +50,7 @@
|
|
49
50
|
.span-columns-4 {
|
50
51
|
/* Spanning 4 of 12 columns */
|
51
52
|
width: 30.55%;
|
53
|
+
float: left;
|
52
54
|
margin-left: 1.38%;
|
53
55
|
margin-right: 1.38%;
|
54
56
|
}
|
@@ -56,6 +58,7 @@
|
|
56
58
|
.span-columns-6 {
|
57
59
|
/* Spanning 6 of 12 columns */
|
58
60
|
width: 47.22%;
|
61
|
+
float: left;
|
59
62
|
margin-left: 1.38%;
|
60
63
|
margin-right: 1.38%;
|
61
64
|
}
|
data/test/css/grid/gutter.css
CHANGED
@@ -9,16 +9,18 @@
|
|
9
9
|
/* -------------------------------------------------------------------- *
|
10
10
|
* Default gutter property
|
11
11
|
*/
|
12
|
-
.gutter-default-
|
13
|
-
/* Spanning
|
14
|
-
width:
|
12
|
+
.gutter-default-a-1 {
|
13
|
+
/* Spanning 1 columns */
|
14
|
+
width: 60px;
|
15
|
+
float: left;
|
15
16
|
margin-left: 15px;
|
16
17
|
margin-right: 15px;
|
17
18
|
}
|
18
19
|
|
19
|
-
.gutter-default-
|
20
|
-
/* Spanning
|
21
|
-
width:
|
20
|
+
.gutter-default-b-1 {
|
21
|
+
/* Spanning 2 columns */
|
22
|
+
width: 150px;
|
23
|
+
float: left;
|
22
24
|
margin-left: 15px;
|
23
25
|
margin-right: 15px;
|
24
26
|
}
|
@@ -26,33 +28,56 @@
|
|
26
28
|
/* -------------------------------------------------------------------- *
|
27
29
|
* Forcing gutter property: padding
|
28
30
|
*/
|
29
|
-
.gutter-padding-2 {
|
31
|
+
.gutter-padding-a-2 {
|
32
|
+
/* Spanning 1 columns */
|
33
|
+
width: 60px;
|
34
|
+
float: left;
|
35
|
+
padding-left: 15px;
|
36
|
+
padding-right: 15px;
|
37
|
+
}
|
38
|
+
|
39
|
+
.gutter-padding-b-2 {
|
30
40
|
/* Spanning 2 columns */
|
31
41
|
width: 150px;
|
32
|
-
|
33
|
-
|
42
|
+
float: left;
|
43
|
+
padding-left: 15px;
|
44
|
+
padding-right: 15px;
|
34
45
|
}
|
35
46
|
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
47
|
+
/* -------------------------------------------------------------------- *
|
48
|
+
* Setting default gutter property to padding
|
49
|
+
*/
|
50
|
+
.gutter-default-a-3 {
|
51
|
+
/* Spanning 1 columns */
|
52
|
+
width: 60px;
|
53
|
+
float: left;
|
54
|
+
padding-left: 15px;
|
55
|
+
padding-right: 15px;
|
56
|
+
}
|
57
|
+
|
58
|
+
.gutter-default-b-3 {
|
59
|
+
/* Spanning 2 columns */
|
60
|
+
width: 150px;
|
61
|
+
float: left;
|
62
|
+
padding-left: 15px;
|
63
|
+
padding-right: 15px;
|
41
64
|
}
|
42
65
|
|
43
66
|
/* -------------------------------------------------------------------- *
|
44
67
|
* Forcing gutter property: margin
|
45
68
|
*/
|
46
|
-
.gutter-margin-
|
47
|
-
/* Spanning
|
48
|
-
width:
|
69
|
+
.gutter-margin-a-4 {
|
70
|
+
/* Spanning 1 columns */
|
71
|
+
width: 60px;
|
72
|
+
float: left;
|
49
73
|
margin-left: 15px;
|
50
74
|
margin-right: 15px;
|
51
75
|
}
|
52
76
|
|
53
|
-
.gutter-margin-
|
54
|
-
/* Spanning
|
55
|
-
width:
|
77
|
+
.gutter-margin-b-4 {
|
78
|
+
/* Spanning 2 columns */
|
79
|
+
width: 150px;
|
80
|
+
float: left;
|
56
81
|
margin-left: 15px;
|
57
82
|
margin-right: 15px;
|
58
83
|
}
|
@@ -60,7 +85,7 @@
|
|
60
85
|
/* -------------------------------------------------------------------- *
|
61
86
|
* Trying again, using grid-init()
|
62
87
|
* -------------------------------------------------------------------- */
|
63
|
-
.gutter-default-
|
88
|
+
.gutter-default-a-5, .gutter-default-b-5 {
|
64
89
|
float: left;
|
65
90
|
margin-left: 15px;
|
66
91
|
margin-right: 15px;
|
@@ -69,46 +94,69 @@
|
|
69
94
|
/* -------------------------------------------------------------------- *
|
70
95
|
* Default gutter property after grid-init()
|
71
96
|
*/
|
72
|
-
.gutter-default-
|
73
|
-
/* Spanning
|
74
|
-
width:
|
97
|
+
.gutter-default-a-5 {
|
98
|
+
/* Spanning 1 columns */
|
99
|
+
width: 60px;
|
75
100
|
}
|
76
101
|
|
77
|
-
.gutter-default-
|
78
|
-
/* Spanning
|
79
|
-
width:
|
102
|
+
.gutter-default-b-5 {
|
103
|
+
/* Spanning 2 columns */
|
104
|
+
width: 150px;
|
80
105
|
}
|
81
106
|
|
82
107
|
/* -------------------------------------------------------------------- *
|
83
108
|
* Forcing gutter property: padding after grid-init()
|
84
109
|
*/
|
85
|
-
.gutter-padding-
|
110
|
+
.gutter-padding-a-6 {
|
111
|
+
/* Spanning 1 columns */
|
112
|
+
width: 60px;
|
113
|
+
float: left;
|
114
|
+
padding-left: 15px;
|
115
|
+
padding-right: 15px;
|
116
|
+
}
|
117
|
+
|
118
|
+
.gutter-padding-b-6 {
|
86
119
|
/* Spanning 2 columns */
|
87
120
|
width: 150px;
|
88
|
-
|
89
|
-
|
121
|
+
float: left;
|
122
|
+
padding-left: 15px;
|
123
|
+
padding-right: 15px;
|
90
124
|
}
|
91
125
|
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
126
|
+
/* -------------------------------------------------------------------- *
|
127
|
+
* Setting default gutter property to padding after grid-init()
|
128
|
+
*/
|
129
|
+
.gutter-default-a-7 {
|
130
|
+
/* Spanning 1 columns */
|
131
|
+
width: 60px;
|
132
|
+
float: left;
|
133
|
+
padding-left: 15px;
|
134
|
+
padding-right: 15px;
|
135
|
+
}
|
136
|
+
|
137
|
+
.gutter-default-b-7 {
|
138
|
+
/* Spanning 2 columns */
|
139
|
+
width: 150px;
|
140
|
+
float: left;
|
141
|
+
padding-left: 15px;
|
142
|
+
padding-right: 15px;
|
97
143
|
}
|
98
144
|
|
99
145
|
/* -------------------------------------------------------------------- *
|
100
146
|
* Forcing gutter property: margin after grid-init()
|
101
147
|
*/
|
102
|
-
.gutter-margin-
|
103
|
-
/* Spanning
|
104
|
-
width:
|
148
|
+
.gutter-margin-a-8 {
|
149
|
+
/* Spanning 1 columns */
|
150
|
+
width: 60px;
|
151
|
+
float: left;
|
105
152
|
margin-left: 15px;
|
106
153
|
margin-right: 15px;
|
107
154
|
}
|
108
155
|
|
109
|
-
.gutter-margin-
|
110
|
-
/* Spanning
|
111
|
-
width:
|
156
|
+
.gutter-margin-b-8 {
|
157
|
+
/* Spanning 2 columns */
|
158
|
+
width: 150px;
|
159
|
+
float: left;
|
112
160
|
margin-left: 15px;
|
113
161
|
margin-right: 15px;
|
114
162
|
}
|
@@ -116,7 +164,7 @@
|
|
116
164
|
/* -------------------------------------------------------------------- *
|
117
165
|
* Again, now with a fluid grid
|
118
166
|
* -------------------------------------------------------------------- */
|
119
|
-
.gutter-default-
|
167
|
+
.gutter-default-a-9, .gutter-default-b-9 {
|
120
168
|
float: left;
|
121
169
|
margin-left: 2.77%;
|
122
170
|
margin-right: 2.77%;
|
@@ -125,29 +173,50 @@
|
|
125
173
|
/* -------------------------------------------------------------------- *
|
126
174
|
* Default gutter property after grid-init()
|
127
175
|
*/
|
128
|
-
.gutter-default-
|
129
|
-
/* Spanning 2 of 6 columns */
|
130
|
-
width: 27.77%;
|
131
|
-
}
|
132
|
-
|
133
|
-
.gutter-default-3 {
|
176
|
+
.gutter-default-a-9 {
|
134
177
|
/* Spanning 3 of 6 columns */
|
135
178
|
width: 44.44%;
|
136
179
|
}
|
137
180
|
|
181
|
+
.gutter-default-b-9 {
|
182
|
+
/* Spanning 6 of 6 columns */
|
183
|
+
width: 94.44%;
|
184
|
+
}
|
185
|
+
|
138
186
|
/* -------------------------------------------------------------------- *
|
139
187
|
* Forcing gutter property: padding after grid-init()
|
140
188
|
*/
|
141
|
-
.gutter-padding-
|
142
|
-
/* Spanning
|
143
|
-
width:
|
189
|
+
.gutter-padding-a-10 {
|
190
|
+
/* Spanning 3 of 6 columns */
|
191
|
+
width: 44.44%;
|
192
|
+
float: left;
|
193
|
+
padding-left: 2.77%;
|
194
|
+
padding-right: 2.77%;
|
195
|
+
}
|
196
|
+
|
197
|
+
.gutter-padding-b-10 {
|
198
|
+
/* Spanning 6 of 6 columns */
|
199
|
+
width: 94.44%;
|
200
|
+
float: left;
|
144
201
|
padding-left: 2.77%;
|
145
202
|
padding-right: 2.77%;
|
146
203
|
}
|
147
204
|
|
148
|
-
|
205
|
+
/* -------------------------------------------------------------------- *
|
206
|
+
* Setting default gutter property to padding after grid-init()
|
207
|
+
*/
|
208
|
+
.gutter-default-a-11 {
|
149
209
|
/* Spanning 3 of 6 columns */
|
150
210
|
width: 44.44%;
|
211
|
+
float: left;
|
212
|
+
padding-left: 2.77%;
|
213
|
+
padding-right: 2.77%;
|
214
|
+
}
|
215
|
+
|
216
|
+
.gutter-default-b-11 {
|
217
|
+
/* Spanning 6 of 6 columns */
|
218
|
+
width: 94.44%;
|
219
|
+
float: left;
|
151
220
|
padding-left: 2.77%;
|
152
221
|
padding-right: 2.77%;
|
153
222
|
}
|
@@ -155,16 +224,18 @@
|
|
155
224
|
/* -------------------------------------------------------------------- *
|
156
225
|
* Forcing gutter property: margin after grid-init()
|
157
226
|
*/
|
158
|
-
.gutter-margin-
|
159
|
-
/* Spanning
|
160
|
-
width:
|
227
|
+
.gutter-margin-a-12 {
|
228
|
+
/* Spanning 3 of 6 columns */
|
229
|
+
width: 44.44%;
|
230
|
+
float: left;
|
161
231
|
margin-left: 2.77%;
|
162
232
|
margin-right: 2.77%;
|
163
233
|
}
|
164
234
|
|
165
|
-
.gutter-margin-
|
166
|
-
/* Spanning
|
167
|
-
width:
|
235
|
+
.gutter-margin-b-12 {
|
236
|
+
/* Spanning 6 of 6 columns */
|
237
|
+
width: 94.44%;
|
238
|
+
float: left;
|
168
239
|
margin-left: 2.77%;
|
169
240
|
margin-right: 2.77%;
|
170
241
|
}
|
@@ -56,6 +56,7 @@
|
|
56
56
|
.column {
|
57
57
|
/* Spanning 4 of 4 columns */
|
58
58
|
width: 91.66%;
|
59
|
+
float: left;
|
59
60
|
margin-left: 4.16%;
|
60
61
|
margin-right: 4.16%;
|
61
62
|
}
|
@@ -63,6 +64,7 @@
|
|
63
64
|
.column {
|
64
65
|
/* Spanning 4 of 8 columns */
|
65
66
|
width: 45.83%;
|
67
|
+
float: left;
|
66
68
|
margin-left: 2.08%;
|
67
69
|
margin-right: 2.08%;
|
68
70
|
}
|
@@ -71,6 +73,7 @@
|
|
71
73
|
.column {
|
72
74
|
/* Spanning 4 of 12 columns */
|
73
75
|
width: 30.55%;
|
76
|
+
float: left;
|
74
77
|
margin-left: 1.38%;
|
75
78
|
margin-right: 1.38%;
|
76
79
|
}
|
@@ -79,6 +82,7 @@
|
|
79
82
|
/* Fallback for browsers not supporting media queries */
|
80
83
|
/* Spanning 4 of 12 columns */
|
81
84
|
width: 30.55%;
|
85
|
+
float: left;
|
82
86
|
margin-left: 1.38%;
|
83
87
|
margin-right: 1.38%;
|
84
88
|
}
|
data/test/css/grid/static.css
CHANGED
@@ -42,6 +42,7 @@
|
|
42
42
|
.span-columns-2 {
|
43
43
|
/* Spanning 2 columns */
|
44
44
|
width: 150px;
|
45
|
+
float: left;
|
45
46
|
margin-left: 15px;
|
46
47
|
margin-right: 15px;
|
47
48
|
}
|
@@ -49,6 +50,7 @@
|
|
49
50
|
.span-columns-4 {
|
50
51
|
/* Spanning 4 columns */
|
51
52
|
width: 330px;
|
53
|
+
float: left;
|
52
54
|
margin-left: 15px;
|
53
55
|
margin-right: 15px;
|
54
56
|
}
|
@@ -56,6 +58,7 @@
|
|
56
58
|
.span-columns-6 {
|
57
59
|
/* Spanning 6 columns */
|
58
60
|
width: 510px;
|
61
|
+
float: left;
|
59
62
|
margin-left: 15px;
|
60
63
|
margin-right: 15px;
|
61
64
|
}
|
data/test/css/sprites/layout.css
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
.classic {
|
2
|
-
background-image: url('../../img/test-layout.png?
|
2
|
+
background-image: url('../../img/test-layout.png?19551384282552');
|
3
3
|
background-repeat: no-repeat;
|
4
4
|
}
|
5
5
|
|
6
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
6
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
7
7
|
.classic {
|
8
8
|
/* Retina sprite */
|
9
|
-
background-image: url('../../img/test-layout@2x.png?
|
9
|
+
background-image: url('../../img/test-layout@2x.png?19551384282552');
|
10
10
|
background-size: 718px auto;
|
11
11
|
}
|
12
12
|
}
|
@@ -14,7 +14,7 @@
|
|
14
14
|
.classic {
|
15
15
|
background-position: -159px -140px;
|
16
16
|
}
|
17
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
17
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
18
18
|
.classic {
|
19
19
|
/* Retina sprite */
|
20
20
|
background-position: -209px 0;
|
@@ -3,14 +3,14 @@
|
|
3
3
|
* Compiled 2x sprite has all images aligned to the right
|
4
4
|
*/
|
5
5
|
.vertical {
|
6
|
-
background-image: url('../../img/test-position.png?
|
6
|
+
background-image: url('../../img/test-position.png?19551384282552');
|
7
7
|
background-repeat: no-repeat;
|
8
8
|
}
|
9
9
|
|
10
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
10
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
11
11
|
.vertical {
|
12
12
|
/* Retina sprite */
|
13
|
-
background-image: url('../../img/test-position@2x.png?
|
13
|
+
background-image: url('../../img/test-position@2x.png?19551384282552');
|
14
14
|
background-size: 281px auto;
|
15
15
|
}
|
16
16
|
}
|
@@ -20,14 +20,14 @@
|
|
20
20
|
* Compiled 2x sprite has all images aligned to the bottom
|
21
21
|
*/
|
22
22
|
.horizontal {
|
23
|
-
background-image: url('../../img/test-position-alt.png?
|
23
|
+
background-image: url('../../img/test-position-alt.png?19551384282552');
|
24
24
|
background-repeat: no-repeat;
|
25
25
|
}
|
26
26
|
|
27
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
27
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
28
28
|
.horizontal {
|
29
29
|
/* Retina sprite */
|
30
|
-
background-image: url('../../img/test-position-alt@2x.png?
|
30
|
+
background-image: url('../../img/test-position-alt@2x.png?19551384282552');
|
31
31
|
background-size: 421px auto;
|
32
32
|
}
|
33
33
|
}
|
@@ -39,7 +39,7 @@
|
|
39
39
|
.vertical {
|
40
40
|
background-position: 50% -200px;
|
41
41
|
}
|
42
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
42
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
43
43
|
.vertical {
|
44
44
|
/* Retina sprite */
|
45
45
|
background-position: 100% -200px;
|
@@ -53,7 +53,7 @@
|
|
53
53
|
.horizontal {
|
54
54
|
background-position: -281px 50%;
|
55
55
|
}
|
56
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
56
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
57
57
|
.horizontal {
|
58
58
|
/* Retina sprite */
|
59
59
|
background-position: -281px 100%;
|
data/test/css/sprites/repeat.css
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
.meassure-1, .meassure-2, .meassure-3 {
|
2
|
-
background-image: url('../../img/test-repeat.png?
|
2
|
+
background-image: url('../../img/test-repeat.png?19551384282552');
|
3
3
|
background-repeat: repeat-x;
|
4
4
|
}
|
5
5
|
|
6
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
6
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
7
7
|
.meassure-1, .meassure-2, .meassure-3 {
|
8
8
|
/* Retina sprite */
|
9
|
-
background-image: url('../../img/test-repeat@2x.png?
|
9
|
+
background-image: url('../../img/test-repeat@2x.png?19551384282552');
|
10
10
|
background-size: 378px auto;
|
11
11
|
background-repeat: no-repeat;
|
12
12
|
}
|
@@ -17,7 +17,7 @@
|
|
17
17
|
width: 378px;
|
18
18
|
height: 50px;
|
19
19
|
}
|
20
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
20
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
21
21
|
.meassure-1 {
|
22
22
|
/* Retina sprite */
|
23
23
|
background-position: -252px -100px;
|
@@ -29,7 +29,7 @@
|
|
29
29
|
width: 378px;
|
30
30
|
height: 50px;
|
31
31
|
}
|
32
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
32
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
33
33
|
.meassure-2 {
|
34
34
|
/* Retina sprite */
|
35
35
|
background-position: -126px -50px;
|
@@ -41,7 +41,7 @@
|
|
41
41
|
width: 378px;
|
42
42
|
height: 50px;
|
43
43
|
}
|
44
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
44
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
45
45
|
.meassure-3 {
|
46
46
|
/* Retina sprite */
|
47
47
|
background-position: 0 0;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
/* -------------------------------------------------------------------- *
|
2
|
+
* Min device pixel ratio changed to 1.7
|
3
|
+
*/
|
4
|
+
.classic {
|
5
|
+
background-image: url('../../img/test-retina.png?19551384282552');
|
6
|
+
background-repeat: no-repeat;
|
7
|
+
}
|
8
|
+
|
9
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 1.7), only screen and (min--moz-device-pixel-ratio: 1.7), only screen and (-moz-min-device-pixel-ratio: 1.7), only screen and (-ms-min-device-pixel-ratio: 1.7), only screen and (-o-min-device-pixel-ratio: 1.7 / 1), only screen and (min-device-pixel-ratio: 1.7), only screen and (min-resolution: 163.2dpi), only screen and (min-resolution: 1.7dppx) {
|
10
|
+
.classic {
|
11
|
+
/* Retina sprite */
|
12
|
+
background-image: url('../../img/test-retina@2x.png?19551384282552');
|
13
|
+
background-size: 152px auto;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
.classic {
|
18
|
+
background-position: 0 -281px;
|
19
|
+
}
|
20
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 1.7), only screen and (min--moz-device-pixel-ratio: 1.7), only screen and (-moz-min-device-pixel-ratio: 1.7), only screen and (-ms-min-device-pixel-ratio: 1.7), only screen and (-o-min-device-pixel-ratio: 1.7 / 1), only screen and (min-device-pixel-ratio: 1.7), only screen and (min-resolution: 163.2dpi), only screen and (min-resolution: 1.7dppx) {
|
21
|
+
.classic {
|
22
|
+
/* Retina sprite */
|
23
|
+
background-position: 0 -140px;
|
24
|
+
}
|
25
|
+
}
|
data/test/css/sprites/retina.css
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
.classic, .indy, .alien {
|
2
|
-
background-image: url('../../img/test-retina.png?
|
2
|
+
background-image: url('../../img/test-retina.png?19551384282552');
|
3
3
|
background-repeat: no-repeat;
|
4
4
|
}
|
5
5
|
|
6
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
6
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
7
7
|
.classic, .indy {
|
8
8
|
/* Retina sprite */
|
9
|
-
background-image: url('../../img/test-retina@2x.png?
|
9
|
+
background-image: url('../../img/test-retina@2x.png?19551384282552');
|
10
10
|
background-size: 152px auto;
|
11
11
|
}
|
12
12
|
}
|
@@ -16,7 +16,7 @@
|
|
16
16
|
width: 152px;
|
17
17
|
height: 135px;
|
18
18
|
}
|
19
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
19
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
20
20
|
.classic {
|
21
21
|
/* Retina sprite */
|
22
22
|
background-position: 0 -140px;
|
@@ -28,7 +28,7 @@
|
|
28
28
|
width: 128px;
|
29
29
|
height: 140px;
|
30
30
|
}
|
31
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
31
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
32
32
|
.indy {
|
33
33
|
/* Retina sprite */
|
34
34
|
background-position: 0 0;
|
data/test/css/sprites/simple.css
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
.classic {
|
2
|
-
background-image: url('../../img/test-spacing.png?
|
2
|
+
background-image: url('../../img/test-spacing.png?19551384282552');
|
3
3
|
background-repeat: no-repeat;
|
4
4
|
}
|
5
5
|
|
6
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
6
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
7
7
|
.classic {
|
8
8
|
/* Retina sprite */
|
9
|
-
background-image: url('../../img/test-spacing@2x.png?
|
9
|
+
background-image: url('../../img/test-spacing@2x.png?19551384282552');
|
10
10
|
background-size: 159px auto;
|
11
11
|
}
|
12
12
|
}
|
@@ -14,7 +14,7 @@
|
|
14
14
|
.classic {
|
15
15
|
background-position: 0 -381px;
|
16
16
|
}
|
17
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
17
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
18
18
|
.classic {
|
19
19
|
/* Retina sprite */
|
20
20
|
background-position: 0 -481px;
|
data/test/scss/grid/gutter.scss
CHANGED
@@ -9,138 +9,173 @@
|
|
9
9
|
|
10
10
|
$column-width: 60px;
|
11
11
|
$gutter-width: 30px;
|
12
|
-
$total-columns:
|
12
|
+
$total-columns: 3;
|
13
13
|
$is-fluid: false;
|
14
14
|
|
15
15
|
/* -------------------------------------------------------------------- *
|
16
16
|
* Default gutter property
|
17
17
|
*/
|
18
18
|
|
19
|
-
.gutter-default-
|
20
|
-
@include span-columns(
|
19
|
+
.gutter-default-a-1 {
|
20
|
+
@include span-columns( 1 );
|
21
21
|
}
|
22
22
|
|
23
|
-
.gutter-default-
|
24
|
-
@include span-columns(
|
23
|
+
.gutter-default-b-1 {
|
24
|
+
@include span-columns( 2 );
|
25
25
|
}
|
26
26
|
|
27
27
|
/* -------------------------------------------------------------------- *
|
28
28
|
* Forcing gutter property: padding
|
29
29
|
*/
|
30
30
|
|
31
|
-
.gutter-padding-2 {
|
31
|
+
.gutter-padding-a-2 {
|
32
|
+
@include span-columns( 1, $gutter-property: "padding" );
|
33
|
+
}
|
34
|
+
|
35
|
+
.gutter-padding-b-2 {
|
32
36
|
@include span-columns( 2, $gutter-property: "padding" );
|
33
37
|
}
|
34
38
|
|
35
|
-
|
36
|
-
|
39
|
+
/* -------------------------------------------------------------------- *
|
40
|
+
* Setting default gutter property to padding
|
41
|
+
*/
|
42
|
+
|
43
|
+
$default-gutter-property: "padding";
|
44
|
+
|
45
|
+
.gutter-default-a-3 {
|
46
|
+
@include span-columns( 1 );
|
37
47
|
}
|
38
48
|
|
49
|
+
.gutter-default-b-3 {
|
50
|
+
@include span-columns( 2 );
|
51
|
+
}
|
39
52
|
|
40
53
|
/* -------------------------------------------------------------------- *
|
41
54
|
* Forcing gutter property: margin
|
42
55
|
*/
|
43
56
|
|
44
|
-
.gutter-margin-
|
45
|
-
@include span-columns(
|
57
|
+
.gutter-margin-a-4 {
|
58
|
+
@include span-columns( 1, $gutter-property: "margin" );
|
46
59
|
}
|
47
60
|
|
48
|
-
.gutter-margin-
|
49
|
-
@include span-columns(
|
61
|
+
.gutter-margin-b-4 {
|
62
|
+
@include span-columns( 2, $gutter-property: "margin" );
|
50
63
|
}
|
51
64
|
|
52
|
-
|
53
65
|
/* -------------------------------------------------------------------- *
|
54
66
|
* Trying again, using grid-init()
|
55
67
|
* -------------------------------------------------------------------- */
|
56
68
|
|
69
|
+
$default-gutter-property: "margin";
|
57
70
|
@include grid-init();
|
58
71
|
|
59
72
|
/* -------------------------------------------------------------------- *
|
60
73
|
* Default gutter property after grid-init()
|
61
74
|
*/
|
62
75
|
|
63
|
-
.gutter-default-
|
64
|
-
@include span-columns(
|
76
|
+
.gutter-default-a-5 {
|
77
|
+
@include span-columns( 1 );
|
65
78
|
}
|
66
79
|
|
67
|
-
.gutter-default-
|
68
|
-
@include span-columns(
|
80
|
+
.gutter-default-b-5 {
|
81
|
+
@include span-columns( 2 );
|
69
82
|
}
|
70
83
|
|
71
|
-
|
72
84
|
/* -------------------------------------------------------------------- *
|
73
85
|
* Forcing gutter property: padding after grid-init()
|
74
86
|
*/
|
75
87
|
|
76
|
-
.gutter-padding-
|
88
|
+
.gutter-padding-a-6 {
|
89
|
+
@include span-columns( 1, $gutter-property: "padding" );
|
90
|
+
}
|
91
|
+
|
92
|
+
.gutter-padding-b-6 {
|
77
93
|
@include span-columns( 2, $gutter-property: "padding" );
|
78
94
|
}
|
79
95
|
|
80
|
-
|
81
|
-
|
96
|
+
/* -------------------------------------------------------------------- *
|
97
|
+
* Setting default gutter property to padding after grid-init()
|
98
|
+
*/
|
99
|
+
|
100
|
+
$default-gutter-property: "padding";
|
101
|
+
|
102
|
+
.gutter-default-a-7 {
|
103
|
+
@include span-columns( 1 );
|
82
104
|
}
|
83
105
|
|
106
|
+
.gutter-default-b-7 {
|
107
|
+
@include span-columns( 2 );
|
108
|
+
}
|
84
109
|
|
85
110
|
/* -------------------------------------------------------------------- *
|
86
111
|
* Forcing gutter property: margin after grid-init()
|
87
112
|
*/
|
88
113
|
|
89
|
-
.gutter-margin-
|
90
|
-
@include span-columns(
|
114
|
+
.gutter-margin-a-8 {
|
115
|
+
@include span-columns( 1, $gutter-property: "margin" );
|
91
116
|
}
|
92
117
|
|
93
|
-
.gutter-margin-
|
94
|
-
@include span-columns(
|
118
|
+
.gutter-margin-b-8 {
|
119
|
+
@include span-columns( 2, $gutter-property: "margin" );
|
95
120
|
}
|
96
121
|
|
97
|
-
|
98
|
-
|
99
122
|
/* -------------------------------------------------------------------- *
|
100
123
|
* Again, now with a fluid grid
|
101
124
|
* -------------------------------------------------------------------- */
|
102
125
|
|
126
|
+
$default-gutter-property: "margin";
|
103
127
|
$is-fluid: true;
|
128
|
+
$total-columns: 6; // resetting column count to create new set of placeholder selectors
|
104
129
|
@include grid-init();
|
105
130
|
|
106
131
|
/* -------------------------------------------------------------------- *
|
107
132
|
* Default gutter property after grid-init()
|
108
133
|
*/
|
109
134
|
|
110
|
-
.gutter-default-
|
111
|
-
@include span-columns( 2, $total-columns );
|
112
|
-
}
|
113
|
-
|
114
|
-
.gutter-default-3 {
|
135
|
+
.gutter-default-a-9 {
|
115
136
|
@include span-columns( 3, $total-columns );
|
116
137
|
}
|
117
138
|
|
139
|
+
.gutter-default-b-9 {
|
140
|
+
@include span-columns( 6, $total-columns );
|
141
|
+
}
|
118
142
|
|
119
143
|
/* -------------------------------------------------------------------- *
|
120
144
|
* Forcing gutter property: padding after grid-init()
|
121
145
|
*/
|
122
146
|
|
123
|
-
.gutter-padding-
|
124
|
-
@include span-columns( 2, $total-columns, $gutter-property: "padding" );
|
125
|
-
}
|
126
|
-
|
127
|
-
.gutter-padding-3 {
|
147
|
+
.gutter-padding-a-10 {
|
128
148
|
@include span-columns( 3, $total-columns, $gutter-property: "padding" );
|
129
149
|
}
|
130
150
|
|
151
|
+
.gutter-padding-b-10 {
|
152
|
+
@include span-columns( 6, $total-columns, $gutter-property: "padding" );
|
153
|
+
}
|
131
154
|
|
132
155
|
/* -------------------------------------------------------------------- *
|
133
|
-
*
|
156
|
+
* Setting default gutter property to padding after grid-init()
|
134
157
|
*/
|
135
158
|
|
136
|
-
|
137
|
-
|
159
|
+
$default-gutter-property: "padding";
|
160
|
+
|
161
|
+
.gutter-default-a-11 {
|
162
|
+
@include span-columns( 3, $total-columns );
|
138
163
|
}
|
139
164
|
|
140
|
-
.gutter-
|
141
|
-
@include span-columns(
|
165
|
+
.gutter-default-b-11 {
|
166
|
+
@include span-columns( 6, $total-columns );
|
142
167
|
}
|
143
168
|
|
169
|
+
/* -------------------------------------------------------------------- *
|
170
|
+
* Forcing gutter property: margin after grid-init()
|
171
|
+
*/
|
144
172
|
|
173
|
+
.gutter-margin-a-12 {
|
174
|
+
@include span-columns( 3, $total-columns, $gutter-property: "margin" );
|
175
|
+
}
|
176
|
+
|
177
|
+
.gutter-margin-b-12 {
|
178
|
+
@include span-columns( 6, $total-columns, $gutter-property: "margin" );
|
179
|
+
}
|
145
180
|
|
146
181
|
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Imports
|
3
|
+
|
4
|
+
@import "../../../sass/ezy/sprites";
|
5
|
+
|
6
|
+
/* -------------------------------------------------------------------- *
|
7
|
+
* Min device pixel ratio changed to 1.7
|
8
|
+
*/
|
9
|
+
|
10
|
+
$min-device-pixel-ratio: 1.7;
|
11
|
+
|
12
|
+
@include make-sprite(
|
13
|
+
$name: "base",
|
14
|
+
$folder: "test-retina",
|
15
|
+
$folder-retina: "test-retina@2x"
|
16
|
+
);
|
17
|
+
|
18
|
+
// ---------------------------------------------------------------------------
|
19
|
+
// Use sprite
|
20
|
+
|
21
|
+
.classic {
|
22
|
+
@include background-sprite( "base", "classic" );
|
23
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ezy
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.8
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Frej Raahede Nielsen
|
@@ -69,6 +69,7 @@ files:
|
|
69
69
|
- test/css/sprites/layout.css
|
70
70
|
- test/css/sprites/position.css
|
71
71
|
- test/css/sprites/repeat.css
|
72
|
+
- test/css/sprites/resolution.css
|
72
73
|
- test/css/sprites/retina.css
|
73
74
|
- test/css/sprites/simple.css
|
74
75
|
- test/css/sprites/size.css
|
@@ -82,6 +83,7 @@ files:
|
|
82
83
|
- test/scss/sprites/layout.scss
|
83
84
|
- test/scss/sprites/position.scss
|
84
85
|
- test/scss/sprites/repeat.scss
|
86
|
+
- test/scss/sprites/resolution.scss
|
85
87
|
- test/scss/sprites/retina.scss
|
86
88
|
- test/scss/sprites/simple.scss
|
87
89
|
- test/scss/sprites/size.scss
|