responder 0.1 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. data/README.md +6 -6
  2. data/lib/responder/version.rb +1 -1
  3. data/scss/responder/_respond-to.scss +29 -2
  4. data/scss/responder/functions.scss +23 -11
  5. data/test/css/style-old-ie.css +110 -6
  6. data/test/index.html +1 -1
  7. data/test/scss/style-old-ie.scss +1 -1
  8. 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
- - *breakpointName***-only**
67
- - *breakpointName***-and-up**
68
- - *breakpointName***-and-below**
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: 480px) { … }
105
+ @media screen and (min-width: 320px) and (max-width: 599px) { … }
106
106
 
107
- min-width value is the first breakpoint of the group and max-width is the last one. You can create as many breakpoints as you need for each group. It's that simple.
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 respon-to(tablet-only) {
147
+ @include respond-to(tablet-only) {
148
148
  background: blue;
149
149
  }
150
150
 
data/lib/responder/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Responder
2
- VERSION = "0.1"
2
+ VERSION = "0.1.1"
3
3
  end
data/scss/responder/_respond-to.scss CHANGED
@@ -28,9 +28,36 @@
28
28
  $max-width: 0;
29
29
 
30
30
  @if $old-ie-support == true {
31
- @if $breakpoint-name == $old-ie-breakpoint or $breakpoint-name == $old-ie-breakpoint {
32
- @content;
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
data/scss/responder/functions.scss CHANGED
@@ -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
- // 4. Get size (px or em)
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
- @for $i from 1 through length($breakpoint-names) {
117
-
118
- @if $root == nth($breakpoint-names, $i) {
119
- $group: false;
120
- $groupid: false;
121
- $br: join($root, $extension, space);
122
- $br: join($br, $group, space);
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-desktop-only {
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-desktop-only .isResponding {
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-desktop-only .isInactive {
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-desktop-and-up {
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-desktop-and-up .isResponding {
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-desktop-and-up .isInactive {
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
@@ -28,7 +28,7 @@
28
28
  </ul>
29
29
 
30
30
  <h2>Support for old-IE</h2>
31
- <pre><code>$old-ie-breakpoint: desktop</code></pre>
31
+ <pre><code>$old-ie-breakpoint: tablet-portrait</code></pre>
32
32
 
33
33
  <h2>Respond-to mixin</h2>
34
34
  <p>Resize your browser!</p>
data/test/scss/style-old-ie.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  $old-ie-support: true;
8
8
 
9
9
  // Set the breakpoint for old IE
10
- $old-ie-breakpoint: desktop;
10
+ $old-ie-breakpoint: tablet-portrait;
11
11
 
12
12
  // Import the main stylesheet
13
13
  @import "style";
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: 9
4
+ hash: 25
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
8
  - 1
9
- version: "0.1"
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-10-24 00:00:00 Z
18
+ date: 2012-11-21 00:00:00 Z
18
19
  dependencies:
19
20
  - !ruby/object:Gem::Dependency
20
21
  name: sass