responder 0.0.1.alpha.1 → 0.0.1.alpha.2

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -6,7 +6,7 @@ Forget about multiple variable declarations, long lists of unmanageable, inexten
6
6
 
7
7
  ## Installation
8
8
 
9
- Install the respond-to gem:
9
+ Install the responder gem:
10
10
 
11
11
  $ gem install responder
12
12
 
@@ -14,10 +14,14 @@ In your project's config.rb file add:
14
14
 
15
15
  require "responder"
16
16
 
17
- Finally install the Compass extension:
17
+ Install the Compass extension:
18
18
 
19
19
  $ compass install responder
20
20
 
21
+ Finally import responder into your sass code
22
+
23
+ @import "responder";
24
+
21
25
  ## Usage
22
26
 
23
27
  ### 1. Define your own breakpoints
@@ -90,7 +94,7 @@ Given the example breakpoint list above, `respond-to(mobile-only)` will output t
90
94
 
91
95
  min-width value is the first breakpoint of the group and max-width is the last one. It's that simple.
92
96
 
93
- **NOTE:** You can define more than two breakpoints per group, Responder will pick the smallest breakpoint and the bigger breakpoint to create the group.
97
+ **NOTE:** Currently you're only able to define two breakpoints per group but very soon you'll be able to create as many as you need and Responder will pick the smallest breakpoint and the bigger breakpoint to create the group.
94
98
 
95
99
  ### 3. There's no #3. Enjoy and build amazing stuff
96
100
 
@@ -99,6 +103,5 @@ min-width value is the first breakpoint of the group and max-width is the last o
99
103
 
100
104
  ## What's next?
101
105
 
102
- - Respond-to Retina displays
103
- - Support for more than just `min-width` and `max-width`
104
- - Suggestions?
106
+ - Support for groups with more than 2 breakpoints
107
+ - Support for more media features (height, device-dimensions, orientation, retina displays, …)
@@ -1,3 +1,3 @@
1
1
  module Responder
2
- VERSION = "0.0.1.alpha.1"
2
+ VERSION = "0.0.1.alpha.2"
3
3
  end
@@ -1,47 +1,5 @@
1
1
  // =============================================================================
2
- // Media Queries
3
- //
4
- // Magic media queries for your Compass project. You define the breakpoints,
5
- // Respond-to takes care of the rest.
6
- //
7
- // More info, installation and usage:
8
- // https://github.com/danielguillan/respond-to
9
- //
10
- // Table of contents:
11
- // 1. Variables
12
- // 2. Initialization
13
- // 3. Breakpoint Groups
14
- // 4. Respond-to mixin
15
- //
16
- // =============================================================================
17
-
18
- @import 'functions';
19
-
20
- // =============================================================================
21
- // 1. Variables
22
- // =============================================================================
23
-
24
- $breakpoint-names: ();
25
- $breakpoint-values: ();
26
- $breakpoint-groups: ();
27
-
28
- // =============================================================================
29
- // 2. Initialization
30
- // =============================================================================
31
-
32
- @mixin respond-to-breakpoints($breakpoints...) {
33
-
34
- @if length($breakpoints) > 1 {
35
- $breakpoint-names: getBreakpointNames($breakpoints);
36
- $breakpoint-values: getBreakpointValues($breakpoints);
37
- $breakpoint-groups: createBreakpointGroups($breakpoint-names,$breakpoint-values);
38
- }@else {
39
- @warn 'respond-to-breakpoints requires at least 2 breakpoints';
40
- }
41
- }
42
-
43
- // =============================================================================
44
- // 3. Respond-to mixin
2
+ // Respond-to mixin
45
3
  // =============================================================================
46
4
 
