breakpoint 2.0.0 → 2.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +13 -416
- data/lib/breakpoint.rb +1 -1
- data/stylesheets/_breakpoint.scss +1 -0
- metadata +2 -2
data/README.markdown
CHANGED
|
@@ -4,436 +4,33 @@
|
|
|
4
4
|
|
|
5
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
|
-
Breakpoint makes the following assumptions:
|
|
8
|
-
|
|
9
|
-
* All queries are assumed to be for all media types. This can be overwritten by specifying the media you'd like to query against as the second parameter in the breakpoint mixin.
|
|
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
|
-
* 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
|
-
|
|
13
7
|
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
8
|
|
|
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)
|
|
9
|
+
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 the [Respond-To](https://github.com/snugug/respond-to) syntax, now included in Breakpoint core!
|
|
16
10
|
|
|
17
11
|
**It is important to note** that due to limitations within the Sass language itself, which themselve stem from some potentially unexpected cascading from doing so, Breakpoint is unable to concat like media queries into a single media query. This means they will be spread out throughout your CSS. This is unfortunate, yes, but currently unavoiadable. That being said, once [Sass Issue #241: Seperate Media/Browser Specific Markup to Separate Style Sheet](https://github.com/nex3/sass/issues/241) hits, be sure we're going to take full advantage of it.
|
|
18
12
|
|
|
19
|
-
## Table of Contents
|
|
20
|
-
|
|
21
|
-
1. [Requirements](#requirements)
|
|
22
|
-
2. [Installation](#installation)
|
|
23
|
-
3. [Setup](#setup)
|
|
24
|
-
* [Breakpoint Options](#breakpoint-options)
|
|
25
|
-
* [Using Breakpoint](#using-breakpoint)
|
|
26
|
-
4. [Media Query Context](#media-query-context)
|
|
27
|
-
5. [No Query Fallback](#no-query-fallback)
|
|
28
|
-
* [Wrapping Selector, Same Stylesheet](#wrapping-selector-same-stylesheet)
|
|
29
|
-
* [No Wrapping Selector, Separate Stylesheet](#no-wrapping-selector-separate-stylesheet)
|
|
30
|
-
* [Wrapping Selector, Separate Stylesheet](#wrapping-selector-separate-stylesheet)
|
|
31
|
-
|
|
32
|
-
## Requirements
|
|
33
|
-
|
|
34
|
-
Breakpoint is a Compass extension, so make sure you have [Sass and Compass Installed](http://compass-style.org/install/) in order to use its awesomeness!
|
|
35
|
-
|
|
36
|
-
Breakpoint also requires Sass 3.2. Breakpoint should install Sass 3.2 for you when you install it, but in case you are getting errors, open up your terminal and type the following in:
|
|
37
|
-
|
|
38
|
-
`gem install sass`
|
|
39
|
-
|
|
40
|
-
This will install Sass 3.2. If you are compiling with CodeKit, [Chris Coyier has an awesome writeup](http://css-tricks.com/media-queries-sass-3-2-and-codekit/) on how to get CodeKit playing nice with Sass 3.2, at least until it is updated to 3.2.
|
|
41
|
-
|
|
42
|
-
## Installation
|
|
43
|
-
|
|
44
|
-
`gem install breakpoint`
|
|
45
|
-
|
|
46
|
-
#### If creating a new project
|
|
47
|
-
`compass create <my_project> -r breakpoint`
|
|
48
|
-
|
|
49
|
-
#### If adding to existing project, in config.rb
|
|
50
|
-
`require 'breakpoint'`
|
|
51
|
-
|
|
52
|
-
#### Import the breakpoint partial at the top of your working file
|
|
53
|
-
`@import "breakpoint";`
|
|
54
|
-
|
|
55
|
-
## Setup
|
|
56
|
-
|
|
57
|
-
### Breakpoint Options
|
|
58
|
-
|
|
59
|
-
Breakpoint provides a few default options that you can change.
|
|
60
|
-
|
|
61
|
-
* `$breakpoint-default-media` - Defaults to 'all'. If you do not pass a media type into the breakpoint mixin, this is the media type that will be used.
|
|
62
|
-
* `$breakpoint-default-feature` - Defaults to 'min-width'. If you write a breakpoint with only a number, this is the feature that is used.
|
|
63
|
-
* `$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.
|
|
64
|
-
* `$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.
|
|
65
|
-
* `$breakpoint-prefixes` - Defines the prefixes to write for prefixed media features. Defaults to `'webkit' 'moz'`.
|
|
66
|
-
* `$breakpoint-prefixed-queries` - Defines what queries should be prefixed. Defaults to `'device-pixel-ratio' 'min-device-pixel-ratio' 'max-device-pixel-ratio'`.
|
|
67
|
-
|
|
68
|
-
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.
|
|
69
|
-
|
|
70
|
-
## Using Breakpoint
|
|
71
|
-
|
|
72
|
-
First, we set up our breakpoint variables.
|
|
73
|
-
|
|
74
|
-
```scss
|
|
75
|
-
// create $breakpoint variables like so
|
|
76
|
-
// assume min-width (by default) if only a number
|
|
77
|
-
$breakpoint-medium-width: 500px;
|
|
78
|
-
$breakpoint-medium-width-em: 30em;
|
|
79
|
-
// set min-width/max-width if both values are numbers
|
|
80
|
-
$breakpoint-medium-not-wide: 500px 700px;
|
|
81
|
-
// set min/max of feature if there are two numbers
|
|
82
|
-
$breakpoint-medium-height: height 300px 700px;
|
|
83
|
-
// if one value is a string, assume a feature/value pair
|
|
84
|
-
$breakpoint-kind-of-wide: min-width 700px;
|
|
85
|
-
$breakpoint-not-too-wide: max-width 700px;
|
|
86
|
-
// for multidimensional lists, assume each item is a feature value pair
|
|
87
|
-
$breakpoint-wide-portrait: max-width 700px, orientation portrait;
|
|
88
|
-
// handle one-sided features (ie. monochrome)
|
|
89
|
-
$breakpoint-wide-portrait-mono: max-width 700px, orientation portrait, monochrome;
|
|
90
|
-
$breakpoint-mono: monochrome;
|
|
91
|
-
$breakpoint-hi-rez: 2 device-pixel-ratio;
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
Call the mixin and pass one of your breakpoint variables. You can also call it with a la carte arguments.
|
|
95
|
-
|
|
96
|
-
```scss
|
|
97
|
-
.foo {
|
|
98
|
-
@include breakpoint($breakpoint-medium-width) {
|
|
99
|
-
content: 'medium widths';
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
.bar {
|
|
103
|
-
@include breakpoint($breakpoint-medium-width-em) {
|
|
104
|
-
content: 'medium widths measured in ems';
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
.baz {
|
|
108
|
-
@include breakpoint($breakpoint-medium-not-wide) {
|
|
109
|
-
content: 'medium, but not too wide';
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
.tgif {
|
|
113
|
-
@include breakpoint($breakpoint-medium-height) {
|
|
114
|
-
content: 'medium heights';
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
.omg {
|
|
118
|
-
@include breakpoint($breakpoint-kind-of-wide) {
|
|
119
|
-
content: 'kind of wide';
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
.wtf {
|
|
123
|
-
@include breakpoint($breakpoint-not-too-wide) {
|
|
124
|
-
content: 'not too wide';
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
.bbq {
|
|
128
|
-
@include breakpoint($breakpoint-wide-portrait) {
|
|
129
|
-
content: 'wide, portrait';
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
.zztop {
|
|
133
|
-
@include breakpoint($breakpoint-wide-portrait-mono) {
|
|
134
|
-
content: 'wide, portrait, monochrome';
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
.csny {
|
|
138
|
-
@include breakpoint($breakpoint-mono) {
|
|
139
|
-
content: 'monochrome';
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
.elp {
|
|
143
|
-
@include breakpoint($breakpoint-mono, print) {
|
|
144
|
-
content: 'monochrome, print';
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
.omgdpr {
|
|
148
|
-
@include breakpoint($breakpoint-hi-rez) {
|
|
149
|
-
content: 'hi resolutions';
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
// You can use breakpoint without variables too.
|
|
154
|
-
.rhcp {
|
|
155
|
-
@include breakpoint(30em 40em) {
|
|
156
|
-
content: 'between 30 and 40ems';
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
Example generated CSS
|
|
162
|
-
|
|
163
|
-
```css
|
|
164
|
-
@media (min-width: 500px) {
|
|
165
|
-
.foo {
|
|
166
|
-
content: 'medium widths';
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
@media (min-width: 30em) {
|
|
171
|
-
.bar {
|
|
172
|
-
content: 'medium widths measured in ems';
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
@media (min-width: 500px) and (max-width: 700px) {
|
|
177
|
-
.baz {
|
|
178
|
-
content: 'medium, but not too wide';
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
@media (min-height: 300px) and (max-height: 700px) {
|
|
183
|
-
.tgif {
|
|
184
|
-
content: 'medium heights';
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
@media (min-width: 700px) {
|
|
189
|
-
.omg {
|
|
190
|
-
content: 'kind of wide';
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
@media (max-width: 700px) {
|
|
195
|
-
.wtf {
|
|
196
|
-
content: 'not too wide';
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
@media (max-width: 700px) and (orientation: portrait) {
|
|
201
|
-
.bbq {
|
|
202
|
-
content: 'wide, portrait';
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
@media (max-width: 700px) and (orientation: portrait) and (monochrome) {
|
|
207
|
-
.zztop {
|
|
208
|
-
content: 'wide, portrait, monochrome';
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
@media (monochrome) {
|
|
213
|
-
.csny {
|
|
214
|
-
content: 'monochrome';
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
@media print and (monochrome) {
|
|
219
|
-
.elp {
|
|
220
|
-
content: 'monochrome, print';
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
@media (-webkit-device-pixel-ratio: 2) {
|
|
225
|
-
.omgdpr {
|
|
226
|
-
content: 'hi resolutions';
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
@media (-moz-device-pixel-ratio: 2) {
|
|
231
|
-
.omgdpr {
|
|
232
|
-
content: 'hi resolutions';
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
@media (min-width: 30em) and (max-width: 40em) {
|
|
237
|
-
.rhcp {
|
|
238
|
-
content: 'between 30 and 40ems';
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
With `$breakpoint-to-ems: true;`
|
|
244
|
-
```scss
|
|
245
|
-
@media (min-width: 31.25em) {
|
|
246
|
-
.foo {
|
|
247
|
-
content: 'medium widths';
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
@media (min-width: 30em) {
|
|
252
|
-
.bar {
|
|
253
|
-
content: 'medium widths measured in ems';
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
@media (min-width: 31.25em) and (max-width: 43.75em) {
|
|
258
|
-
.baz {
|
|
259
|
-
content: 'medium, but not too wide';
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
@media (min-height: 18.75em) and (max-height: 43.75em) {
|
|
264
|
-
.tgif {
|
|
265
|
-
content: 'medium heights';
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
@media (min-width: 43.75em) {
|
|
270
|
-
.omg {
|
|
271
|
-
content: 'kind of wide';
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
@media (max-width: 43.75em) {
|
|
276
|
-
.wtf {
|
|
277
|
-
content: 'not too wide';
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
@media (max-width: 43.75em) and (orientation: portrait) {
|
|
282
|
-
.bbq {
|
|
283
|
-
content: 'wide, portrait';
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
@media (max-width: 43.75em) and (orientation: portrait) and (monochrome) {
|
|
288
|
-
.zztop {
|
|
289
|
-
content: 'wide, portrait, monochrome';
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
@media print and (monochrome) {
|
|
294
|
-
.elp {
|
|
295
|
-
content: 'monochrome, print';
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
@media (min-width: 30em) and (max-width: 40em) {
|
|
300
|
-
.rhcp {
|
|
301
|
-
content: 'between 30 and 40ems';
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
```
|
|
305
|
-
|
|
306
|
-
## Media Query Context
|
|
307
|
-
|
|
308
|
-
Ever wanted to get the context of a media query from within a mixin or function? Well we have, so we've made that possible! Simply call the `breakpoint-get-context($feature)` function which will either return the contextual value for that feature (`min-width`, `max-width`, etc…) or `false`. You can then do all the awesomeness that you've ever wanted to do with that information.
|
|
309
|
-
|
|
310
|
-
Caviats with Media Query context:
|
|
311
|
-
|
|
312
|
-
* If you have `$breakpoint-to-ems` set to true, you will get returns in base ems. You can run non-em based values through `breakpoint-to-base-em($value)` to convert them to base ems.
|
|
313
|
-
* If you are testing for a prefixed feature (such as `device-pixel-ratio`), you need to test for the prefixed value (`-webkit-device-pixel-ratio`, `min--moz-device-pixel-ratio`, etc…).
|
|
314
|
-
|
|
315
|
-
## No Query Fallback
|
|
316
|
-
|
|
317
|
-
Breakpoint provides a way to generate fallback CSS for if you would like the CSS to apply even if media queries aren't available. There are three methidologies we discovered cover most, if not all, of the stylistic options a user could have in a system like this: a wrapping selector within the same stylesheet, a seperate stylesheet with no wrapping selector, and a seperate stylesheet with a wrapping selector. For both of these, bare in mind that Sass cannot create separate stylesheets automatically ([yet](https://github.com/nex3/sass/issues/241)), so you're going to need to do it by hand, but the tools we've provided are very powerful, so we think you'll like it anyway.
|
|
318
|
-
|
|
319
|
-
There are now two new breakpoint flags to set that control no query support, `$breakpoint-no-queries` for specifying that only no query output should be output by Breakpoint and `$breakpoint-no-query-wrappers` for specifying that you want no query wrappers to be printed. Both of the new flags, `$breakpoint-no-queries` and `$breakpoint-no-query-wrappers` default to `false`, toggling them to `true` activates them. For the purposes of clarity in the following code samples, I'm including both flags even though the `false` flags are not explicitly needed. When passing in a wrapper, you must write the whole wrapper and may include a compound wrapper, *i.e.* `'.no-mqs'` or `'#print'` or `'.high-dpi.no-mqs'`. Variables may also be passed in, but they still require the whole wrapper.
|
|
320
|
-
|
|
321
|
-
### Wrapping Selector, Same Stylesheet
|
|
322
|
-
```scss
|
|
323
|
-
// style.scss
|
|
324
|
-
$breakpoint-no-queries: false;
|
|
325
|
-
$breakpoint-no-query-wrappers: true;
|
|
326
|
-
|
|
327
|
-
#foo {
|
|
328
|
-
background: red;
|
|
329
|
-
@include breakpoint(567px, $no-query: '.no-mqs') {
|
|
330
|
-
background: green;
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
```
|
|
334
|
-
```css
|
|
335
|
-
/* style.css */
|
|
336
|
-
#foo {
|
|
337
|
-
background: red;
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
.no-mqs #foo {
|
|
341
|
-
background: green;
|
|
342
|
-
}
|
|
343
13
|
|
|
344
|
-
|
|
345
|
-
#foo {
|
|
346
|
-
background: green;
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
```
|
|
14
|
+
## Full documentation is available on the [Breakpoint Wiki](https://github.com/Team-Sass/breakpoint/wiki)
|
|
350
15
|
|
|
351
|
-
|
|
352
|
-
```scss
|
|
353
|
-
// _layout.scss
|
|
354
|
-
#foo {
|
|
355
|
-
background: red;
|
|
356
|
-
@include breakpoint(567px, $no-query: true) {
|
|
357
|
-
background: green;
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
```
|
|
361
|
-
```scss
|
|
362
|
-
// style.scss
|
|
363
|
-
$breakpoint-no-queries: false;
|
|
364
|
-
$breakpoint-no-query-wrappers: false;
|
|
16
|
+
## Getting Help with Breakpoint
|
|
365
17
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
// no-mq.scss
|
|
370
|
-
$breakpoint-no-queries: true;
|
|
371
|
-
$breakpoint-no-query-wrappers: false;
|
|
18
|
+
* For help with Breakpoint, please ask a question on [Stack Overflow](http://stackoverflow.com/questions/ask) tagged with "breakpoint-sass".
|
|
19
|
+
* To file an issue with Breakpoint, be it a feature request or a bug report, please use our [Issue Queue](https://github.com/Team-Sass/breakpoint/issues).
|
|
20
|
+
* If you are in IRC, the maintainers and many fellow users tend to hang out in the #sass and #compass rooms on irc.freenode.net. Asking in there may get you a quick answer to your question, but we still encourage you to file your inquiry in the appropriate place above to
|
|
372
21
|
|
|
373
|
-
|
|
374
|
-
```
|
|
375
|
-
```css
|
|
376
|
-
/* style.css */
|
|
377
|
-
#foo {
|
|
378
|
-
background: red;
|
|
379
|
-
}
|
|
22
|
+
## Contributing to Breakpoint
|
|
380
23
|
|
|
381
|
-
|
|
382
|
-
#foo {
|
|
383
|
-
background: green;
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
```
|
|
387
|
-
```css
|
|
388
|
-
/* no-mq.css */
|
|
389
|
-
#foo {
|
|
390
|
-
background: red;
|
|
391
|
-
background: green;
|
|
392
|
-
}
|
|
393
|
-
```
|
|
24
|
+
We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the following guidelines:
|
|
394
25
|
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
// _layout.scss
|
|
398
|
-
#foo {
|
|
399
|
-
background: red;
|
|
400
|
-
@include breakpoint(567px, $no-query: '.no-mq') {
|
|
401
|
-
background: green;
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
```
|
|
405
|
-
```scss
|
|
406
|
-
// style.scss
|
|
407
|
-
$breakpoint-no-queries: false;
|
|
408
|
-
$breakpoint-no-query-wrappers: false;
|
|
26
|
+
* We are actively trying to stay away from Ruby functionality and am attempting to build this entirely with native Sass functionality. If you would like to add a feature that includes Ruby code, there needs to be a very very compelling case as to why.
|
|
27
|
+
* Each individual feature you would like to add, or bug you would like to squash, should be an individual pull request. Each pull request should be from an individual feature branch to either the latest stable or development branch. **The current *stable* branch is 2.x.x. The current *development* branch is 2.x.x**. Contributions that are not in the form of a pull request will not be considered. If your pull request does not apply cleanly we will ask you to fix that before we will look into pulling it in. We may ask you to update or make changes to the code you've submitted, please don't take this the wrong way. If a pull request smells (such as if a large amount of code is all within a single commit, or the coding standards aren't in line with core Singularity) we may ask you to rewrite your commit.
|
|
409
28
|
|
|
410
|
-
|
|
411
|
-
```
|
|
412
|
-
```scss
|
|
413
|
-
// no-mq.scss
|
|
414
|
-
$breakpoint-no-queries: true;
|
|
415
|
-
$breakpoint-no-query-wrappers: true;
|
|
29
|
+
## Awesome Things Built With Breakpoint
|
|
416
30
|
|
|
417
|
-
|
|
418
|
-
```
|
|
419
|
-
```css
|
|
420
|
-
/* style.css */
|
|
421
|
-
#foo {
|
|
422
|
-
background: red;
|
|
423
|
-
}
|
|
31
|
+
Breakpoint is designed to be a Media Query engine to power everything from design tweaks to media query contexts to full media query fallbacks. But we also know that our users will build awesome thing with these tools. Build a Breakpoint powered mixin for new media query semantics? We want to hear about it! Build something cool with Context? Let us know! If you would like to add your Awesome Thing to the list, please issue a Pull Request to add it!
|
|
424
32
|
|
|
425
|
-
|
|
426
|
-
#foo {
|
|
427
|
-
background: green;
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
```
|
|
431
|
-
```css
|
|
432
|
-
/* no-mq.css */
|
|
433
|
-
.no-mq #foo {
|
|
434
|
-
background: green;
|
|
435
|
-
}
|
|
436
|
-
```
|
|
33
|
+
* [Singularity](https://github.com/Team-Sass/Singularity) - Semantic Grid System
|
|
437
34
|
|
|
438
35
|
## License
|
|
439
36
|
|
data/lib/breakpoint.rb
CHANGED