breakpoint 1.0 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
data/CHANGELOG.markdown CHANGED
@@ -20,4 +20,4 @@
20
20
  * Added ability to have single feature/value input be either have feature first or second
21
21
 
22
22
  ## 0.1 - May 22, 2012
23
- * extract breakpoint from ssurvival kit to this gem
23
+ * extract breakpoint from survival kit to this gem
data/README.markdown CHANGED
@@ -1,8 +1,8 @@
1
1
  # Breakpoint #
2
2
 
3
- **Really simple media queries in Sass**
3
+ **Media Queries Made Easy**
4
4
 
5
- Breakpoint aims to make writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the `breakpoint` mixin. Breakpoint handles all of the lifting of writing the media query itself, including cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.
5
+ Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the `breakpoint` mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.
6
6
 
7
7
  Breakpoint makes the following assumptions:
8
8
 
@@ -11,7 +11,7 @@ Breakpoint makes the following assumptions:
11
11
  * A two value query is assumed to be against the `min-width`/`max-width` feature pair. This can be overwritten by adding the feature you'd like to query against or by changing the provided default variable.
12
12
  * Unprefixed `device-pixel-ratio` queries are transformed into the standard `resolution` breakpoint based on the [W3C recommendation for how to do so](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/). This can be overwritten by passing in prefixed the needed prefixed feature.
13
13
 