47
5
  @mixin respond-to($breakpoint) {
@@ -49,7 +7,7 @@ $breakpoint-groups: ();
49
7
  $breakpoint-info: getBreakpointInfo($breakpoint);
50
8
 
51
9
  @if $breakpoint-info == 'error' {
52
- @warn '[ERROR] Invalid breakpoint paramenter';
10
+ @warn '[ERROR] Invalid breakpoint parameter';
53
11
  } @else {
54
12
  $breakpoint-name: nth($breakpoint-info, 1);
55
13
  $breakpoint-extend: nth($breakpoint-info, 2);
File without changes
@@ -0,0 +1,40 @@
1
+ // =============================================================================
2
+ // Responder
3
+ //
4
+ // Magic media queries for your Compass project. You define the breakpoints,
5
+ // Respond-to takes care of the rest.
6
+ //
7
+ // More info, installation and usage:
8
+ // https://github.com/danielguillan/respond-to
9
+ //
10
+ // Table of contents:
11
+ // 1. Variables
12
+ // 2. Initialization
13
+ //
14
+ // =============================================================================
15
+
16
+ @import 'responder/respond-to';
17
+ @import 'responder/functions';
18
+
19
+ // =============================================================================
20
+ // 1. Variables
21
+ // =============================================================================
22
+
23
+ $breakpoint-names: ();
24
+ $breakpoint-values: ();
25
+ $breakpoint-groups: ();
26
+
27
+ // =============================================================================
28
+ // 2. Initialization
29
+ // =============================================================================
30
+
31
+ @mixin respond-to-breakpoints($breakpoints...) {
32
+
33
+ @if length($breakpoints) > 1 {
34
+ $breakpoint-names: getBreakpointNames($breakpoints);
35
+ $breakpoint-values: getBreakpointValues($breakpoints);
36
+ $breakpoint-groups: createBreakpointGroups($breakpoint-names,$breakpoint-values);
37
+ }@else {
38
+ @warn 'respond-to-breakpoints requires at least 2 breakpoints';
39
+ }
40
+ }
data/test/css/style.css CHANGED
@@ -2,338 +2,349 @@
2
2
  body {
3
3
  font: 16px/21px "Helvetica Neue", Arial, sans-serif;
4
4
  }
5
+ @media (min-width: 320px) and (max-width: 600px) {
6
+ /* line 17, ../scss/style.scss */
7
+ body {
8
+ font-size: 95%;
9
+ }
10
+ }
5
11
 
6
- /* line 21, ../scss/style.scss */
12
+ /* line 24, ../scss/style.scss */
7
13
  .wrapper {
8
14
  margin: 0 auto;
9
15
  padding: 0 1em;
10
16
  max-width: 1000px;
11
17
  }
12
18
 
13
- /* line 40, ../scss/style.scss */
19
+ /* line 30, ../scss/style.scss */
20
+ tr > td:first-child {
21
+ width: 80%;
22
+ }
23
+
24
+ /* line 45, ../scss/style.scss */
14
25
  .mq-mixins-test {
15
26
  width: 100%;
16
27
  }
17
- /* line 46, ../scss/style.scss */
28
+ /* line 51, ../scss/style.scss */
18
29
  .mq-mixins-test tbody .response-example {
19
30
  text-align: center;
20
31
  color: #ccc;
21
32
  }
22
- /* line 49, ../scss/style.scss */
33
+ /* line 54, ../scss/style.scss */
23
34
  .mq-mixins-test tbody .response-example .isResponding {
24
35
  display: none;
25
36
  }
26
37
  @media (min-width: 320px) and (max-width: 600px) {
27
- /* line 55, ../scss/style.scss */
38
+ /* line 60, ../scss/style.scss */
28
39
  .mq-mixins-test tbody .respond-to-mobile {
29
40
  background: #a7e040;
30
41
  color: white;
31
42
  }
32
- /* line 36, ../scss/style.scss */
43
+ /* line 41, ../scss/style.scss */
33
44
  .mq-mixins-test tbody .respond-to-mobile .isResponding {
34
45
  display: inline;
35
46
  }
36
- /* line 37, ../scss/style.scss */
47
+ /* line 42, ../scss/style.scss */
37
48
  .mq-mixins-test tbody .respond-to-mobile .isInactive {
38
49
  display: none;
39
50
  }
40
51
  }
41
52
  @media (min-width: 320px) and (max-width: 480px) {
42
- /* line 60, ../scss/style.scss */
53
+ /* line 65, ../scss/style.scss */
43
54
  .mq-mixins-test tbody .respond-to-mobile-portrait {
44
55
  background: #a7e040;
45
56
  color: white;
46
57
  }
47
- /* line 36, ../scss/style.scss */
58
+ /* line 41, ../scss/style.scss */
48
59
  .mq-mixins-test tbody .respond-to-mobile-portrait .isResponding {
49
60
  display: inline;
50
61
  }
51
- /* line 37, ../scss/style.scss */
62
+ /* line 42, ../scss/style.scss */
52
63
  .mq-mixins-test tbody .respond-to-mobile-portrait .isInactive {
53
64
  display: none;
54
65
  }
55
66
  }
56
67
  @media (min-width: 480px) and (max-width: 600px) {
57
- /* line 65, ../scss/style.scss */
68
+ /* line 70, ../scss/style.scss */
58
69
  .mq-mixins-test tbody .respond-to-mobile-landscape {
59
70
  background: #a7e040;
60
71
  color: white;
61
72
  }
62
- /* line 36, ../scss/style.scss */
73
+ /* line 41, ../scss/style.scss */
63
74
  .mq-mixins-test tbody .respond-to-mobile-landscape .isResponding {
64
75
  display: inline;
65
76
  }
66
- /* line 37, ../scss/style.scss */
77
+ /* line 42, ../scss/style.scss */
67
78
  .mq-mixins-test tbody .respond-to-mobile-landscape .isInactive {
68
79
  display: none;
69
80
  }
70
81
  }
71
82
  @media (min-width: 600px) and (max-width: 992px) {
72
- /* line 71, ../scss/style.scss */
83
+ /* line 76, ../scss/style.scss */
73
84
  .mq-mixins-test tbody .respond-to-tablet {
74
85
  background: #a7e040;
75
86
  color: white;
76
87
  }
77
- /* line 36, ../scss/style.scss */
88
+ /* line 41, ../scss/style.scss */
78
89
  .mq-mixins-test tbody .respond-to-tablet .isResponding {
79
90
  display: inline;
80
91
  }
81
- /* line 37, ../scss/style.scss */
92
+ /* line 42, ../scss/style.scss */
82
93
  .mq-mixins-test tbody .respond-to-tablet .isInactive {
83
94
  display: none;
84
95
  }
85
96
  }
86
97
  @media (min-width: 600px) and (max-width: 768px) {
87
- /* line 77, ../scss/style.scss */
98
+ /* line 82, ../scss/style.scss */
88
99
  .mq-mixins-test tbody .respond-to-tablet-portrait {
89
100
  background: #a7e040;
90
101
  color: white;
91
102
  }
92
- /* line 36, ../scss/style.scss */
103
+ /* line 41, ../scss/style.scss */
93
104
  .mq-mixins-test tbody .respond-to-tablet-portrait .isResponding {
94
105
  display: inline;
95
106
  }
96
- /* line 37, ../scss/style.scss */
107
+ /* line 42, ../scss/style.scss */
97
108
  .mq-mixins-test tbody .respond-to-tablet-portrait .isInactive {
98
109
  display: none;
99
110
  }
100
111
  }
101
112
  @media (min-width: 768px) and (max-width: 992px) {
102
- /* line 83, ../scss/style.scss */
113
+ /* line 88, ../scss/style.scss */
103
114
  .mq-mixins-test tbody .respond-to-tablet-landscape {
104
115
  background: #a7e040;
105
116
  color: white;
106
117
  }
107
- /* line 36, ../scss/style.scss */
118
+ /* line 41, ../scss/style.scss */
108
119
  .mq-mixins-test tbody .respond-to-tablet-landscape .isResponding {
109
120
  display: inline;
110
121
  }
111
- /* line 37, ../scss/style.scss */
122
+ /* line 42, ../scss/style.scss */
112
123
  .mq-mixins-test tbody .respond-to-tablet-landscape .isInactive {
113
124
  display: none;
114
125
  }
115
126
  }
116
127
  @media (min-width: 992px) {
117
- /* line 89, ../scss/style.scss */
128
+ /* line 94, ../scss/style.scss */
118
129
  .mq-mixins-test tbody .respond-to-desktop {
119
130
  background: #a7e040;
120
131
  color: white;
121
132
  }
122
- /* line 36, ../scss/style.scss */
133
+ /* line 41, ../scss/style.scss */
123
134
  .mq-mixins-test tbody .respond-to-desktop .isResponding {
124
135
  display: inline;
125
136
  }
126
- /* line 37, ../scss/style.scss */
137
+ /* line 42, ../scss/style.scss */
127
138
  .mq-mixins-test tbody .respond-to-desktop .isInactive {
128
139
  display: none;
129
140
  }
130
141
  }
131
142
  @media (min-width: 320px) {
132
- /* line 98, ../scss/style.scss */
143
+ /* line 103, ../scss/style.scss */
133
144
  .mq-mixins-test tbody .respond-to-mobile-and-up {
134
145
  background: #a7e040;
135
146
  color: white;
136
147
  }
137
- /* line 36, ../scss/style.scss */
148
+ /* line 41, ../scss/style.scss */
138
149
  .mq-mixins-test tbody .respond-to-mobile-and-up .isResponding {
139
150
  display: inline;
140
151
  }
141
- /* line 37, ../scss/style.scss */
152
+ /* line 42, ../scss/style.scss */
142
153
  .mq-mixins-test tbody .respond-to-mobile-and-up .isInactive {
143
154
  display: none;
144
155
  }
145
156
  }
146
157
  @media (min-width: 320px) {
147
- /* line 103, ../scss/style.scss */
158
+ /* line 108, ../scss/style.scss */
148
159
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
149
160
  background: #a7e040;
150
161
  color: white;
151
162
  }
152
- /* line 36, ../scss/style.scss */
163
+ /* line 41, ../scss/style.scss */
153
164
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isResponding {
154
165
  display: inline;
155
166
  }
156
- /* line 37, ../scss/style.scss */
167
+ /* line 42, ../scss/style.scss */
157
168
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isInactive {
158
169
  display: none;
159
170
  }
160
171
  }
161
172
  @media (min-width: 480px) {
162
- /* line 108, ../scss/style.scss */
173
+ /* line 113, ../scss/style.scss */
163
174
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
164
175
  background: #a7e040;
165
176
  color: white;
166
177
  }
167
- /* line 36, ../scss/style.scss */
178
+ /* line 41, ../scss/style.scss */
168
179
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isResponding {
169
180
  display: inline;
170
181
  }
171
- /* line 37, ../scss/style.scss */
182
+ /* line 42, ../scss/style.scss */
172
183
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isInactive {
173
184
  display: none;
174
185
  }
175
186
  }
