responder 0.1.1 → 0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. data/README.md +10 -2
  2. data/lib/responder/version.rb +1 -1
  3. data/scss/responder/_respond-to-retina.scss +14 -0
  4. data/scss/responder/_respond-to.scss +104 -24
  5. data/scss/responder/functions.scss +2 -0
  6. data/scss/responder.scss +1 -0
  7. data/test/css/style-old-ie.css +1 -1
  8. data/test/css/style.css +37 -22
  9. data/test/index.html +19 -0
  10. data/test/scss/style.scss +6 -0
  11. metadata +62 -71
data/README.md CHANGED
@@ -106,7 +106,15 @@ Given the example breakpoint list above, `respond-to(mobile-only)` will output t
106
106
 
107
107
  You can create as many breakpoints as you need for each group. It's that simple.
108
108
 
109
- ### 3. Mobile first & Old IE
109
+ ### 3. Retina displays
110
+
111
+ Target retina displays very easely using Responder's future proof media query.
112
+
113
+ @include respond-to(retina) {
114
+ // retina sharpness goes here
115
+ }
116
+
117
+ ### 4. Mobile first & Old IE
110
118
 
111
119
  If you're designing your site "mobile first" and prefer to serve a separate CSS to browsers that don't support media queries (IE8 and below), Responder gets you covered!
112
120
 
@@ -170,5 +178,5 @@ The resulting old-ie.css is:
170
178
 
171
179
  ## What's next?
172
180
 
173
- - Support for more media features (height, device-dimensions, orientation, retina displays, …)
181
+ - Support for more media features (height, device-dimensions, orientation, …)
174
182
  - Combined media queries? _e.g. respond-to(mobile-only && retina)_
data/lib/responder/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Responder
2
- VERSION = "0.1.1"
2
+ VERSION = "0.2"
3
3
  end
data/scss/responder/_respond-to-retina.scss ADDED
@@ -0,0 +1,14 @@
1
+ // =============================================================================
2
+ // Respond to retina
3
+ // =============================================================================
4
+
5
+ @mixin respond-to-retina {
6
+ @media
7
+ only screen and (-webkit-min-device-pixel-ratio: 1.5),
8
+ only screen and ( min--moz-device-pixel-ratio: 1.5),
9
+ only screen and ( -o-min-device-pixel-ratio: 3/2),
10
+ only screen and ( min-device-pixel-ratio: 2),
11
+ only screen and ( min-resolution: 1.5dppx) {
12
+ @content;
13
+ }
14
+ }
data/scss/responder/_respond-to.scss CHANGED
@@ -1,15 +1,33 @@
1
1
  // =============================================================================
2
2
  // Respond-to mixin
3
+ //
4
+ // Table of contents:
5
+ // 1. Get breakpoint info
6
+ // 2. respond-to(ie)
7
+ // 3. respond-to(retina)
8
+ // 4. respond-to($breakpoint)
9
+ // 4.1. Old-IE support
10
+ // 4.2. Breakpoints and groups
11
+ // 5. respond-to min and max mixins
12
+ //
3
13
  // =============================================================================
4
14
 
