├── README.md
├── c
    ├── mq.css
    └── no-mq.css
├── config.rb
├── index.html
└── s
    ├── _base.scss
    ├── _common.scss
    ├── _mixins.scss
    ├── _primary.scss
    ├── _sb-media.scss
    ├── mq.scss
    └── no-mq.scss


/README.md:
--------------------------------------------------------------------------------
 1 | # SB-Media
 2 | A dead-simple way to do module-based media queries and styles.
 3 | 
 4 | ## How it works
 5 | The two files `no-mq.scss` and `mq.scss` generate two separate stylesheets, one for browsers that do not support Media Queries and one for browsers that do. These files are then included in the `index.html` file using conditional comments to specify which file gets served to which browsers.
 6 | 
 7 | **index.html**
 8 | ```html
 9 | <!--[if (lt IE 9) & (!IEMobile)]>
10 |   <link href="c/no-mq.css" rel="stylesheet">
11 | <![endif]-->
12 | 
13 | <!--[if (gte IE 9) | (IEMobile)]><!-->
14 |   <link href="c/mq.css" rel="stylesheet">
15 | <!--<![endif]-->
16 | ```
17 | 
18 | ## The mixin
19 | **_sb-media.scss**
20 | ```scss
21 | $no-mq-support: false !default;
22 | $serve-to-nomq-max-width:60em;
23 | 
24 | @mixin sb-media($query) {
25 |   @if $no-mq-support{
26 |     @if $query < $serve-to-nomq-max-width{
27 |       @content;
28 |     }
29 |   } @else {
30 |     @media ( 'min-width:' + $query ) {
31 |       @content;
32 |     }
33 |   }
34 | }
35 | ```
36 | The mixin is pretty straightforward. It defaults to `min-width` media queries and does not support no-mq browsers. To support no-mq browsers, simply add `$no-mq-support: true;` in your `no-mq.scss` file and import the rest of your project like normal.
37 | 
38 | The $no-mq-threshold hides media queries over a certain value from no-mq browsers. In the mixin above it's set to 60em, or 960px. Any media queries over 60ems will get dropped from no-mq.css
39 | 
40 | ## Example
41 | Here is a default min-width media query. Notice no need to pass min or max-width on the query. Just pass the width value.
42 | 
43 | **_primary.scss**
44 | ```scss
45 | body{
46 |   background-color:red;
47 | 
48 |   @include sb-media(40em){
49 |     background-color: blue;
50 |   }
51 | }
52 | ```
53 | 
54 | The generated min-width css is below.
55 | 
56 | **no-mq.css**
57 | ```css
58 | body {
59 |   background-color: red;
60 |   background-color: blue;
61 | }
62 | ```
63 | **mq.css**
64 | ```css
65 | body {
66 |   background-color: red;
67 | }
68 | @media (min-width: 40em) {
69 |   body {
70 |     background-color: blue;
71 |   }
72 | }
73 | ```
74 | 


