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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 2db028b1b54ee4478a578c73861f6a2774c0c7e7
4
- data.tar.gz: 8bdc70fb9e4bb8e24e8899c58cd79937d60887aa
3
+ metadata.gz: e7b9087ea62ca40b3cdf5404be3e1369b8fd5620
4
+ data.tar.gz: 5cc4539b113cd219ec2a6c1a24e7af0eb507201b
5
5
  SHA512:
6
- metadata.gz: b893755fa359ce97acde2510107a7bc8251b96d946e0ec4cb1823a2d681deecbc83906420f7e6a2614342add619cb467e7c24d045cf6bdeb89aef7bf05a96086
7
- data.tar.gz: 7edaf0a3bdd6578ae0886bc148ce1324168ecee35f0b688d08dfba33f7eed87fcfd69c3b992057cb5a759fbdbfcbd44f9654fdbb89f648c611134163a178d52f
6
+ metadata.gz: 13b0c11a859f8f4eef501a676b28af83cd2da38eafec70d3b3ae45833695c6763284d3aefd5d74e2faa633e71fd8f02817cbb8dac3cf04b4ba3715da83311bb4
7
+ data.tar.gz: 7e490d565c7eb6c7114164134ddd7d77341a12a54f94e5a1458bf32b5293ddf57be29c53f0c3df4312fb273b7a8da78b5eed58da2cfc07f97ea34bec0083a675
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.0.6
1
+ 0.0.8
data/ezy.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |s|
4
4
  # Release Specific Information
5
- s.version = "0.0.7"
5
+ s.version = "0.0.8"
6
6
  s.date = "2013-11-12"
7
7
 