176
187
  @media (min-width: 600px) {
177
- /* line 114, ../scss/style.scss */
188
+ /* line 119, ../scss/style.scss */
178
189
  .mq-mixins-test tbody .respond-to-tablet-and-up {
179
190
  background: #a7e040;
180
191
  color: white;
181
192
  }
182
- /* line 36, ../scss/style.scss */
193
+ /* line 41, ../scss/style.scss */
183
194
  .mq-mixins-test tbody .respond-to-tablet-and-up .isResponding {
184
195
  display: inline;
185
196
  }
186
- /* line 37, ../scss/style.scss */
197
+ /* line 42, ../scss/style.scss */
187
198
  .mq-mixins-test tbody .respond-to-tablet-and-up .isInactive {
188
199
  display: none;
189
200
  }
190
201
  }
191
202
  @media (min-width: 600px) {
192
- /* line 120, ../scss/style.scss */
203
+ /* line 125, ../scss/style.scss */
193
204
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
194
205
  background: #a7e040;
195
206
  color: white;
196
207
  }
197
- /* line 36, ../scss/style.scss */
208
+ /* line 41, ../scss/style.scss */
198
209
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isResponding {
199
210
  display: inline;
200
211
  }
201
- /* line 37, ../scss/style.scss */
212
+ /* line 42, ../scss/style.scss */
202
213
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isInactive {
203
214
  display: none;
204
215
  }