5
15
  @mixin respond-to($breakpoint) {
6
16
 
17
+ // =============================================================================
18
+ // 1. Get breakpoint info
19
+ // =============================================================================
20
+
7
21
  $breakpoint-info: getBreakpointInfo($breakpoint);
8
22
 
9
23
  // Breakpoint info error
10
24
  @if $breakpoint-info == 'error' {
11
25
  @warn '[ERROR] Invalid breakpoint parameter';
12
26
 
27
+ // =============================================================================
28
+ // 2. respond-to(ie)
29
+ // =============================================================================
30
+
13
31
  // Respond to IE
14
32
  } @else if $breakpoint-info == 'ie' {
15
33
  // Only print content if support is true
@@ -17,6 +35,20 @@
17
35
  @content;
18
36
  }
19
37
 
38
+ // =============================================================================
39
+ // 3. respond-to(retina)
40
+ // =============================================================================
41
+
42
+ // Respond to retina displays
43
+ } @else if $breakpoint-info == 'retina' {
44
+ @if $old-ie-support != true { // should not compile on Old-IE stylesheets
45
+ @include respond-to-retina { @content; }
46
+ }
47
+
48
+ // =============================================================================
49
+ // 4. respond-to($breakpoint)
50
+ // =============================================================================
51
+
20
52
  } @else {
21
53
 
22
54
  $breakpoint-name: nth($breakpoint-info, 1);
@@ -27,6 +59,10 @@
27
59
  $min-width: 0;
28
60
  $max-width: 0;
29
61
 
62
+ // =============================================================================
63
+ // 4.1. Old IE support
64
+ // =============================================================================
65
+
30
66
  @if $old-ie-support == true {
31
67
 
32
68
  @if yepnope($breakpoint-names, $old-ie-breakpoint) {
@@ -34,6 +70,7 @@
34
70
  // Get the value of the old-ie breakpoint
35
71
  $old-ie-breakpoint-value: nth($breakpoint-values, index($breakpoint-names, $old-ie-breakpoint));
36
72
 
73
+ // Don't know why this prevents throwing an error :S
37
74
  $breakpoint-value: null;
38
75
 
39
76
  @if $breakpoint-group == true {
@@ -47,47 +84,90 @@
47
84
  // Check if the media query should respond
48
85
  @if $breakpoint-extend == 'only' and $breakpoint-value == $old-ie-breakpoint-value {
49
86
  @content;
50
- } @else if $breakpoint-extend == 'and-up' and $old-ie-breakpoint-value >= $breakpoint-value{
87
+ } @else if $breakpoint-extend == 'and-up' and $old-ie-breakpoint-value >= $breakpoint-value {
51
88
  @content;
52
89
  } @else if $breakpoint-extend == 'and-below' and $old-ie-breakpoint-value <= $breakpoint-value {
53
90
  @content;
54
91
  }
55
92
  } @else {
56
- // Invlaid $old-ie-breakpoint value
93
+ // Invalid $old-ie-breakpoint value
57
94
  @warn "[ERROR] "+ $old-ie-breakpoint +" is not a valid breakpoint name for $old-ie-breakpoint. Valid breakpoint names are: "+ $breakpoint-names
58
95
  }
59
96
 
97
+ // =============================================================================
98
+ // 4.2. Breakpoints and groups
99
+ // =============================================================================
60
100
 
61
101
  } @else {
102
+ $breakpoint-name: nth($breakpoint-info, 1);
103
+ $breakpoint-extend: nth($breakpoint-info, 2);
104
+ $breakpoint-group: nth($breakpoint-info, 3);
105
+ $breakpoint-group-id: nth($breakpoint-info, 4);
62
106
 
63
- // If it's a regular breakpoint
64
- @if $breakpoint-group == false {
65
- $min-width: nth($breakpoint-values, index($breakpoint-names, $breakpoint-name));
107
+ $min-width: 0;
108
+ $max-width: 0;
66
109
 
67
- // Only set a max-width if it's not the last breakpoint
68
- @if (index($breakpoint-names, $breakpoint-name) + 1) <= length($breakpoint-values) {
69
- $max-width: nth($breakpoint-values, (index($breakpoint-names, $breakpoint-name) + 1));
70
- } @else {
71
- @if $breakpoint-extend == and-below {
72
- $max-width: nth($breakpoint-values, (index($breakpoint-names, $breakpoint-name)));
110
+ @if $old-ie-support == true {
111
+ @if $breakpoint-name == $old-ie-breakpoint or $breakpoint-name == $old-ie-breakpoint {
112
+ @content;
113
+ }
114
+ } @else {
115
+
116
+ // If it's a regular breakpoint
117
+ @if $breakpoint-group == false {
118
+ $min-width: nth($breakpoint-values, index($breakpoint-names, $breakpoint-name));
119
+
120
+ // Only set a max-width if it's not the last breakpoint
121
+ @if (index($breakpoint-names, $breakpoint-name) + 1) <= length($breakpoint-values) {
122
+ $max-width: nth($breakpoint-values, (index($breakpoint-names, $breakpoint-name) + 1));
73
123
  } @else {
74
- $breakpoint-extend: and-up;
124
+ @if $breakpoint-extend == and-below {
125
+ $max-width: nth($breakpoint-values, (index($breakpoint-names, $breakpoint-name)));
126
+ } @else {
127
+ $breakpoint-extend: and-up;
128
+ }
75
129
  }
76
- }
77
130
 
78
- // If it's a breakpoint group
79
- } @else {
80
- $min-width: nth( nth($breakpoint-groups, $breakpoint-group-id), 2);
81
- $max-width: nth( nth($breakpoint-groups, $breakpoint-group-id), 3);
82
- }
131
+ // If it's a breakpoint group
132
+ } @else {
133
+ $min-width: nth( nth($breakpoint-groups, $breakpoint-group-id), 2);
134
+ $max-width: nth( nth($breakpoint-groups, $breakpoint-group-id), 3);
135
+ }
83
136
 
84
- @if $breakpoint-extend == only {
85
- @media #{$responder-media-type} and (min-width: getSize($min-width)) and (max-width: getSize($max-width - 1)) { @content; }
86
- } @else if $breakpoint-extend == and-up {
87
- @media #{$responder-media-type} and (min-width: getSize($min-width)) { @content; }
88
- } @else if $breakpoint-extend == and-below {
89
- @media #{$responder-media-type} and (max-width: getSize($max-width - 1)) { @content; }
137
+ @if $breakpoint-extend == only {
138
+ @include respond-to-min-and-max-width($min-width, $max-width){ @content };
139
+ } @else if $breakpoint-extend == and-up {
140
+ @include respond-to-min-width($min-width){ @content };
141
+ } @else if $breakpoint-extend == and-below {
142
+ @include respond-to-max-width($max-width){ @content };
143
+ }
90
144
  }
91
145
  }
92
146
  }
93
147
  }
148
+
149
+ // =============================================================================
150
+ // 5. respond-to min and max mixins
151
+ // =============================================================================
152
+
153
+ @mixin respond-to-min-and-max-width($min-width, $max-width) {
154
+ @media only #{$responder-media-type}
155
+ and (min-width: getSize($min-width))
156
+ and (max-width: getSize($max-width - 1)) {
157
+ @content;
158
+ }
159
+ }
160
+
161
+ @mixin respond-to-min-width($min-width) {
162
+ @media only #{$responder-media-type}
163
+ and (min-width: getSize($min-width)) {
164
+ @content;
165
+ }
166
+ }
167
+
168
+ @mixin respond-to-max-width($max-width) {
169
+ @media only #{$responder-media-type}
170
+ and (max-width: getSize($max-width - 1)) {
171
+ @content;
172
+ }
173
+ }
data/scss/responder/functions.scss CHANGED
@@ -105,6 +105,8 @@
105
105
 
106
106
  @if $breakpoint == ie {
107
107
  @return ie;
108
+ } @else if $breakpoint == retina {
109
+ @return retina;
108
110
  } @else {
109
111
 
110
112
  // capture the extension (only, and-up or and-below)
data/scss/responder.scss CHANGED
@@ -15,6 +15,7 @@
15
15
 
16
16
  @import 'compass';
17
17
  @import 'responder/respond-to';
18
+ @import 'responder/respond-to-retina';
18
19
  @import 'responder/functions';
19
20
 
20
21
  // =============================================================================
data/test/css/style-old-ie.css CHANGED
@@ -171,7 +171,7 @@ tr > td:first-child {
171
171
  .mq-mixins-test tbody .respond-to-desktop-and-below .isInactive {
172
172
  display: none;
173
173
  }
174
- /* line 71, ../scss/style.scss */
174
+ /* line 77, ../scss/style.scss */
175
175
  .mq-mixins-test tbody .respond-to-ie {
176
176
  background: #a7e040;
177
177
  color: white;
data/test/css/style.css CHANGED
@@ -2,7 +2,7 @@
2
2
  body {
3
3
  font: 16px/21px "Helvetica Neue", Arial, sans-serif;
4
4
  }
5
- @media screen and (min-width: 20em) and (max-width: 37.4375em) {
5
+ @media only screen and (min-width: 20em) and (max-width: 37.4375em) {
6
6
  /* line 17, ../scss/style.scss */
7
7
  body {
8
8
  font-size: 95%;
@@ -34,7 +34,7 @@ tr > td:first-child {
34
34
  .mq-mixins-test tbody .response-example .isResponding {
35
35
  display: none;
36
36
  }
37
- @media screen and (min-width: 20em) and (max-width: 37.4375em) {
37
+ @media only screen and (min-width: 20em) and (max-width: 37.4375em) {
38
38
  /* line 63, ../scss/style.scss */
39
39
  .mq-mixins-test tbody .respond-to-mobile-only {
40
40
  background: #a7e040;
@@ -49,7 +49,7 @@ tr > td:first-child {
49
49
  display: none;
50
50
  }
51
51
  }
52
- @media screen and (min-width: 20em) {
52
+ @media only screen and (min-width: 20em) {
53
53
  /* line 63, ../scss/style.scss */
54
54
  .mq-mixins-test tbody .respond-to-mobile-and-up {
55
55
  background: #a7e040;
@@ -64,7 +64,7 @@ tr > td:first-child {
64
64
  display: none;
65
65
  }
66
66
  }
67
- @media screen and (max-width: 37.4375em) {
67
+ @media only screen and (max-width: 37.4375em) {
68
68
  /* line 63, ../scss/style.scss */
69
69
  .mq-mixins-test tbody .respond-to-mobile-and-below {
70
70
  background: #a7e040;
@@ -79,7 +79,7 @@ tr > td:first-child {
79
79
  display: none;
80
80
  }
81
81
  }
82
- @media screen and (min-width: 20em) and (max-width: 29.9375em) {
82
+ @media only screen and (min-width: 20em) and (max-width: 29.9375em) {
83
83
  /* line 63, ../scss/style.scss */
84
84
  .mq-mixins-test tbody .respond-to-mobile-portrait-only {
85
85
  background: #a7e040;
@@ -94,7 +94,7 @@ tr > td:first-child {
94
94
  display: none;
95
95
  }
96
96
  }
97
- @media screen and (min-width: 20em) {
97
+ @media only screen and (min-width: 20em) {
98
98
  /* line 63, ../scss/style.scss */
99
99
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
100
100
  background: #a7e040;
@@ -109,7 +109,7 @@ tr > td:first-child {
109
109
  display: none;
110
110
  }
111
111
  }
112
- @media screen and (max-width: 29.9375em) {
112
+ @media only screen and (max-width: 29.9375em) {
113
113
  /* line 63, ../scss/style.scss */
114
114
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-below {
115
115
  background: #a7e040;
@@ -124,7 +124,7 @@ tr > td:first-child {
124
124
  display: none;
125
125
  }
126
126
  }
127
- @media screen and (min-width: 30em) and (max-width: 37.4375em) {
127
+ @media only screen and (min-width: 30em) and (max-width: 37.4375em) {
128
128
  /* line 63, ../scss/style.scss */
129
129
  .mq-mixins-test tbody .respond-to-mobile-landscape-only {
130
130
  background: #a7e040;
@@ -139,7 +139,7 @@ tr > td:first-child {
139
139
  display: none;
140
140
  }
141
141
  }
142
- @media screen and (min-width: 30em) {
142
+ @media only screen and (min-width: 30em) {
143
143
  /* line 63, ../scss/style.scss */
144
144
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
145
145
  background: #a7e040;
@@ -154,7 +154,7 @@ tr > td:first-child {
154
154
  display: none;
155
155
  }
156
156
  }
157
- @media screen and (max-width: 37.4375em) {
157
+ @media only screen and (max-width: 37.4375em) {
158
158
  /* line 63, ../scss/style.scss */
159
159
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-below {
160
160
  background: #a7e040;
@@ -169,7 +169,7 @@ tr > td:first-child {
169
169
  display: none;
170
170
  }
171
171
  }
172
- @media screen and (min-width: 37.5em) and (max-width: 61.9375em) {
172
+ @media only screen and (min-width: 37.5em) and (max-width: 61.9375em) {
173
173
  /* line 63, ../scss/style.scss */
174
174
  .mq-mixins-test tbody .respond-to-tablet-only {
175
175
  background: #a7e040;
@@ -184,7 +184,7 @@ tr > td:first-child {
184
184
  display: none;
185
185
  }
186
186
  }
187
- @media screen and (min-width: 37.5em) {
187
+ @media only screen and (min-width: 37.5em) {
188
188
  /* line 63, ../scss/style.scss */
189
189
  .mq-mixins-test tbody .respond-to-tablet-and-up {
190
190
  background: #a7e040;
@@ -199,7 +199,7 @@ tr > td:first-child {
199
199
  display: none;
200
200
  }
201
201
  }
202
- @media screen and (max-width: 61.9375em) {
202
+ @media only screen and (max-width: 61.9375em) {
203
203
  /* line 63, ../scss/style.scss */
204
204
  .mq-mixins-test tbody .respond-to-tablet-and-below {
205
205
  background: #a7e040;
@@ -214,7 +214,7 @@ tr > td:first-child {
214
214
  display: none;
215
215
  }
216
216
  }
217
- @media screen and (min-width: 37.5em) and (max-width: 47.9375em) {
217
+ @media only screen and (min-width: 37.5em) and (max-width: 47.9375em) {
218
218
  /* line 63, ../scss/style.scss */
219
219
  .mq-mixins-test tbody .respond-to-tablet-portrait-only {
220
220
  background: #a7e040;
@@ -229,7 +229,7 @@ tr > td:first-child {
229
229
  display: none;
230
230
  }
231
231
  }
232
- @media screen and (min-width: 37.5em) {
232
+ @media only screen and (min-width: 37.5em) {
233
233
  /* line 63, ../scss/style.scss */
234
234
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
235
235
  background: #a7e040;
@@ -244,7 +244,7 @@ tr > td:first-child {
244
244
  display: none;
245
245
  }
246
246
  }
247
- @media screen and (max-width: 47.9375em) {
247
+ @media only screen and (max-width: 47.9375em) {
248
248
  /* line 63, ../scss/style.scss */
249
249
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
250
250
  background: #a7e040;
@@ -259,7 +259,7 @@ tr > td:first-child {
259
259
  display: none;
260
260
  }
261
261
  }
262
- @media screen and (min-width: 48em) and (max-width: 61.9375em) {
262
+ @media only screen and (min-width: 48em) and (max-width: 61.9375em) {
263
263
  /* line 63, ../scss/style.scss */
264
264
  .mq-mixins-test tbody .respond-to-tablet-landscape-only {
265
265
  background: #a7e040;
@@ -274,7 +274,7 @@ tr > td:first-child {
274
274
  display: none;
275
275
  }
276
276
  }
277
- @media screen and (min-width: 48em) {
277
+ @media only screen and (min-width: 48em) {
278
278
  /* line 63, ../scss/style.scss */
279
279
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-up {
280
280
  background: #a7e040;
@@ -289,7 +289,7 @@ tr > td:first-child {
289
289
  display: none;
290
290
  }
291
291
  }
292
- @media screen and (max-width: 61.9375em) {
292
+ @media only screen and (max-width: 61.9375em) {
293
293
  /* line 63, ../scss/style.scss */
294
294
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
295
295
  background: #a7e040;
@@ -304,7 +304,7 @@ tr > td:first-child {
304
304
  display: none;
305
305
  }
306
306
  }
307
- @media screen and (min-width: 62em) {
307
+ @media only screen and (min-width: 62em) {
308
308
  /* line 63, ../scss/style.scss */
309
309
  .mq-mixins-test tbody .respond-to-desktop-only {
310
310
  background: #a7e040;
@@ -319,7 +319,7 @@ tr > td:first-child {
319
319
  display: none;
320
320
  }
321
321
  }
322
- @media screen and (min-width: 62em) {
322
+ @media only screen and (min-width: 62em) {
323
323
  /* line 63, ../scss/style.scss */
324
324
  .mq-mixins-test tbody .respond-to-desktop-and-up {
325
325
  background: #a7e040;
@@ -334,7 +334,7 @@ tr > td:first-child {
334
334
  display: none;
335
335
  }
336
336
  }
337
- @media screen and (max-width: 61.9375em) {
337
+ @media only screen and (max-width: 61.9375em) {
338
338
  /* line 63, ../scss/style.scss */
339
339
  .mq-mixins-test tbody .respond-to-desktop-and-below {
340
340
  background: #a7e040;
@@ -349,3 +349,18 @@ tr > td:first-child {
349
349
  display: none;
350
350
  }
351
351
  }
352
+ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 1.5dppx) {
353
+ /* line 71, ../scss/style.scss */
354
+ .mq-mixins-test tbody .respond-to-retina {
355
+ background: #a7e040;
356
+ color: white;
357
+ }
358
+ /* line 41, ../scss/style.scss */
359
+ .mq-mixins-test tbody .respond-to-retina .isResponding {
360
+ display: inline;
361
+ }
362
+ /* line 42, ../scss/style.scss */
363
+ .mq-mixins-test tbody .respond-to-retina .isInactive {
364
+ display: none;
365
+ }
366
+ }
data/test/index.html CHANGED
@@ -159,6 +159,25 @@
159
159
 
160
160
  <hr>
161
161
 
162
+ <h3>Retina displays</h3>
163
+
164
+ <table class="mq-mixins-test">
165
+ <thead>
166
+ <tr>
167
+ <th>Mixin</th>
168
+ <th>Response</th>
169
+ </tr>
170
+ </thead>
171
+ <tbody>
172
+ <tr>
173
+ <td><code class="language-css">respond-to(retina)</code></td>
174
+ <td class="response-example respond-to-retina"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
175
+ </tr>
176
+ </tbody>
177
+ </table>
178
+
179
+ <hr>
180
+
162
181
  <h3>Old IE</h3>
163
182
 
164
183
  <table class="mq-mixins-test">
data/test/scss/style.scss CHANGED
@@ -68,6 +68,12 @@ tr > td:first-child { width: 80%; }
68
68
  }
69
69
  }
70
70
 
71
+ .respond-to-retina {
72
+ @include respond-to('retina') {
73
+ @include is-responding;
74
+ }
75
+ }
76
+
71
77
  .respond-to-ie {
72
78
  @include respond-to(ie) {
73
79
  @include is-responding;
metadata CHANGED
@@ -1,78 +1,71 @@
1
- --- !ruby/object:Gem::Specification
1
+ --- !ruby/object:Gem::Specification
2
2
  name: responder
3
- version: !ruby/object:Gem::Version
4
- hash: 25
3
+ version: !ruby/object:Gem::Version
4
+ version: '0.2'
5
5
  prerelease:
6
- segments:
7
- - 0
8
- - 1
9
- - 1
10
- version: 0.1.1
11
6
  platform: ruby
12
- authors:
7
+ authors:
13
8
  - Daniel Guillan
14
9
  autorequire:
15
10
  bindir: bin
16
11
  cert_chain: []
17
-
18
- date: 2012-11-21 00:00:00 Z
19
- dependencies:
20
- - !ruby/object:Gem::Dependency
12
+ date: 2012-11-24 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
21
15
  name: sass
22
- prerelease: false
23
- requirement: &id001 !ruby/object:Gem::Requirement
16
+ requirement: !ruby/object:Gem::Requirement
24
17
  none: false
25
- requirements:
26
- - - ">="
27
- - !ruby/object:Gem::Version
28
- hash: 15
29
- segments:
30
- - 3
31
- - 2
32
- - 0
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
33
21
  version: 3.2.0
34
22
  type: :runtime
35
- version_requirements: *id001
36
- - !ruby/object:Gem::Dependency
37
- name: compass
38
23
  prerelease: false
39
- requirement: &id002 !ruby/object:Gem::Requirement
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: 3.2.0
30
+ - !ruby/object:Gem::Dependency
31
+ name: compass
32
+ requirement: !ruby/object:Gem::Requirement
40
33
  none: false
41
- requirements:
42
- - - ">="
43
- - !ruby/object:Gem::Version
44
- hash: 43
45
- segments:
46
- - 0
47
- - 12
48
- - 2
34
+ requirements:
35
+ - - ! '>='
36
+ - !ruby/object:Gem::Version
49
37
  version: 0.12.2
50
38
  type: :runtime
51
- version_requirements: *id002
52
- - !ruby/object:Gem::Dependency
53
- name: rake
54
39
  prerelease: false
55
- requirement: &id003 !ruby/object:Gem::Requirement
40
+ version_requirements: !ruby/object:Gem::Requirement
56
41
  none: false
57
- requirements:
58
- - - ">="
59
- - !ruby/object:Gem::Version
60
- hash: 3
61
- segments:
62
- - 0
63
- version: "0"
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: 0.12.2
46
+ - !ruby/object:Gem::Dependency
47
+ name: rake
48
+ requirement: !ruby/object:Gem::Requirement
49
+ none: false
50
+ requirements:
51
+ - - ! '>='
52
+ - !ruby/object:Gem::Version
53
+ version: '0'
64
54
  type: :runtime
65
- version_requirements: *id003
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ none: false
58
+ requirements:
59
+ - - ! '>='
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
66
62
  description: Magic media queries for your Compass project
67
- email:
63
+ email:
68
64
  - daniel.guillan@gmail.com
69
65
  executables: []
70
-
71
66
  extensions: []
72
-
73
67
  extra_rdoc_files: []
74
-
75
- files:
68
+ files:
76
69
  - .gitignore
77
70
  - Gemfile
78
71
  - LICENSE.txt
@@ -82,6 +75,7 @@ files:
82
75
  - lib/responder/version.rb
83
76
  - responder.gemspec
84
77
  - scss/responder.scss
78
+ - scss/responder/_respond-to-retina.scss
85
79
  - scss/responder/_respond-to.scss
86
80
  - scss/responder/functions.scss
87
81
  - test/config.rb
@@ -92,38 +86,35 @@ files:
92
86
  - test/scss/style.scss
93
87
  homepage: http://github.com/danielguillan/responder
94
88
  licenses: []
95
-
96
89
  post_install_message:
97
90
  rdoc_options: []
98
-
99
- require_paths:
91
+ require_paths:
100
92
  - lib
101
- required_ruby_version: !ruby/object:Gem::Requirement
93
+ required_ruby_version: !ruby/object:Gem::Requirement
102
94
  none: false
103
- requirements:
104
- - - ">="
105
- - !ruby/object:Gem::Version
106
- hash: 3
107
- segments:
95
+ requirements:
96
+ - - ! '>='
97
+ - !ruby/object:Gem::Version
98
+ version: '0'
99
+ segments:
108
100
  - 0
109
- version: "0"
110
- required_rubygems_version: !ruby/object:Gem::Requirement
101
+ hash: -2604048285855589836
102
+ required_rubygems_version: !ruby/object:Gem::Requirement
111
103
  none: false
112
- requirements:
113
- - - ">="
114
- - !ruby/object:Gem::Version
115
- hash: 3
116
- segments:
104
+ requirements:
105
+ - - ! '>='
106
+ - !ruby/object:Gem::Version
107
+ version: '0'
108
+ segments:
117
109
  - 0
118
- version: "0"
110
+ hash: -2604048285855589836
119
111
  requirements: []
120
-
121
112
  rubyforge_project:
122
113
  rubygems_version: 1.8.24
123
114
  signing_key:
124
115
  specification_version: 3
125
116
  summary: Magic media queries for your Compass project
126
- test_files:
117
+ test_files:
127
118
  - test/config.rb
128
119
  - test/css/style-old-ie.css
129
120
  - test/css/style.css