breakpoint 1.1 → 1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.markdown +3 -0
- data/README.markdown +14 -6
- data/lib/breakpoint.rb +1 -1
- data/stylesheets/_breakpoint.scss +3 -0
- metadata +2 -1
data/CHANGELOG.markdown
CHANGED
@@ -1,5 +1,8 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
## 1.1.1 - July 30, 2012
|
4
|
+
* Added (forgot to include the first time) the ability to query the media type using `breakpoint-get-context('media')`
|
5
|
+
|
3
6
|
|
4
7
|
## 1.1 - July 29, 2012
|
5
8
|
* Added function `breakpoint-get-context($feature)` to allow users to get the current media query context
|
data/README.markdown
CHANGED
@@ -10,7 +10,7 @@ Breakpoint makes the following assumptions:
|
|
10
10
|
* A single value query is assumed to be against the `min-width` feature. This can be overwritten by adding the feature you'd like to query against or by changing the provided default variable.
|
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
|
|
13
|
-
Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.
|
13
|
+
Breakpoint also allows you to get the [context of your media queries](https://github.com/canarymason/breakpoint#media-query-context) from your code, allowing you to write dynamic mixins based on their media query context.
|
14
14
|
|
15
15
|
If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, check out [Respond-To](https://github.com/snugug/respond-to); a string based naming API for Breakpoint.
|
16
16
|
|
@@ -47,9 +47,14 @@ Breakpoint provides a few default options that you can change.
|
|
47
47
|
* `$breakpoint-default-feature` - Defaults to 'min-width'. If you write a breakpoint with only a number, this is the feature that is used.
|
48
48
|
* `$breakpoint-default-pair` - Defaults to 'width'. If you write a breakpoint with two numbers but do not specify the feature, this is the feature that is used.
|
49
49
|
* `$breakpoint-to-ems` - Defaults to 'false'. If set to true, all pt/px/percent numbers will be converted to em units for better, more accessable media queries.
|
50
|
+
* `$breakpoint-prefixes` - Defines the prefixes to write for prefixed media features. Defaults to `'webkit' 'moz'`.
|
51
|
+
* `$breakpoint-prefixed-queries` - Defines what queries should be prefixed. Defaults to `'device-pixel-ratio' 'min-device-pixel-ratio' 'max-device-pixel-ratio'`.
|
50
52
|
|
51
|
-
|
53
|
+
PLEASE NOTE! If you're a savvy reader, you'll have noticed that we've not included `-o-device-pixel-ratio` as a prefixed option, and we would encourage you not to either. Opera has decided that [their implementation should be written as a fraction, not as a decimal](http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/#device-pixel-ratio), and we are currently not prepared to support automatic conversion of decimals to fractions. This leaves us in the position of either supporting only fractions for unprefixed `device-pixel-ratio`, which is counter to the way the two largest browsers support the query, or suggesting that if you want to use `-o-device-pixel-ratio` that you write a separate media query for it, and we've chosen the later.
|
52
54
|
|
55
|
+
## Using Breakpoint
|
56
|
+
|
57
|
+
First, we set up our breakpoint variables.
|
53
58
|
|
54
59
|
```scss
|
55
60
|
// create $breakpoint variables like so
|
@@ -71,9 +76,6 @@ $breakpoint-mono: monochrome;
|
|
71
76
|
$breakpoint-hi-rez: 2 device-pixel-ratio;
|
72
77
|
```
|
73
78
|
|
74
|
-
|
75
|
-
## Using Breakpoint
|
76
|
-
|
77
79
|
Call the mixin and pass one of your breakpoint variables. You can also call it with a la carte arguments.
|
78
80
|
|
79
81
|
```scss
|
@@ -204,7 +206,13 @@ Example generated CSS
|
|
204
206
|
}
|
205
207
|
}
|
206
208
|
|
207
|
-
@media (
|
209
|
+
@media (-webkit-device-pixel-ratio: 2) {
|
210
|
+
.omgdpr {
|
211
|
+
content: 'hi resolutions';
|
212
|
+
}
|
213
|
+
}
|
214
|
+
|
215
|
+
@media (-moz-device-pixel-ratio: 2) {
|
208
216
|
.omgdpr {
|
209
217
|
content: 'hi resolutions';
|
210
218
|
}
|
data/lib/breakpoint.rb
CHANGED
@@ -38,6 +38,9 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
|
|
38
38
|
|
39
39
|
// Reset Context
|
40
40
|
@include TXkgcmVzZXQhIEdvIGF3YXkh;
|
41
|
+
|
42
|
+
// Set Media Context
|
43
|
+
$context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('media', $media);
|
41
44
|
|
42
45
|
// Initialize Query String
|
43
46
|
@if $media != 'all' {
|