205
216
  }
206
217
  @media (min-width: 768px) {
207
- /* line 126, ../scss/style.scss */
218
+ /* line 131, ../scss/style.scss */
208
219
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-up {
209
220
  background: #a7e040;
210
221
  color: white;
211
222
  }
212
- /* line 36, ../scss/style.scss */
223
+ /* line 41, ../scss/style.scss */
213
224
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isResponding {
214
225
  display: inline;
215
226
  }
216
- /* line 37, ../scss/style.scss */
227
+ /* line 42, ../scss/style.scss */
217
228
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isInactive {
218
229
  display: none;
219
230
  }
220
231
  }
221
232
  @media (min-width: 992px) {
222
- /* line 132, ../scss/style.scss */
233
+ /* line 137, ../scss/style.scss */
223
234
  .mq-mixins-test tbody .respond-to-desktop-and-up {
224
235
  background: #a7e040;
225
236
  color: white;
226
237
  }
227
- /* line 36, ../scss/style.scss */
238
+ /* line 41, ../scss/style.scss */
228
239
  .mq-mixins-test tbody .respond-to-desktop-and-up .isResponding {
229
240
  display: inline;
230
241
  }
231
- /* line 37, ../scss/style.scss */
242
+ /* line 42, ../scss/style.scss */
232
243
  .mq-mixins-test tbody .respond-to-desktop-and-up .isInactive {
233
244
  display: none;
234
245
  }
235
246
  }
