Merge pull request #41 from imrefazekas/master

added hd option

Author: Jeff Escalante

readme.md

@@ -36,26 +36,29 @@ Pixel value where the `mobile` mixin kicks in, also the lower bound of the `tabl
 ##### `rupture.desktop-cutoff`
 Pixel value where the `desktop` mixin kicks in, also the upper bound of the `tablet` mixin.
 
+##### `rupture.hd-cutoff`
+Pixel value where the `hd` mixin kicks in, meaning a wider desktop-screen.
+
 ##### `rupture.scale`
 A list of values that you can reference by index in most of the mixins listed below. This works exactly like [breakpoint-slicer](https://github.com/lolmaus/breakpoint-slicer). Default looks like this:
 
 ```js
-rupture.scale = 0 400px 600px 800px 1050px
+rupture.scale = 0 400px 600px 800px 1050px 1800px
 ```
 
 ##### `rupture.scale-names`
 A list of strings you can reference that correspond to their index location in `rupture.scale`. This works exactly like [breakpoint-slicer](https://github.com/lolmaus/breakpoint-slicer#calling-slices-by-names-rather-than-numbers)
 
 ```
-rupture.scale =        0        400px       600px      800px        1050px
+rupture.scale =        0        400px       600px      800px        1050px     1800px
 
-//                     └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────
-// Slice numbers:           1           2           3           4           5
-rupture.scale-names:       'xs'        's'         'm'         'l'         'xl'
+//                     └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────
+// Slice numbers:           1           2           3           4           5           6
+rupture.scale-names:       'xs'        's'         'm'         'l'         'xl'        'hd'
 ```
 
 ```js
-rupture.scale-names = 'xs' 's' 'm' 'l' 'xl'
+rupture.scale-names = 'xs' 's' 'm' 'l' 'xl' 'hd'
 ```
 
 ##### `rupture.enable-em-breakpoints`
@@ -138,6 +141,9 @@ When the screen size is between 1050px (defined by `rupture.desktop-cutoff`) and
 ##### `+desktop()`
 When the screen size is 1050px (defined by `rupture.desktop-cutoff`) or more, the styles in the block will take effect.
 
+##### `+hd()`
+When the screen size is 1800px (defined by `rupture.hd-cutoff`) or more, the styles in the block will take effect.
+
 ##### `+density(value)`
 When the device has a pixel density of at least the given `value`, the styles in the block will take effect. The `value` should be a unitless pixel ratio number such as `1`, `1.5`, or `2`. The `value` can also be  `retina`, in which case the `rupture.retina-density` variable will be used.
 
@@ -234,6 +240,8 @@ If you don't want to enable anti-overlapping globally, you can enable or disable
     font-weight normal
   +desktop(anti-overlap: true)
     font-style italic
+  +hd(anti-overlap: true)
+    font-style oblique
 ```
 
 The `anti-overlap` offset list may contain positive or negative values. Positive values will increase the media query's `min-width` argument, while negative values will decrease the `max-width` argument.

rupture/index.styl

@@ -3,15 +3,16 @@ base-font-size ?= 16px
 rupture = {
   mobile-cutoff: 400px
   desktop-cutoff: 1050px
+  hd-cutoff: 1800px
   enable-em-breakpoints: false
   base-font-size: base-font-size
   anti-overlap: false
   density-queries: 'dppx' 'webkit' 'moz' 'dpi'
   retina-density: 1.5
   use-device-width: false
 }
-rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff)
-rupture.scale-names = 'xs' 's' 'm' 'l' 'xl'
+rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff) (rupture.hd-cutoff)
+rupture.scale-names = 'xs' 's' 'm' 'l' 'xl' 'hd'
 -is-string(val)
   if typeof(val) is not 'unit'
     if val is a 'string' or val is a 'ident'
@@ -181,6 +182,14 @@ desktop(anti-overlap = rupture.anti-overlap, density = null, orientation = null,
   +above(rupture.desktop-cutoff, anti-overlap, density, orientation, use-device-width)
     {block}
 
+hd(anti-overlap = rupture.anti-overlap, density = null, orientation = null, use-device-width = rupture.use-device-width)
+  if -is-string(orientation)
+    orientation = convert(orientation)
+  if -is-string(density)
+    density = convert(density)
+  +above(rupture.hd-cutoff, anti-overlap, density, orientation, use-device-width)
+    {block}
+
 density(density, orientation = null)
   conditions = ()
   for query in -density-queries(density)

test/fixtures/expected/hd.css

@@ -0,0 +1,8 @@
+.hello {
+  color: #f00;
+}
+@media only screen and (min-width: 1800px) {
+  .hello {
+    color: #00f;
+  }
+}

test/fixtures/expected/named.css

@@ -21,7 +21,7 @@
     color: #0f0;
   }
 }
-@media only screen and (min-width: 1050px) {
+@media only screen and (min-width: 1050px) and (max-width: 1800px) {
   .hello {
     color: #ccc;
   }

test/fixtures/hd.styl

@@ -0,0 +1,5 @@
+.hello
+  color: red
+
+  +hd()
+    color: blue

test/test.coffee

@@ -44,6 +44,9 @@ describe 'basic', ->
   it 'desktop', (done) ->
     match_expected('desktop.styl', done)
 
+  it 'hd', (done) ->
+    match_expected('hd.styl', done)
+
   it 'retina', (done) ->
     match_expected('retina.styl', done)