--------------------------------------------------------------------------------
/c/mq.css:
--------------------------------------------------------------------------------
 1 | @-webkit-viewport {
 2 |   width: device-width;
 3 | }
 4 | 
 5 | @-moz-viewport {
 6 |   width: device-width;
 7 | }
 8 | 
 9 | @-ms-viewport {
10 |   width: device-width;
11 | }
12 | 
13 | @-o-viewport {
14 |   width: device-width;
15 | }
16 | 
17 | @viewport {
18 |   width: device-width;
19 | }
20 | 
21 | body {
22 |   background-color: red;
23 | }
24 | @media (min-width: 61em) {
25 |   body {
26 |     background-color: blue;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/c/no-mq.css:
--------------------------------------------------------------------------------
 1 | @-webkit-viewport {
 2 |   width: device-width;
 3 | }
 4 | 
 5 | @-moz-viewport {
 6 |   width: device-width;
 7 | }
 8 | 
 9 | @-ms-viewport {
10 |   width: device-width;
11 | }
12 | 
13 | @-o-viewport {
14 |   width: device-width;
15 | }
16 | 
17 | @viewport {
18 |   width: device-width;
19 | }
20 | 
21 | body {
22 |   background-color: red;
23 | }
24 | 


--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
 1 | # Require any additional compass plugins here.
 2 | 
 3 | # Set this to the root of your project when deployed:
 4 | http_path = "/"
 5 | css_dir = "c"
 6 | sass_dir = "s"
 7 | 
 8 | # You can select your preferred output style here (can be overridden via the command line):
 9 | # output_style = :expanded or :nested or :compact or :compressed
10 | output_style = :expanded
11 | 
12 | # To enable relative paths to assets via compass helper functions. Uncomment:
13 | # relative_assets = true
14 | relative_assets = true
15 | 
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | # line_comments = false
18 | line_comments = false
19 | 
20 | # If you prefer the indented syntax, you might want to regenerate this
21 | # project again passing --syntax sass, or you can uncomment this:
22 | # preferred_syntax = :sass
23 | # and then run:
24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |   <title>SB Media Mixin</title>
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 | 
10 |   <!--[if (lt IE 9) & (!IEMobile)]>
11 |     <link href="c/no-mq.css" rel="stylesheet">
12 |   <![endif]-->
13 | 
14 |   <!--[if (gte IE 9) | (IEMobile)]><!-->
15 |     <link href="c/mq.css" rel="stylesheet">
16 |   <!--<![endif]-->
17 | </head>
18 | 
19 | <body>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/s/_base.scss:
--------------------------------------------------------------------------------
1 | @import "compass";
2 | @import "sb-media";
3 | @import "mixins";
4 | @import "common";
5 | @import "primary";


--------------------------------------------------------------------------------
/s/_common.scss:
--------------------------------------------------------------------------------
1 | @-webkit-viewport { width:device-width; }
2 |    @-moz-viewport { width:device-width; }
3 |     @-ms-viewport { width:device-width; }
4 |      @-o-viewport { width:device-width; }
5 |         @viewport { width:device-width; }


--------------------------------------------------------------------------------
/s/_mixins.scss:
--------------------------------------------------------------------------------
 1 | $base-font-multiplier: 1 !default;
 2 | 
 3 | @mixin rem( $property, $a:0, $b:$a, $c:$a, $d:$b ) {
 4 |   @if ( $property == "font-size" ) {
 5 |     // $a is the font size
 6 |     // %b is the keyword
 7 |     @if ( $a != $b ) {
 8 |       font-size: $b;
 9 |     }
10 |     @else {
11 |       font-size: $a * $base-font-multiplier * 16px;
12 |     }
13 |     font-size: $a * 1rem;
14 |   } @else {
15 |     $apx: $a * $base-font-multiplier * 16px;
16 |     $bpx: $b * $base-font-multiplier * 16px;
17 |     $cpx: $c * $base-font-multiplier * 16px;
18 |     $dpx: $d * $base-font-multiplier * 16px;
19 |     $arem: $a * 1rem;
20 |     $brem: $b * 1rem;
21 |     $crem: $c * 1rem;
22 |     $drem: $d * 1rem;
23 | 
24 |     @if ( $property == "padding" or $property == "margin" ){
25 |       #{$property}: $apx $bpx $cpx $dpx;
26 |       #{$property}: $arem $brem $crem $drem;
27 |     } @else {
28 |       #{$property}: $apx;
29 |       #{$property}: $arem;
30 |     }
31 |   }
32 | }


--------------------------------------------------------------------------------
/s/_primary.scss:
--------------------------------------------------------------------------------
1 | body{
2 |   background-color:red;
3 | 
4 |   @include sb-media(61em){
5 |     background-color: blue;
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/s/_sb-media.scss:
--------------------------------------------------------------------------------
 1 | $no-mq-support: false !default;
 2 | $no-mq-threshold:60em;
 3 | 
 4 | @mixin sb-media($query) {
 5 |   @if $no-mq-support{
 6 |     @if $query < $no-mq-threshold{
 7 |       @content;
 8 |     }
 9 |   } @else {
10 |     @media ( 'min-width:' + $query ) {
11 |       @content;
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/s/mq.scss:
--------------------------------------------------------------------------------
1 | @import "base";
2 | 


--------------------------------------------------------------------------------
/s/no-mq.scss:
--------------------------------------------------------------------------------
1 | $no-mq-support: true;
2 | @import "base";
3 | 


--------------------------------------------------------------------------------