Density kwarg

readme.md

@@ -59,6 +59,28 @@ html
 
 Controls Rupture's [anti-overlapping](#scale-overlap) feature. Defaults to `false`.
 
+##### `rupture.density-queries`
+List of values that controls what conditions to include when creating media queries for high resolution displays. Valid values include 'webkit', 'moz', 'o', 'ratio', 'dpi', and 'dppx' The default list is:
+
+```js
+rupture.density-queries = 'dppx' 'webkit' 'moz' 'dpi'
+```
+
+In general, [you can set this to `'webkit' 'dpi'`](http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/) to support all modern browsers while limiting the size of the generated media queries.
+
+To create a media query that only targets devices with a high pixel density, either use the `density()` or `retina()` mixins or pass a `density` keyword argument to any of the other mixins. Values passed to the `density` mixin or keyword argument should be a unitless pixel-ratio (1 for 96dpi, 2 for 192dpi, etc). For example, to target phones with a pixel density of at least 1.25, you can do:
+
+```js
++mobile(density: 1.25)
+```
+
+##### `rupture.retina-density`
+Value which controls the minimum density of a device considered to have a retina display. Defaults to 1.5. This value will be used when you call the `retina()` mixin or pass `density: 'retina'` as a keyword argument to any of the width mixins. For example, to target retina tablets, you can do:
+
+```js
++tablet(density: 'retina') // equivalent to +tablet(density: 1.5) unless you change rupture.retina-density
+```
+
 ### Mixins
 
 So there are two "categories" of mixins that are a part of rupture. The first is a very basic set designed to simply shorten and sweeten standard media queries, and the second is a very close port of the fantastic [breakpoint-slicer](https://github.com/lolmaus/breakpoint-slicer) library, which can be used almost as a grid. We'll go through these in order.
@@ -90,8 +112,11 @@ 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.
 
+##### `+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 the string `'retina'`, in which case the `rupture.retina-density` variable will be used.
+
 ##### `+retina()`
-When the device has a pixel density of over 1.5 (retina), the styles in the block will take effect.
+When the device has a pixel density of over `rupture.retina-density` (defaults to 1.5), the styles in the block will take effect.
 
 ### PX to EM unit conversion
 

rupture/index.styl

@@ -6,6 +6,8 @@ rupture = {
   enable-em-breakpoints: false
   base-font-size: base-font-size
   anti-overlap: false
+  density-queries: 'dppx' 'webkit' 'moz' 'dpi'
+  retina-density: 1.5
 }
 
 rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff)
@@ -45,6 +47,25 @@ rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff)
 
 -is-positive(n)
   return n >= 0
+
+-density-queries(density)
+  density = rupture.retina-density if density is 'retina'
+  queries = ()
+  for query in rupture.density-queries
+    if query is 'webkit'
+      push(queries, '(-webkit-min-device-pixel-ratio: %s)' % (density))
+    else if query is 'moz'
+      push(queries, '(min--moz-device-pixel-ratio: %s)' % (density))
+    else if query is 'o'
+      push(queries, '(-o-min-device-pixel-ratio: %s/1)' % (density))
+    else if query is 'ratio'
+      push(queries, '(min-device-pixel-ratio: %s)' % (density))
+    else if query is 'dpi'
+      push(queries, '(min-resolution: %sdpi)' % (round(density * 96, 1)))
+    else if query is 'dppx'
+      push(queries, '(min-resolution: %sdppx)' % (density))
+  return queries
+
 // +between(min, max)
 // usage (scale can be mixed with custom values):
 //   - +between(1, 3) scale:scale
@@ -54,7 +75,7 @@ rupture.scale = 0 (rupture.mobile-cutoff) 600px 800px (rupture.desktop-cutoff)
 //   - +between(1, 300px) scale:custom
 //   - +between(200px, 4) custom:scale
 
-between(min, max, anti-overlap = rupture.anti-overlap)
+between(min, max, anti-overlap = rupture.anti-overlap, density = null)
   -min = rupture.scale[min - 1] unless -is-zero(min) or (not -on-scale(min))
   -max = rupture.scale[max] unless not -on-scale(max)
   -min ?= min
@@ -69,37 +90,50 @@ between(min, max, anti-overlap = rupture.anti-overlap)
     -max = -convert-to('em', -max) if rupture.enable-em-breakpoints
     -max = -adjust-overlap(anti-overlap, -max, side: 'max')
     condition = condition + ' and (max-width: %s)' % (-max)
+  if density
+    conditions = ()
+    for query in -density-queries(density)
+      push(conditions, condition + ' and %s' % (query))
+    condition = join(', ', conditions)
   @media condition
     {block}
 