14
- If you'd prefer to use string names to identify your queries as opposed to variables, check out [Respond-To](https://github.com/snugug/respond-to); a string based naming API for Breakpoint.
14
+ If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, check out [Respond-To](https://github.com/snugug/respond-to); a string based naming API for Breakpoint.
15
15
 
16
16
  ## Requirements
17
17
 
@@ -46,22 +46,22 @@ Breakpoint provides a few default options that you can change.
46
46
 
47
47
  ```scss
48
48
  // create $breakpoint variables like so
49
- // assume $breakpoint-default-feature if only a number
50
- $breakpoint1: 500px;
51
- $breakpoint2: 30em;
49
+ // assume min-width (by default) if only a number
50
+ $breakpoint-medium-width: 500px;
51
+ $breakpoint-medium-width-em: 30em;
52
52
  // set min-width/max-width if both values are numbers
53
- $breakpoint3: 500px 700px;
53
+ $breakpoint-medium-not-wide: 500px 700px;
54
54
  // set min/max of feature if there are two numbers
55
- $breakpoint4: 300px 700px 'height';
55
+ $breakpoint-medium-height: 300px 700px 'height';
56
56
  // if one value is a string, assume a feature/value pair
57
- $breakpoint5: min-width 700px;
58
- $breakpoint6: max-width 700px;
57
+ $breakpoint-kind-of-wide: min-width 700px;
58
+ $breakpoint-not-too-wide: max-width 700px;
59
59
  // for multidimensional lists, assume each item is a feature value pair
60
- $breakpoint7: max-width 700px, orientation portrait;
60
+ $breakpoint-wide-portrait: max-width 700px, orientation portrait;
61
61
  // handle one-sided features (ie. monochrome)
62
- $breakpoint8: max-width 700px, orientation portrait, monochrome;
63
- $breakpoint9: monochrome;
64
- $breakpoint10: 2 device-pixel-ratio;
62
+ $breakpoint-wide-portrait-mono: max-width 700px, orientation portrait, monochrome;
63
+ $breakpoint-mono: monochrome;
64
+ $breakpoint-hi-rez: 2 device-pixel-ratio;
65
65
  ```
66
66
 
67
67
 
@@ -71,143 +71,209 @@ Call the mixin and pass one of your breakpoint variables. You can also call it w
71
71
 
72
72
  ```scss
73
73
  .foo {
74
- @include breakpoint($breakpoint1) {
75
- content: 'foo';
74
+ @include breakpoint($breakpoint-medium-width) {
75
+ content: 'medium widths';
76
76
  }
77
77
  }
78
78
  .bar {
79
- @include breakpoint($breakpoint2) {
80
- content: 'bar';
79
+ @include breakpoint($breakpoint-medium-width-em) {
80
+ content: 'medium widths measured in ems';
81
81
  }
82
82
  }
83
83
  .baz {
84
- @include breakpoint($breakpoint3) {
85
- content: 'baz';
84
+ @include breakpoint($breakpoint-medium-not-wide) {
85
+ content: 'medium, but not too wide';
86
86
  }
87
87
  }
88
+ .tgif {
89
+ @include breakpoint($breakpoint-medium-height) {
90
+ content: 'medium heights';
91
+ }
92
+ }
88
93
  .omg {
89
- @include breakpoint($breakpoint5) {
90
- content: 'omg';
94
+ @include breakpoint($breakpoint-kind-of-wide) {
95
+ content: 'kind of wide';
91
96
  }
92
97
  }
93
98
  .wtf {
94
- @include breakpoint($breakpoint6) {
95
- content: 'wtf';
99
+ @include breakpoint($breakpoint-not-too-wide) {
100
+ content: 'not too wide';
96
101
  }
97
102
  }
98
103
  .bbq {
99
- @include breakpoint($breakpoint7) {
100
- content: 'bbq';
104
+ @include breakpoint($breakpoint-wide-portrait) {
105
+ content: 'wide, portrait';
101
106
  }
102
107
  }
103
108
  .zztop {
104
- @include breakpoint($breakpoint8) {
105
- content: 'zztop';
106
- }
107
- }
108
- .elp {
109
- @include breakpoint($breakpoint1, print) {
110
- content: 'elp';
109
+ @include breakpoint($breakpoint-wide-portrait-mono) {
110
+ content: 'wide, portrait, monochrome';
111
111
  }
112
112
  }
113
113
  .csny {
114
- @include breakpoint($breakpoint9) {
115
- content: 'csny';
114
+ @include breakpoint($breakpoint-mono) {
115
+ content: 'monochrome';
116
116
  }
117
117
  }
118
- .rhcp {
119
- @include breakpoint(30em 40em) {
120
- content: 'rhcp';
118
+ .elp {
119
+ @include breakpoint($breakpoint-mono, print) {
120
+ content: 'monochrome, print';
121
121
  }
122
122
  }
123
- .tgif {
124
- @include breakpoint($breakpoint4) {
125
- content: 'tgif';
126
- }
127
- }
128
123
  .omgdpr {
129
- @include breakpoint($breakpoint10) {
130
- content: 'omgdpr';
124
+ @include breakpoint($breakpoint-hi-rez) {
125
+ content: 'hi resolutions';
131
126
  }
132
127
  }
128
+
129
+ // You can use breakpoint without variables too.
130
+ .rhcp {
131
+ @include breakpoint(30em 40em) {
132
+ content: 'between 30 and 40ems';
133
+ }
134
+ }
133
135
  ```
134
136
 
135
137
  Example generated CSS
136
138
 
137
139
  ```css
138
- @media screen and (min-width: 500px) {
140
+ @media (min-width: 500px) {
139
141
  .foo {
140
- content: "foo";
142
+ content: 'medium widths';
141
143
  }
142
144
  }
143
145
 
144
- @media screen and (min-width: 30em) {
146
+ @media (min-width: 30em) {
145
147
  .bar {
146
- content: "bar";
148
+ content: 'medium widths measured in ems';
147
149
  }
148
150
  }
149
151
 
150
- @media screen and (min-width: 500px) and (max-width: 700px) {
152
+ @media (min-width: 500px) and (max-width: 700px) {
151
153
  .baz {
152
- content: "baz";
154
+ content: 'medium, but not too wide';
155
+ }
156
+ }
157
+
158
+ @media (min-height: 300px) and (max-height: 700px) {
159
+ .tgif {
160
+ content: 'medium heights';
153
161
  }
154
162
  }
155
163
 
156
- @media screen and (min-width: 700px) {
164
+ @media (min-width: 700px) {
157
165
  .omg {
158
- content: "omg";
166
+ content: 'kind of wide';
159
167
  }
160
168
  }
161
169
 
162
- @media screen and (max-width: 700px) {
170
+ @media (max-width: 700px) {
163
171
  .wtf {
164
- content: "wtf";
172
+ content: 'not too wide';
165
173
  }
166
174
  }
167
175
 
168
- @media screen and (max-width: 700px) and (orientation: portrait) {
176
+ @media (max-width: 700px) and (orientation: portrait) {
169
177
  .bbq {
170
- content: "bbq";
178
+ content: 'wide, portrait';
171
179
  }
172
180
  }
173
181
 
174
- @media screen and (max-width: 700px) and (orientation: portrait) and (monochrome) {
182
+ @media (max-width: 700px) and (orientation: portrait) and (monochrome) {
175
183
  .zztop {
176
- content: "zztop";
184
+ content: 'wide, portrait, monochrome';
185
+ }
186
+ }
187
+
188
+ @media (monochrome) {
189
+ .csny {
190
+ content: 'monochrome';
177
191
  }
178
192
  }
179
193
 
180
- @media print and (min-width: 500px) {
194
+ @media print and (monochrome) {
181
195
  .elp {
182
- content: "elp";
196
+ content: 'monochrome, print';
183
197
  }
184
198
  }
185
199
 
186
- @media screen and (monochrome) {
187
- .csny {
188
- content: "csny";
200
+ @media (resolution: 192dpi) {
201
+ .omgdpr {
202
+ content: 'hi resolutions';
189
203
  }
190
204
  }
191
205
 
192
- @media screen and (min-width: 30em) and (max-width: 40em) {
206
+ @media (min-width: 30em) and (max-width: 40em) {
193
207
  .rhcp {
194
- content: "rhcp";
208
+ content: 'between 30 and 40ems';
209
+ }
210
+ }
211
+ ```
212
+
213
+ With `$breakpoint-to-ems: true;`
214
+ ```scss
215
+ @media (min-width: 31.25em) {
216
+ .foo {
217
+ content: 'medium widths';
218
+ }
219
+ }
220
+
221
+ @media (min-width: 30em) {
222
+ .bar {
223
+ content: 'medium widths measured in ems';
224
+ }
225
+ }
226
+
227
+ @media (min-width: 31.25em) and (max-width: 43.75em) {
228
+ .baz {
229
+ content: 'medium, but not too wide';
195
230
  }
196
231
  }
197
232
 
198
- @media screen and (min-height: 300px) and (max-height: 700px) {
233
+ @media (min-height: 18.75em) and (max-height: 43.75em) {
199
234
  .tgif {
200
- content: "tgif";
235
+ content: 'medium heights';
201
236
  }
202
237
  }
203
238
 
204
- @media screen and (resolution: 192dpi) {
205
- .omgdpr {
206
- content: "omgdpr";
239
+ @media (min-width: 43.75em) {
240
+ .omg {
241
+ content: 'kind of wide';
242
+ }
243
+ }
244
+
245
+ @media (max-width: 43.75em) {
246
+ .wtf {
247
+ content: 'not too wide';
248
+ }
249
+ }
250
+
251
+ @media (max-width: 43.75em) and (orientation: portrait) {
252
+ .bbq {
253
+ content: 'wide, portrait';
254
+ }
255
+ }
256
+
257
+ @media (max-width: 43.75em) and (orientation: portrait) and (monochrome) {
258
+ .zztop {
259
+ content: 'wide, portrait, monochrome';
260
+ }
261
+ }
262
+
263
+ @media print and (monochrome) {
264
+ .elp {
265
+ content: 'monochrome, print';
266
+ }
267
+ }
268
+
269
+ @media (min-width: 30em) and (max-width: 40em) {
270
+ .rhcp {
271
+ content: 'between 30 and 40ems';
207
272
  }
208
273
  }
209
274
  ```
210
275
 
276
+
211
277
  ## License
212
278
 
213
279
  Licensed under MIT/GPL.
@@ -216,4 +282,4 @@ GPL license:
216
282
  http://www.gnu.org/licenses/gpl.html
217
283
 
218
284
  MIT license:
219
- http://www.opensource.org/licenses/mit-license.php
285
+ http://www.opensource.org/licenses/mit-license.php
data/lib/breakpoint.rb CHANGED
@@ -3,8 +3,6 @@ require 'compass'
3
3
  Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
4
4
 
5
5
  module Breakpoint
6
-
7
- VERSION = "1.0"
8
- DATE = "2012-06-22"
9
-
6
+ VERSION = "1.0.1"
7
+ DATE = "2012-06-27"
10
8
  end
@@ -206,23 +206,35 @@ $breakpoint-to-ems: false !default;
206
206
  }
