Merge pull request #18 from jenius/scoped-globals

Scope global variables under 'rupture'

Author: Jeff Escalante

readme.md

@@ -28,19 +28,19 @@ Before getting started, I would recommend [reading this](https://github.com/lolm
 
 ### Variables
 
-A few variables are exposed that can be customized, each of them are listed below:
+A few variables are exposed that can be customized, each of them are listed below. All of these variables are scoped under `rupture` so that there are no conflicts with css keywords or other libraries.
 
-##### `mobile-cutoff`
+##### `rupture.mobile-cutoff`
 Pixel value where the `mobile` mixin kicks in, also the lower bound of the `tablet` mixin.
 
-##### `desktop-cutoff`
+##### `rupture.desktop-cutoff`
 Pixel value where the `desktop` mixin kicks in, also the upper bound of the `tablet` mixin.
 
-##### `scale`
+##### `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
-scale = 0 400px 600px 800px 1050px
+rupture.scale = 0 400px 600px 800px 1050px
 ```
 
 ### Mixins
@@ -63,16 +63,16 @@ Alias of `below`. Styles take effect from zero up to the provided [measure](#wha
 When the screen size is _between_ the two provided [measure](#what-is-a-measure), the styles in the block will take effect.
 
 ##### `+at(measure)`
-Intended for use with scale measures, when the screen size is between the provided scale [measure](#what-is-a-measure) and the one below it, the styles in the block will take effect. For example, if your scale was something like `scale = 0 400px 600px`, and you used the mixin like `+at(2)`, it would kick in between 400 and 600px (remember, scale is zero indexed, so 2 is the third value, and one less is the second). If you use this with a value, it will not have much effect, as it will be at one specific pixel value rather than a range like you want.
+Intended for use with scale measures, when the screen size is between the provided scale [measure](#what-is-a-measure) and the one below it, the styles in the block will take effect. For example, if your scale was something like `rupture.scale = 0 400px 600px`, and you used the mixin like `+at(2)`, it would kick in between 400 and 600px (remember, scale is zero indexed, so 2 is the third value, and one less is the second). If you use this with a value, it will not have much effect, as it will be at one specific pixel value rather than a range like you want.
 
 ##### `+mobile()`
-When the screen size is 400px (defined by `mobile-cutoff`) or less, the styles in the block will take effect.
+When the screen size is 400px (defined by `rupture.mobile-cutoff`) or less, the styles in the block will take effect.
 
 ##### `+tablet()`
-When the screen size is between 1050px (defined by `desktop-cutoff`) and 400px (defined by `mobile-cutoff`), the styles in the block will take effect.
+When the screen size is between 1050px (defined by `rupture.desktop-cutoff`) and 400px (defined by `mobile-cutoff`), the styles in the block will take effect.
 
 ##### `+desktop()`
-When the screen size is 1050px (defined by `desktop-cutoff`) or more, the styles in the block will take effect.
+When the screen size is 1050px (defined by `rupture.desktop-cutoff`) or more, the styles in the block will take effect.
 
 ##### `+retina()`
 When the device has a pixel density of over 1.5 (retina), the styles in the block will take effect.
@@ -83,15 +83,15 @@ It is a popular opinion that using `em` units for media queries is a good practi
 
 Rupture allows you to automatically convert all your breakpoint units from `px` to `em`.
 
-All you need to do to enable this behavior is to define an optional `base-font-size` (unless already defined) and set `enable-em-breakpoints` to `true`.
+All you need to do to enable this behavior is to define an optional `rupture.base-font-size` (unless already defined) and set `rupture.enable-em-breakpoints` to `true`.
 
-`base-font-size` defaults to `16px`.
+`rupture.base-font-size` defaults to `16px`.
 
 Example:
 
 ```
 // base-font-size = 18px (commented out because it's optional and we want 16px)
-enable-em-breakpoints = true
+rupture.enable-em-breakpoints = true
 
 .some-ui-element
   width: 50%

rupture/index.styl

@@ -1,17 +1,22 @@
-mobile-cutoff         ?= 400px
-desktop-cutoff        ?= 1050px
-enable-em-breakpoints ?= false
-base-font-size        ?= 16px
-scale                 ?= 0 mobile-cutoff 600px 800px desktop-cutoff
+base-font-size ?= 16px
 
--convert-to-ems(target, context = base-font-size)
+rupture = {
+  mobile-cutoff: 400px
+  desktop-cutoff: 1050px
+  enable-em-breakpoints: false
+  base-font-size: base-font-size
+}
+
+rupture.scale = 0 400px 600px 800px 1050px
+
+-convert-to-ems(target, context = rupture.base-font-size)
   return unit((target / context), 'em')
 
 -on-scale(n)
   return unit(n) is ''
 
 -larger-than-scale(n)
-  return (n > (length(scale) - 1)) and -on-scale(n)
+  return (n > (length(rupture.scale) - 1)) and -on-scale(n)
 
 -is-zero(n)
   return n is 0
@@ -27,24 +32,24 @@ scale                 ?= 0 mobile-cutoff 600px 800px desktop-cutoff
 
 between(min, max)
   if (-on-scale(min)) and (-on-scale(max))
-    -min = -is-zero(min) ? 0 : scale[min - 1]
-    -max = scale[max]
+    -min = -is-zero(min) ? 0 : rupture.scale[min - 1]
+    -max = rupture.scale[max]
   else if (-on-scale(min)) and (not -on-scale(max))
-    -min = -is-zero(min) ? 0 : scale[min - 1]
+    -min = -is-zero(min) ? 0 : rupture.scale[min - 1]
     -max = max
   else if (not -on-scale(min)) and (-on-scale(max))
     -min = min
-    -max = scale[max]
+    -max = rupture.scale[max]
   else
     -min = min
     -max = max
   if -min is not 0
-    -min = -convert-to-ems(-min) if enable-em-breakpoints
+    -min = -convert-to-ems(-min) if rupture.enable-em-breakpoints
     condition = 'only screen and (min-width: %s)' % (-min)
   else
     condition = 'only screen'
   unless -larger-than-scale(max)
-    -max = -convert-to-ems(-max) if enable-em-breakpoints
+    -max = -convert-to-ems(-max) if rupture.enable-em-breakpoints
     condition = condition + ' and (max-width: %s)' % (-max)
   @media condition
     {block}
@@ -54,7 +59,7 @@ at(scale-point)
     {block}
 
 from(scale-point)
-  +between(scale-point, length(scale))
+  +between(scale-point, length(rupture.scale))
     {block}
 
 above = from
@@ -66,15 +71,15 @@ to(scale-point)
 below = to
 
 mobile()
-  +below(mobile-cutoff)
+  +below(rupture.mobile-cutoff)
     {block}
 
 tablet()
-  +between(mobile-cutoff, desktop-cutoff)
+  +between(rupture.mobile-cutoff, rupture.desktop-cutoff)
     {block}
 
 desktop()
-  +above(desktop-cutoff)
+  +above(rupture.desktop-cutoff)
     {block}
 
 retina()

test/fixtures/between.styl

@@ -13,5 +13,5 @@
   +between(0, 500px)
     color: #eee
 
-  +between(200px, length(scale))
+  +between(200px, length(rupture.scale))
     color: #ccc

test/fixtures/ems.styl

@@ -1,4 +1,4 @@
-enable-em-breakpoints = true
+rupture.enable-em-breakpoints = true
 
 .thing
   color: red