responder 0.1 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +6 -6
- data/lib/responder/version.rb +1 -1
- data/scss/responder/_respond-to.scss +29 -2
- data/scss/responder/functions.scss +23 -11
- data/test/css/style-old-ie.css +110 -6
- data/test/index.html +1 -1
- data/test/scss/style-old-ie.scss +1 -1
- metadata +4 -3
data/README.md
CHANGED
@@ -63,9 +63,9 @@ This is how you use respond-to in your SASS stylesheet:
|
|
63
63
|
}
|
64
64
|
For each breakpoint you've defined you now have 3 available parameters for the respond-to mixin:
|
65
65
|
|
66
|
-
-
|
67
|
-
-
|
68
|
-
-
|
66
|
+
- breakpointName**-only**
|
67
|
+
- breakpointName**-and-up**
|
68
|
+
- breakpointName**-and-below**
|
69
69
|
|
70
70
|
*An example:*
|
71
71
|
|
@@ -102,9 +102,9 @@ Groups are sets of breakpoints whose names share the same root followed by a das
|
|
102
102
|
|
103
103
|
Given the example breakpoint list above, `respond-to(mobile-only)` will output the following css:
|
104
104
|
|
105
|
-
@media screen and (min-width: 320px) and (max-width:
|
105
|
+
@media screen and (min-width: 320px) and (max-width: 599px) { … }
|
106
106
|
|
107
|
-
|
107
|
+
You can create as many breakpoints as you need for each group. It's that simple.
|
108
108
|
|
109
109
|
### 3. Mobile first & Old IE
|
110
110
|
|
@@ -144,7 +144,7 @@ An example on style.scss:
|
|
144
144
|
padding: 10px;
|
145
145
|
|
146
146
|
// Only gets compiled on you main stylesheet (style.css)
|
147
|
-
@include
|
147
|
+
@include respond-to(tablet-only) {
|
148
148
|
background: blue;
|
149
149
|
}
|
150
150
|
|
data/lib/responder/version.rb
CHANGED
@@ -28,9 +28,36 @@
|
|
28
28
|
$max-width: 0;
|
29
29
|
|
30
30
|
@if $old-ie-support == true {
|
31
|
-
|
32
|
-
|
31
|
+
|
32
|
+
@if yepnope($breakpoint-names, $old-ie-breakpoint) {
|
33
|
+
|
34
|
+
// Get the value of the old-ie breakpoint
|
35
|
+
$old-ie-breakpoint-value: nth($breakpoint-values, index($breakpoint-names, $old-ie-breakpoint));
|
36
|
+
|
37
|
+
$breakpoint-value: null;
|
38
|
+
|
39
|
+
@if $breakpoint-group == true {
|
40
|
+
// Get the group min-width
|
41
|
+
$breakpoint-value: nth( nth($breakpoint-groups, $breakpoint-group-id), 2);
|
42
|
+
} @else {
|
43
|
+
// Get the breakpoint value
|
44
|
+
$breakpoint-value: nth($breakpoint-values, index($breakpoint-names, $breakpoint-name));
|
45
|
+
}
|
46
|
+
|
47
|
+
// Check if the media query should respond
|
48
|
+
@if $breakpoint-extend == 'only' and $breakpoint-value == $old-ie-breakpoint-value {
|
49
|
+
@content;
|
50
|
+
} @else if $breakpoint-extend == 'and-up' and $old-ie-breakpoint-value >= $breakpoint-value{
|
51
|
+
@content;
|
52
|
+
} @else if $breakpoint-extend == 'and-below' and $old-ie-breakpoint-value <= $breakpoint-value {
|
53
|
+
@content;
|
54
|
+
}
|
55
|
+
} @else {
|
56
|
+
// Invlaid $old-ie-breakpoint value
|
57
|
+
@warn "[ERROR] "+ $old-ie-breakpoint +" is not a valid breakpoint name for $old-ie-breakpoint. Valid breakpoint names are: "+ $breakpoint-names
|
33
58
|
}
|
59
|
+
|
60
|
+
|
34
61
|
} @else {
|
35
62
|
|
36
63
|
// If it's a regular breakpoint
|
@@ -6,7 +6,8 @@
|
|
6
6
|
// 2. Get breakpoint Values list
|
7
7
|
// 3. Get breakpoint Groups list with min and max values
|
8
8
|
// 4. Get the Respond-to breakpoint
|
9
|
-
//
|
9
|
+
// 5. Get size (px or em)
|
10
|
+
// 6. Yepnope
|
10
11
|
//
|
11
12
|
// =============================================================================
|
12
13
|
|
@@ -113,16 +114,13 @@
|
|
113
114
|
$root: regex($breakpoint, '(.*?)-'+ $extension + '$');
|
114
115
|
|
115
116
|
// Check if it's a normal breakpoint
|
116
|
-
@
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
$br: join($br, $groupid, space);
|
124
|
-
@return $br;
|
125
|
-
}
|
117
|
+
@if yepnope($breakpoint-names, $root) {
|
118
|
+
$group: false;
|
119
|
+
$groupid: false;
|
120
|
+
$br: join($root, $extension, space);
|
121
|
+
$br: join($br, $group, space);
|
122
|
+
$br: join($br, $groupid, space);
|
123
|
+
@return $br;
|
126
124
|
}
|
127
125
|
|
128
126
|
// Check if it's a group
|
@@ -153,4 +151,18 @@
|
|
153
151
|
} @else {
|
154
152
|
@return $value;
|
155
153
|
}
|
154
|
+
}
|
155
|
+
|
156
|
+
// =============================================================================
|
157
|
+
// 6. Yepnope
|
158
|
+
// Take a $list, return true if any $args are present.
|
159
|
+
// =============================================================================
|
160
|
+
|
161
|
+
@function yepnope($list, $args) {
|
162
|
+
$list: compact($list);
|
163
|
+
$check: false;
|
164
|
+
@each $arg in $args {
|
165
|
+
$check: if(index($list,$arg), true, $check);
|
166
|
+
}
|
167
|
+
@return $check;
|
156
168
|
}
|
data/test/css/style-old-ie.css
CHANGED
@@ -29,29 +29,133 @@ tr > td:first-child {
|
|
29
29
|
display: none;
|
30
30
|
}
|
31
31
|
/* line 63, ../scss/style.scss */
|
32
|
-
.mq-mixins-test tbody .respond-to-
|
32
|
+
.mq-mixins-test tbody .respond-to-mobile-and-up {
|
33
33
|
background: #a7e040;
|
34
34
|
color: white;
|
35
35
|
}
|
36
36
|
/* line 41, ../scss/style.scss */
|
37
|
-
.mq-mixins-test tbody .respond-to-
|
37
|
+
.mq-mixins-test tbody .respond-to-mobile-and-up .isResponding {
|
38
38
|
display: inline;
|
39
39
|
}
|
40
40
|
/* line 42, ../scss/style.scss */
|
41
|
-
.mq-mixins-test tbody .respond-to-
|
41
|
+
.mq-mixins-test tbody .respond-to-mobile-and-up .isInactive {
|
42
42
|
display: none;
|
43
43
|
}
|
44
44
|
/* line 63, ../scss/style.scss */
|
45
|
-
.mq-mixins-test tbody .respond-to-
|
45
|
+
.mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
|
46
46
|
background: #a7e040;
|
47
47
|
color: white;
|
48
48
|
}
|
49
49
|
/* line 41, ../scss/style.scss */
|
50
|
-
.mq-mixins-test tbody .respond-to-
|
50
|
+
.mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isResponding {
|
51
51
|
display: inline;
|
52
52
|
}
|
53
53
|
/* line 42, ../scss/style.scss */
|
54
|
-
.mq-mixins-test tbody .respond-to-
|
54
|
+
.mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isInactive {
|
55
|
+
display: none;
|
56
|
+
}
|
57
|
+
/* line 63, ../scss/style.scss */
|
58
|
+
.mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
|
59
|
+
background: #a7e040;
|
60
|
+
color: white;
|
61
|
+
}
|
62
|
+
/* line 41, ../scss/style.scss */
|
63
|
+
.mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isResponding {
|
64
|
+
display: inline;
|
65
|
+
}
|
66
|
+
/* line 42, ../scss/style.scss */
|
67
|
+
.mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isInactive {
|
68
|
+
display: none;
|
69
|
+
}
|
70
|
+
/* line 63, ../scss/style.scss */
|
71
|
+
.mq-mixins-test tbody .respond-to-tablet-only {
|
72
|
+
background: #a7e040;
|
73
|
+
color: white;
|
74
|
+
}
|
75
|
+
/* line 41, ../scss/style.scss */
|
76
|
+
.mq-mixins-test tbody .respond-to-tablet-only .isResponding {
|
77
|
+
display: inline;
|
78
|
+
}
|
79
|
+
/* line 42, ../scss/style.scss */
|
80
|
+
.mq-mixins-test tbody .respond-to-tablet-only .isInactive {
|
81
|
+
display: none;
|
82
|
+
}
|
83
|
+
/* line 63, ../scss/style.scss */
|
84
|
+
.mq-mixins-test tbody .respond-to-tablet-and-up {
|
85
|
+
background: #a7e040;
|
86
|
+
color: white;
|
87
|
+
}
|
88
|
+
/* line 41, ../scss/style.scss */
|
89
|
+
.mq-mixins-test tbody .respond-to-tablet-and-up .isResponding {
|
90
|
+
display: inline;
|
91
|
+
}
|
92
|
+
/* line 42, ../scss/style.scss */
|
93
|
+
.mq-mixins-test tbody .respond-to-tablet-and-up .isInactive {
|
94
|
+
display: none;
|
95
|
+
}
|
96
|
+
/* line 63, ../scss/style.scss */
|
97
|
+
.mq-mixins-test tbody .respond-to-tablet-and-below {
|
98
|
+
background: #a7e040;
|
99
|
+
color: white;
|
100
|
+
}
|
101
|
+
/* line 41, ../scss/style.scss */
|
102
|
+
.mq-mixins-test tbody .respond-to-tablet-and-below .isResponding {
|
103
|
+
display: inline;
|
104
|
+
}
|
105
|
+
/* line 42, ../scss/style.scss */
|
106
|
+
.mq-mixins-test tbody .respond-to-tablet-and-below .isInactive {
|
107
|
+
display: none;
|
108
|
+
}
|
109
|
+
/* line 63, ../scss/style.scss */
|
110
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-only {
|
111
|
+
background: #a7e040;
|
112
|
+
color: white;
|
113
|
+
}
|
114
|
+
/* line 41, ../scss/style.scss */
|
115
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-only .isResponding {
|
116
|
+
display: inline;
|
117
|
+
}
|
118
|
+
/* line 42, ../scss/style.scss */
|
119
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-only .isInactive {
|
120
|
+
display: none;
|
121
|
+
}
|
122
|
+
/* line 63, ../scss/style.scss */
|
123
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
|
124
|
+
background: #a7e040;
|
125
|
+
color: white;
|
126
|
+
}
|
127
|
+
/* line 41, ../scss/style.scss */
|
128
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isResponding {
|
129
|
+
display: inline;
|
130
|
+
}
|
131
|
+
/* line 42, ../scss/style.scss */
|
132
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isInactive {
|
133
|
+
display: none;
|
134
|
+
}
|
135
|
+
/* line 63, ../scss/style.scss */
|
136
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
|
137
|
+
background: #a7e040;
|
138
|
+
color: white;
|
139
|
+
}
|
140
|
+
/* line 41, ../scss/style.scss */
|
141
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isResponding {
|
142
|
+
display: inline;
|
143
|
+
}
|
144
|
+
/* line 42, ../scss/style.scss */
|
145
|
+
.mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isInactive {
|
146
|
+
display: none;
|
147
|
+
}
|
148
|
+
/* line 63, ../scss/style.scss */
|
149
|
+
.mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
|
150
|
+
background: #a7e040;
|
151
|
+
color: white;
|
152
|
+
}
|
153
|
+
/* line 41, ../scss/style.scss */
|
154
|
+
.mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isResponding {
|
155
|
+
display: inline;
|
156
|
+
}
|
157
|
+
/* line 42, ../scss/style.scss */
|
158
|
+
.mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isInactive {
|
55
159
|
display: none;
|
56
160
|
}
|
57
161
|
/* line 63, ../scss/style.scss */
|
data/test/index.html
CHANGED
data/test/scss/style-old-ie.scss
CHANGED
metadata
CHANGED
@@ -1,12 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: responder
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 25
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 1
|
9
|
-
|
9
|
+
- 1
|
10
|
+
version: 0.1.1
|
10
11
|
platform: ruby
|
11
12
|
authors:
|
12
13
|
- Daniel Guillan
|
@@ -14,7 +15,7 @@ autorequire:
|
|
14
15
|
bindir: bin
|
15
16
|
cert_chain: []
|
16
17
|
|
17
|
-
date: 2012-
|
18
|
+
date: 2012-11-21 00:00:00 Z
|
18
19
|
dependencies:
|
19
20
|
- !ruby/object:Gem::Dependency
|
20
21
|
name: sass
|