236
247
  @media (max-width: 600px) {
237
- /* line 141, ../scss/style.scss */
248
+ /* line 146, ../scss/style.scss */
238
249
  .mq-mixins-test tbody .respond-to-mobile-and-below {
239
250
  background: #a7e040;
240
251
  color: white;
241
252
  }
242
- /* line 36, ../scss/style.scss */
253
+ /* line 41, ../scss/style.scss */
243
254
  .mq-mixins-test tbody .respond-to-mobile-and-below .isResponding {
244
255
  display: inline;
245
256
  }
246
- /* line 37, ../scss/style.scss */
257
+ /* line 42, ../scss/style.scss */
247
258
  .mq-mixins-test tbody .respond-to-mobile-and-below .isInactive {
248
259
  display: none;
249
260
  }
250
261
  }
251
262
  @media (max-width: 480px) {
252
- /* line 146, ../scss/style.scss */
263
+ /* line 151, ../scss/style.scss */
253
264
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-below {
254
265
  background: #a7e040;
255
266
  color: white;
256
267
  }
257
- /* line 36, ../scss/style.scss */
268
+ /* line 41, ../scss/style.scss */
258
269
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isResponding {
259
270
  display: inline;
260
271
  }
261
- /* line 37, ../scss/style.scss */
272
+ /* line 42, ../scss/style.scss */
262
273
  .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isInactive {
263
274
  display: none;
264
275
  }
265
276
  }
266
277
  @media (max-width: 600px) {
267
- /* line 151, ../scss/style.scss */
278
+ /* line 156, ../scss/style.scss */
268
279
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-below {
269
280
  background: #a7e040;
270
281
  color: white;
271
282
  }
272
- /* line 36, ../scss/style.scss */
283
+ /* line 41, ../scss/style.scss */
273
284
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isResponding {
274
285
  display: inline;
275
286
  }
276
- /* line 37, ../scss/style.scss */
287
+ /* line 42, ../scss/style.scss */
277
288
  .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isInactive {
278
289
  display: none;
279
290
  }
280
291
  }
281
292
  @media (max-width: 992px) {
282
- /* line 157, ../scss/style.scss */
293
+ /* line 162, ../scss/style.scss */
283
294
  .mq-mixins-test tbody .respond-to-tablet-and-below {
284
295
  background: #a7e040;
285
296
  color: white;
286
297
  }
287
- /* line 36, ../scss/style.scss */
298
+ /* line 41, ../scss/style.scss */
288
299
  .mq-mixins-test tbody .respond-to-tablet-and-below .isResponding {
289
300
  display: inline;
290
301
  }
291
- /* line 37, ../scss/style.scss */
302
+ /* line 42, ../scss/style.scss */
292
303
  .mq-mixins-test tbody .respond-to-tablet-and-below .isInactive {
293
304
  display: none;
294
305
  }
295
306
  }
296
307
  @media (max-width: 768px) {
297
- /* line 163, ../scss/style.scss */
308
+ /* line 168, ../scss/style.scss */
298
309
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
299
310
  background: #a7e040;
300
311
  color: white;
301
312
  }
302
- /* line 36, ../scss/style.scss */
313
+ /* line 41, ../scss/style.scss */
303
314
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isResponding {
304
315
  display: inline;
305
316
  }
306
- /* line 37, ../scss/style.scss */
317
+ /* line 42, ../scss/style.scss */
307
318
  .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isInactive {
308
319
  display: none;
309
320
  }
310
321
  }
311
322
  @media (max-width: 992px) {
312
- /* line 169, ../scss/style.scss */
323
+ /* line 174, ../scss/style.scss */
313
324
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
314
325
  background: #a7e040;
315
326
  color: white;
316
327
  }
317
- /* line 36, ../scss/style.scss */
328
+ /* line 41, ../scss/style.scss */
318
329
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isResponding {
319
330
  display: inline;
320
331
  }
321
- /* line 37, ../scss/style.scss */
332
+ /* line 42, ../scss/style.scss */
322
333
  .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isInactive {
323
334
  display: none;
324
335
  }
325
336
  }