-at(scale-point, anti-overlap = rupture.anti-overlap)
-  +between(scale-point, scale-point, anti-overlap)
+at(scale-point, anti-overlap = rupture.anti-overlap, density = null)
+  +between(scale-point, scale-point, anti-overlap, density)
     {block}
 
-from(scale-point, anti-overlap = rupture.anti-overlap)
-  +between(scale-point, length(rupture.scale), anti-overlap)
+from(scale-point, anti-overlap = rupture.anti-overlap, density = null)
+  +between(scale-point, length(rupture.scale), anti-overlap, density)
     {block}
 
 above = from
 
-to(scale-point, anti-overlap = rupture.anti-overlap)
-  +between(1, scale-point, anti-overlap)
+to(scale-point, anti-overlap = rupture.anti-overlap, density = null)
+  +between(1, scale-point, anti-overlap, density)
     {block}
 
 below = to
 
-mobile(anti-overlap = rupture.anti-overlap)
-  +below(rupture.mobile-cutoff, anti-overlap)
+mobile(anti-overlap = rupture.anti-overlap, density = null)
+  +below(rupture.mobile-cutoff, anti-overlap, density)
     {block}
 
-tablet(anti-overlap = rupture.anti-overlap)
-  +between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap)
+tablet(anti-overlap = rupture.anti-overlap, density = null)
+  +between(rupture.mobile-cutoff, rupture.desktop-cutoff, anti-overlap, density)
     {block}
 
-desktop(anti-overlap = rupture.anti-overlap)
-  +above(rupture.desktop-cutoff, anti-overlap)
+desktop(anti-overlap = rupture.anti-overlap, density = null)
+  +above(rupture.desktop-cutoff, anti-overlap, density)
     {block}
 
-retina()
-  @media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
+density(density)
+  conditions = ()
+  for query in -density-queries(density)
+    push(conditions, 'only screen and %s' % (query))
+  condition = join(', ', conditions)
+  @media condition
     {block}
+
+retina()
+  +density('retina')
+    {block}

test/fixtures/expected/ems.css

@@ -46,7 +46,7 @@
     display: block;
   }
 }
-@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+@media only screen and (min-resolution: 1.5dppx), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
   .thing {
     display: block;
   }

test/fixtures/expected/retina.css

@@ -1,8 +1,58 @@
 .hello {
   color: #f00;
 }
-@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
   .hello {
     color: #00f;
   }
 }
+@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi) {
+  .hello {
+    color: #800000;
+  }
+}
+@media only screen and (min-width: 500px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 500px) and (min-resolution: 192dpi) {
+  .hello {
+    color: #0f0;
+  }
+}
+@media only screen and (min-width: 400px) and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 400px) and (max-width: 600px) and (min-resolution: 192dpi) {
+  .hello {
+    color: #0ff;
+  }
+}
+@media only screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 500px) and (min-resolution: 192dpi) {
+  .hello {
+    color: #f0f;
+  }
+}
+@media only screen and (min-width: 400px) and (max-width: 1050px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 400px) and (max-width: 1050px) and (min-resolution: 192dpi) {
+  .hello {
+    color: #ff0;
+  }
+}
+@media only screen and (min-width: 1050px) and (-webkit-min-device-pixel-ratio: 1), only screen and (min-width: 1050px) and (min-resolution: 96dpi) {
+  .hello {
+    color: #000;
+  }
+}
+@media only screen and (min-width: 400px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-width: 400px) and (min-resolution: 120dpi) {
+  .hello {
+    color: #fff;
+  }
+}
+@media only screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (max-width: 400px) and (min-resolution: 124.8dpi) {
+  .hello {
+    color: #008000;
+  }
+}
+@media only screen and (min-width: 400px) and (max-width: 1050px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 400px) and (max-width: 1050px) and (min-resolution: 144dpi) {
+  .hello {
+    color: #808080;
+  }
+}
+@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 192dpi) {
+  .hello {
+    color: #000080;
+  }
+}

test/fixtures/retina.styl

@@ -1,5 +1,38 @@
+rupture.density-queries = ('webkit' 'dpi')
+rupture.retina-density = 2
+
 .hello
   color: red
 
   +retina()
     color: blue
+
+  +density(3)
+    color: maroon
+
+  +above(500px, density: 'retina')
+    color: lime
+
+  +at(2, density: 'retina')
+    color: cyan
+
+  +below(500px, density: 'retina')
+    color: magenta
+
+  +between(2, 4, density: 'retina')
+    color: yellow
+
+  +desktop(density: 1)
+    color: black
+
+  +from(2, density: 1.25)
+    color: white
+
+  +mobile(density: 1.3)
+    color: green
+
+  +tablet(density: 1.5)
+    color: gray
+
+  +to(2, density: 2)
+    color: navy