ezy 0.0.7 → 0.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/VERSION +1 -1
  3. data/ezy.gemspec +1 -1
  4. data/sass/ezy/_grid.scss +39 -53
  5. data/sass/ezy/_sprites.scss +16 -10
  6. data/test/css/grid/elastic.css +1 -0
  7. data/test/css/grid/fluid.css +3 -0
  8. data/test/css/grid/gutter.css +129 -58
  9. data/test/css/grid/responsive.css +4 -0
  10. data/test/css/grid/static.css +3 -0
  11. data/test/css/sprites/layout.css +4 -4
  12. data/test/css/sprites/position.css +8 -8
  13. data/test/css/sprites/repeat.css +6 -6
  14. data/test/css/sprites/resolution.css +25 -0
  15. data/test/css/sprites/retina.css +5 -5
  16. data/test/css/sprites/simple.css +1 -1
  17. data/test/css/sprites/spacing.css +4 -4
  18. data/test/scss/grid/gutter.scss +77 -42
  19. data/test/scss/sprites/resolution.scss +23 -0
  20. metadata +3 -1
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
 
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: 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!" );
data/test/css/grid/elastic.css CHANGED
@@ -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
  }
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-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
  }
data/test/css/grid/responsive.css CHANGED
@@ -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?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;
data/test/css/sprites/position.css CHANGED
@@ -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%;
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?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;
data/test/css/sprites/resolution.css ADDED
@@ -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?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;
data/test/css/sprites/simple.css CHANGED
@@ -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
 
data/test/css/sprites/spacing.css CHANGED
@@ -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;
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: 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
 
data/test/scss/sprites/resolution.scss ADDED
@@ -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