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 +9 -6
- data/lib/responder/version.rb +1 -1
- data/scss/{respond-to.scss → responder/_respond-to.scss} +2 -44
- data/scss/{functions.scss → responder/functions.scss} +0 -0
- data/scss/responder.scss +40 -0
- data/test/css/style.css +78 -67
- data/test/index.html +15 -3
- data/test/scss/style.scss +6 -1
- metadata +78 -60
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
|
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
|
-
|
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:**
|
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
|
-
-
|
103
|
-
- Support for more
|
104
|
-
- Suggestions?
|
106
|
+
- Support for groups with more than 2 breakpoints
|
107
|
+
- Support for more media features (height, device-dimensions, orientation, retina displays, …)
|
data/lib/responder/version.rb
CHANGED
@@ -1,47 +1,5 @@
|
|
1
1
|
// =============================================================================
|
2
|
-
//
|
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
|
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
|
data/scss/responder.scss
ADDED
@@ -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
|
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
|
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
|
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
|
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
|
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
|
43
|
+
/* line 41, ../scss/style.scss */
|
33
44
|
.mq-mixins-test tbody .respond-to-mobile .isResponding {
|
34
45
|
display: inline;
|
35
46
|
}
|
36
|
-
/* line
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
88
|
+
/* line 41, ../scss/style.scss */
|
78
89
|
.mq-mixins-test tbody .respond-to-tablet .isResponding {
|
79
90
|
display: inline;
|
80
91
|
}
|
81
|
-
/* line
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
133
|
+
/* line 41, ../scss/style.scss */
|
123
134
|
.mq-mixins-test tbody .respond-to-desktop .isResponding {
|
124
135
|
display: inline;
|
125
136
|
}
|
126
|
-
/* line
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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>
|
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
|
-
<
|
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
|
-
<
|
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 "
|
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
|
-
|
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
|
-
|
13
|
-
|
14
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
57
|
+
requirement: &id003 !ruby/object:Gem::Requirement
|
57
58
|
none: false
|
58
|
-
requirements:
|
59
|
-
- -
|
60
|
-
- !ruby/object:Gem::Version
|
61
|
-
|
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
|
-
|
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/
|
78
|
-
- 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
|
-
|
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
|
-
|
95
|
-
segments:
|
103
|
+
requirements:
|
104
|
+
- - ">="
|
105
|
+
- !ruby/object:Gem::Version
|
106
|
+
hash: 3
|
107
|
+
segments:
|
96
108
|
- 0
|
97
|
-
|
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
|