breakpoint 1.1 → 1.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.
- 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' {
|