207
207
 
208
208
  @function breakpoint-generate($media, $feature, $value, $first: false) {
209
+ // Media Query string to be returned
209
210
  $new-string: "";
210
- @if $media == '' and $first == true {
211
+
212
+ // If it's the first item, it gets special treatment
213
+ @if $first == true {
214
+ // And Statement
215
+ $and: 'and ';
216
+ // If $media is blank (i.e. all), remove and statement
217
+ @if $media == '' {
218
+ $and: '';
219
+ }
220
+
211
221
  @if $feature != false {
212
- $new-string: #{$media}unquote("(#{$feature}: #{$value})");
222
+ $new-string: #{$media}unquote("#{$and}(#{$feature}: #{$value})");
213
223
  }
214
224
  @else {
215
- $new-string: #{$media}unquote("(#{$value})");
225
+ $new-string: #{$media}unquote("#{$and}(#{$value})");
216
226
  }
217
227
  }
228
+
218
229
  @else {
219
230
  @if $feature != false {
220
- $new-string: #{$media}unquote("and (#{$feature}: #{$value})");
231
+ $new-string: unquote("and (#{$feature}: #{$value})");
221
232
  }
222
233
  @else {
223
- $new-string: #{$media}unquote("and (#{$value})");
234
+ $new-string: unquote("and (#{$value})");
224
235
  }
225
236
  }
237
+
226
238
  @return $new-string;
227
239
  }
228
240
 
metadata CHANGED
@@ -5,7 +5,8 @@ version: !ruby/object:Gem::Version
5
5
  segments:
6
6
  - 1
7
7
  - 0
8
- version: "1.0"
8
+ - 1
9
+ version: 1.0.1
9
10
  platform: ruby
10
11
  authors:
11
12
  - Mason Wendell
@@ -14,7 +15,7 @@ autorequire:
14
15
  bindir: bin
15
16
  cert_chain: []
16
17
 
17
- date: 2012-06-22 00:00:00 -04:00
18
+ date: 2012-06-27 00:00:00 -04:00
18
19
  default_executable:
19
20
  dependencies:
20
21
  - !ruby/object:Gem::Dependency