326
337
  @media (min-width: 992px) {
327
- /* line 175, ../scss/style.scss */
338
+ /* line 180, ../scss/style.scss */
328
339
  .mq-mixins-test tbody .respond-to-desktop-and-below {
329
340
  background: #a7e040;
330
341
  color: white;
331
342
  }
332
- /* line 36, ../scss/style.scss */
343
+ /* line 41, ../scss/style.scss */
333
344
  .mq-mixins-test tbody .respond-to-desktop-and-below .isResponding {
334
345
  display: inline;
335
346
  }
336
- /* line 37, ../scss/style.scss */
347
+ /* line 42, ../scss/style.scss */
337
348
  .mq-mixins-test tbody .respond-to-desktop-and-below .isInactive {
338
349
  display: none;
339
350
  }
data/test/index.html CHANGED
@@ -13,7 +13,19 @@
13
13
  <h1>Responder mixin testing</h1>
14
14
  </header>
15
15
 
16
- <h2>Only</h2>
16
+ <h2>Test breakpoints</h2>
17
+ <ul>
18
+ <li>mobile-portrait 320px</li>
19
+ <li>mobile-landscape 480px</li>
20
+ <li>tablet-portrait 600px</li>
21
+ <li>tablet-landscape 768px</li>
22
+ <li>desktop 992px</li>
23
+ </ul>
24
+
25
+ <h2>Respond-to mixin</h2>
26
+ <p>Resize your browser!</p>
27
+
28
+ <h3>Only</h3>
17
29
  <table class="mq-mixins-test">
18
30
  <thead>
19
31
  <tr>
@@ -55,7 +67,7 @@
55
67
 
56
68
  <hr>
57
69
 
58
- <h2>And-Up</h2>
70
+ <h3>And-Up</h3>
59
71
  <table class="mq-mixins-test">
60
72
  <thead>
61
73
  <tr>
@@ -97,7 +109,7 @@
97
109
 
98
110
  <hr>
99
111
 
100
- <h2>And-Below</h2>
112
+ <h3>And-Below</h3>
101
113
  <table class="mq-mixins-test">
102
114
  <thead>
103
115
  <tr>
data/test/scss/style.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  //
4
4
  // =============================================================================
5
5
 
6
- @import "respond-to";
6
+ @import "responder";
7
7
 
8
8
  @include respond-to-breakpoints( mobile-portrait 320px,
9
9
  mobile-landscape 480px,
@@ -16,6 +16,9 @@ $green: #a7e040;
16
16
 
17
17
  body {
18
18
  font: 16px/21px 'Helvetica Neue', Arial, sans-serif;
19
+ @include respond-to(mobile-only) {
20
+ font-size: 95%;
21
+ }
19
22
  }
20
23
 
21
24
  .wrapper {
@@ -24,6 +27,8 @@ body {
24
27
  max-width: 1000px;
25
28
  }
26
29
 
30
+ tr > td:first-child { width: 80%; }
31
+
27
32
  // =============================================================================
28
33
  // Respond-to Media Queries
29
34
  // =============================================================================
metadata CHANGED
@@ -1,71 +1,80 @@
1
- --- !ruby/object:Gem::Specification
1
+ --- !ruby/object:Gem::Specification
2
2
  name: responder
3
- version: !ruby/object:Gem::Version
4
- version: 0.0.1.alpha.1
3
+ version: !ruby/object:Gem::Version
4
+ hash: -1490146870
5
5
  prerelease: 6
6
+ segments:
7
+ - 0
8
+ - 0
9
+ - 1
10
+ - alpha
11
+ - 2
12
+ version: 0.0.1.alpha.2
6
13
  platform: ruby
7
- authors:
14
+ authors:
8
15
  - Daniel Guillan
9
16
  autorequire:
10
17
  bindir: bin
11
18
  cert_chain: []
12
- date: 2012-09-30 00:00:00.000000000 Z
13
- dependencies:
14
- - !ruby/object:Gem::Dependency
19
+
20
+ date: 2012-10-02 00:00:00 Z
21
+ dependencies:
22
+ - !ruby/object:Gem::Dependency
15
23
  name: sass
16
- requirement: !ruby/object:Gem::Requirement
17
- none: false
18
- requirements:
19
- - - ! '>='
20
- - !ruby/object:Gem::Version
21
- version: 3.2.0
22
- type: :runtime
23
24
  prerelease: false
24
- version_requirements: !ruby/object:Gem::Requirement
25
+ requirement: &id001 !ruby/object:Gem::Requirement
25
26
  none: false
26
- requirements:
27
- - - ! '>='
28
- - !ruby/object:Gem::Version
27
+ requirements:
28
+ - - ">="
29
+ - !ruby/object:Gem::Version
30
+ hash: 15
31
+ segments:
32
+ - 3
33
+ - 2
34
+ - 0
29
35
  version: 3.2.0
30
- - !ruby/object:Gem::Dependency
31
- name: compass
32
- requirement: !ruby/object:Gem::Requirement
33
- none: false
34
- requirements:
35
- - - ! '>='
36
- - !ruby/object:Gem::Version
37
- version: 0.12.2
38
36
  type: :runtime
37
+ version_requirements: *id001
38
+ - !ruby/object:Gem::Dependency
39
+ name: compass
39
40
  prerelease: false
40
- version_requirements: !ruby/object:Gem::Requirement
41
+ requirement: &id002 !ruby/object:Gem::Requirement
41
42
  none: false
42
- requirements:
43
- - - ! '>='
44
- - !ruby/object:Gem::Version
43
+ requirements:
44
+ - - ">="
45
+ - !ruby/object:Gem::Version
46
+ hash: 43
47
+ segments:
48
+ - 0
49
+ - 12
50
+ - 2
45
51
  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'
54
52
  type: :runtime
53
+ version_requirements: *id002
54
+ - !ruby/object:Gem::Dependency
55
+ name: rake
55
56
  prerelease: false
56
- version_requirements: !ruby/object:Gem::Requirement
57
+ requirement: &id003 !ruby/object:Gem::Requirement
57
58
  none: false
58
- requirements:
59
- - - ! '>='
60
- - !ruby/object:Gem::Version
61
- version: '0'
59
+ requirements:
60
+ - - ">="
61
+ - !ruby/object:Gem::Version
62
+ hash: 3
63
+ segments:
64
+ - 0
65
+ version: "0"
66
+ type: :runtime
67
+ version_requirements: *id003
62
68
  description: Magic media queries for your Compass project
63
- email:
69
+ email:
64
70
  - daniel.guillan@gmail.com
65
71
  executables: []
72
+
66
73
  extensions: []
74
+
67
75
  extra_rdoc_files: []
68
- files:
76
+
77
+ files:
69
78
  - .gitignore
70
79
  - Gemfile
71
80
  - LICENSE.txt
@@ -74,40 +83,49 @@ files:
74
83
  - lib/responder.rb
75
84
  - lib/responder/version.rb
76
85
  - responder.gemspec
77
- - scss/functions.scss
78
- - scss/respond-to.scss
86
+ - scss/responder.scss
87
+ - scss/responder/_respond-to.scss
88
+ - scss/responder/functions.scss
79
89
  - test/config.rb
80
90
  - test/css/style.css
81
91
  - test/index.html
82
92
  - test/scss/style.scss
83
93
  homepage: http://github.com/danielguillan/responder
84
94
  licenses: []
95
+
85
96
  post_install_message:
86
97
  rdoc_options: []
87
- require_paths:
98
+
99
+ require_paths:
88
100
  - lib
89
- required_ruby_version: !ruby/object:Gem::Requirement
101
+ required_ruby_version: !ruby/object:Gem::Requirement
90
102
  none: false
91
- requirements:
92
- - - ! '>='
93
- - !ruby/object:Gem::Version
94
- version: '0'
95
- segments:
103
+ requirements:
104
+ - - ">="
105
+ - !ruby/object:Gem::Version
106
+ hash: 3
107
+ segments:
96
108
  - 0
97
- hash: 4469443832490834780
98
- required_rubygems_version: !ruby/object:Gem::Requirement
109
+ version: "0"
110
+ required_rubygems_version: !ruby/object:Gem::Requirement
99
111
  none: false
100
- requirements:
101
- - - ! '>'
102
- - !ruby/object:Gem::Version
112
+ requirements:
113
+ - - ">"
114
+ - !ruby/object:Gem::Version
115
+ hash: 25
116
+ segments:
117
+ - 1
118
+ - 3
119
+ - 1
103
120
  version: 1.3.1
104
121
  requirements: []
122
+
105
123
  rubyforge_project:
106
124
  rubygems_version: 1.8.24
107
125
  signing_key:
108
126
  specification_version: 3
109
127
  summary: Magic media queries for your Compass project
110
- test_files:
128
+ test_files:
111
129
  - test/config.rb
112
130
  - test/css/style.css
113
131
  - test/index.html