8
8
  # Gem Details
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: 4em !default;
12
- $gutter-width: 1em !default;
13
- $gutter-property: "margin" !default;
14
- $total-columns: 12 !default;
15
- $is-fluid: true !default;
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
- } @else if $gutter-property and $is-fluid and ( not $context ) {
236
- @warn $context-warn;
234
+ @if $gutter-property and $gutter-property != $default-gutter-property {
237
235
 
238
- } @else if $gutter-property and ( not $is-fluid ) {
239
- @include gutters( $gutter-property );
236
+ @if $is-fluid and $context {
237
+ @include gutters( $context, $gutter-property );
240
238
 
241
- } @else if $is-fluid and $context and $at-breakpoint {
242
- @include gutters( $context );
239
+ } @else if ( not $is-fluid ) {
240
+ @include gutters( $property: $gutter-property );
243
241
 
244
- } @else if $is-fluid and $context and ( $total-columns < $context ) {
245
- @include gutters( $context );
246
- @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.";
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
- @extend %ezy-column-#{ $context };
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
- // @if $is-fluid {
267
- // @if (not $at-breakpoint) {
268
- // @if $total-columns < $context {
269
- // @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.";
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
 
@@ -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: 2),
160
- only screen and ( min--moz-device-pixel-ratio: 2),
161
- only screen and ( -moz-min-device-pixel-ratio: 2),
162
- only screen and ( -o-min-device-pixel-ratio: 2/1),
163
- only screen and ( min-device-pixel-ratio: 2),
164
- only screen and ( min-resolution: 192dpi),
165
- only screen and ( min-resolution: 2dppx) {
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!" );
@@ -54,6 +54,7 @@
54
54
  .column {
55
55
  /* Spanning 4 of 12 columns */
56
56
  width: 30.55%;
57
+ float: left;
57
58
  margin-left: 1.38%;
58
59
  margin-right: 1.38%;
59
60
  }
@@ -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
  }
@@ -9,16 +9,18 @@
9
9
  /* -------------------------------------------------------------------- *
10
10
  * Default gutter property
11
11
  */
12
- .gutter-default-2 {
13
- /* Spanning 2 columns */
14
- width: 150px;
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-3 {
20
- /* Spanning 3 columns */
21
- width: 240px;
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
- margin-left: 15px;
33
- margin-right: 15px;
42
+ float: left;
43
+ padding-left: 15px;
44
+ padding-right: 15px;
34
45
  }
35
46
 
36
- .gutter-padding-3 {
37
- /* Spanning 3 columns */
38
- width: 240px;
39
- margin-left: 15px;
40
- margin-right: 15px;
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-2 {
47
- /* Spanning 2 columns */
48
- width: 150px;
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-3 {
54
- /* Spanning 3 columns */
55
- width: 240px;
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-2, .gutter-default-3 {
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-2 {
73
- /* Spanning 2 columns */
74
- width: 150px;
97
+ .gutter-default-a-5 {
98
+ /* Spanning 1 columns */
99
+ width: 60px;
75
100
  }
76
101
 
77
- .gutter-default-3 {
78
- /* Spanning 3 columns */
79
- width: 240px;
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-2 {
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
- margin-left: 15px;
89
- margin-right: 15px;
121
+ float: left;
122
+ padding-left: 15px;
123
+ padding-right: 15px;
90
124
  }
91
125
 
92
- .gutter-padding-3 {
93
- /* Spanning 3 columns */
94
- width: 240px;
95
- margin-left: 15px;
96
- margin-right: 15px;
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-2 {
103
- /* Spanning 2 columns */
104
- width: 150px;
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-3 {
110
- /* Spanning 3 columns */
111
- width: 240px;
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-2, .gutter-default-3 {
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-2 {
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-2 {
142
- /* Spanning 2 of 6 columns */
143
- width: 27.77%;
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
- .gutter-padding-3 {
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-2 {
159
- /* Spanning 2 of 6 columns */
160
- width: 27.77%;
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-3 {
166
- /* Spanning 3 of 6 columns */
167
- width: 44.44%;
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
  }
@@ -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
  }
@@ -1,12 +1,12 @@
1
1
  .classic {
2
- background-image: url('../../img/test-layout.png?19081384279708');
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?19081384279708');
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?19151384280136');
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?19151384280136');
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?19151384280136');
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?19151384280136');
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%;
@@ -1,12 +1,12 @@
1
1
  .meassure-1, .meassure-2, .meassure-3 {
2
- background-image: url('../../img/test-repeat.png?19081384279708');
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?19081384279708');
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
+ }
@@ -1,12 +1,12 @@
1
1
  .classic, .indy, .alien {
2
- background-image: url('../../img/test-retina.png?19081384279708');
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?19081384279708');
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;
@@ -1,5 +1,5 @@
1
1
  .classic, .indy {
2
- background-image: url('../../img/test-simple.png?19081384279708');
2
+ background-image: url('../../img/test-simple.png?19551384282552');
3
3
  background-repeat: no-repeat;
4
4
  }
5
5
 
@@ -1,12 +1,12 @@
1
1
  .classic {
2
- background-image: url('../../img/test-spacing.png?19081384279708');
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?19081384279708');
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;
@@ -9,138 +9,173 @@
9
9
 
10
10
  $column-width: 60px;
11
11
  $gutter-width: 30px;
12
- $total-columns: 6;
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-2 {
20
- @include span-columns( 2 );
19
+ .gutter-default-a-1 {
20
+ @include span-columns( 1 );
21
21
  }
22
22
 
23
- .gutter-default-3 {
24
- @include span-columns( 3 );
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
- .gutter-padding-3 {
36
- @include span-columns( 3, $gutter-property: "padding" );
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-2 {
45
- @include span-columns( 2, $gutter-property: "margin" );
57
+ .gutter-margin-a-4 {
58
+ @include span-columns( 1, $gutter-property: "margin" );
46
59
  }
47
60
 
48
- .gutter-margin-3 {
49
- @include span-columns( 3, $gutter-property: "margin" );
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-2 {
64
- @include span-columns( 2 );
76
+ .gutter-default-a-5 {
77
+ @include span-columns( 1 );
65
78
  }
66
79
 
67
- .gutter-default-3 {
68
- @include span-columns( 3 );
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-2 {
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
- .gutter-padding-3 {
81
- @include span-columns( 3, $gutter-property: "padding" );
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-2 {
90
- @include span-columns( 2, $gutter-property: "margin" );
114
+ .gutter-margin-a-8 {
115
+ @include span-columns( 1, $gutter-property: "margin" );
91
116
  }
92
117
 
93
- .gutter-margin-3 {
94
- @include span-columns( 3, $gutter-property: "margin" );
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-2 {
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-2 {
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
- * Forcing gutter property: margin after grid-init()
156
+ * Setting default gutter property to padding after grid-init()
134
157
  */
135
158
 
136
- .gutter-margin-2 {
137
- @include span-columns( 2, $total-columns, $gutter-property: "margin" );
159
+ $default-gutter-property: "padding";
160
+
161
+ .gutter-default-a-11 {
162
+ @include span-columns( 3, $total-columns );
138
163
  }
139
164
 
140
- .gutter-margin-3 {
141
- @include span-columns( 3, $total-columns, $gutter-property: "margin" );
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.7
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