breakpoint 1.0.2 → 1.1

data/CHANGELOG.markdown

@@ -1,7 +1,12 @@
 # Changelog
 
+
+## 1.1 - July 29, 2012
+* Added function `breakpoint-get-context($feature)` to allow users to get the current media query context
+
 ## 1.0.2 - July 28, 2012
-* fixed bugs that caused single and triple value single queries to fail. Also bugs with stacking single and triple value tests.
+* Refixed our 'device-pixel-ratio' conversions because, frankly, the w3c was wrong.
+* fixed bugs that caused single and triple value single queries to fail. Also bugs with stacking single and triple value queries.
 
 ## 1.0.1 - June 27, 2012
 * fixed logic error that would print multiple instences of a media type

data/README.markdown

@@ -9,7 +9,8 @@ Breakpoint makes the following assumptions:
 * 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.
 * 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.
 * 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.
-* Unprefixed `device-pixel-ratio` queries are transformed into the standard `resolution` breakpoint based on the [W3C recommendation for how to do so](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/). This can be overwritten by passing in prefixed the needed prefixed feature.
+
+Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.
 
 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); a string based naming API for Breakpoint.
 
@@ -279,6 +280,15 @@ With `$breakpoint-to-ems: true;`
 }
 ```
 
+## Media Query Context
+
+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.
+
+Caviats with Media Query context:
+
+* 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.
+* 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…).
+
 
 ## License
 

data/lib/breakpoint.rb

@@ -3,8 +3,8 @@ require 'compass'
 Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
 
 module Breakpoint
-  VERSION = "1.0.2"
-  DATE = "2012-07-28"
+  VERSION = "1.1"
+  DATE = "2012-07-29"
 end
 
 module Sass::Script::Functions

data/stylesheets/_breakpoint.scss

@@ -8,6 +8,12 @@ $breakpoint-to-ems:           false           !default;
 $breakpoint-prefixes:         'webkit' 'moz'  !default;
 $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max-device-pixel-ratio'                      !default;
 
+//////////////////////////////
+// Import Breakpoint Helpers
+//////////////////////////////
+@import 'breakpoint/helpers';
+@import 'breakpoint/context';
+
 //////////////////////////////
 // Breakpoint Mixin
 //////////////////////////////
@@ -27,9 +33,12 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
   $ms:            false !default;
   $ms-first:      true !default;
 
-  // Holder for Count;
+  // Holder for Count
   $first:         true  !default;
 
+  // Reset Context
+  @include TXkgcmVzZXQhIEdvIGF3YXkh;
+
   // Initialize Query String
   @if $media != 'all' {
     $media-string: "#{$media} ";
@@ -161,6 +170,8 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
       }
     }
   }
+
+  @include TXkgcmVzZXQhIEdvIGF3YXkh;
 }
 
 @function breakpoint-switch($breakpoint, $media-string, $first: false, $prefix: false) {
@@ -188,6 +199,8 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
     }
     // Build the Query
     $query: breakpoint-generate($media-string, $feature, $value, $first);
+    // Set Context
+    $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
   }
   @else if $length == 2 {
     // If both are numbers, we've got a double!
@@ -213,6 +226,9 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
       // Min/Max for given
       $query: breakpoint-generate($media-string, $min-feature, $min-value, $first);
       $query: join($query, breakpoint-generate($media-string, $max-feature, $max-value));
+      // Set Context
+      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($min-feature, $min-value);
+      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($max-feature, $max-value);
     }
     @else if type-of(nth($breakpoint, 1)) == 'string' and type-of(nth($breakpoint, 2)) == 'string' {
       @if breakpoint-string-value(nth($breakpoint, 1)) == true {
@@ -231,6 +247,8 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
 
       // Build the Query
       $query: breakpoint-generate($media-string, $feature, $value, $first);
+      // Set Context
+      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
     }
     @else {
       // Because we can have either the first or second option be the feature, we switch on it.
@@ -264,6 +282,8 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
 
       // Build the Query
       $query: breakpoint-generate($media-string, $feature, $value, $first);
+      // Set Context
+      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
     }
   }
   @else if $length == 3 {
@@ -313,6 +333,9 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
       // Min/Max for given
       $query: breakpoint-generate($media-string, $min-feature, $min-value, $first);
       $query: join($query, breakpoint-generate($media-string, $max-feature, $max-value));
+      // Set Context
+      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($min-feature, $min-value);
+      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($max-feature, $max-value);
     }
     @else {
       @warn '#{$feature} cannot have a min/max value!';
@@ -354,72 +377,3 @@ $breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max
 
   @return $new-string;
 }
-
-@function breakpoint-to-base-em($value) {
-  $unit: unit($value);
-
-  @if $unit == 'px' {
-    @return $value / 16px * 1em;
-  }
-  @else if $unit == '%' {
-    @return $value / 100% * 1em;
-  }
-  @else if $unit == 'em' {
-    @return $value;
-  }
-  @else if $unit == 'pt' {
-    @return $value / 12pt * 1em;
-  }
-  @else {
-    @return $value;
-//    @warn 'Everything is terrible! What have you done?!';
-  }
-}
-
-@function breakpoint-min-max($feature) {
-  @if $feature == 'color' or $feature == 'color-index' or $feature == 'aspect-ratio' or $feature == 'device-height' or $feature == 'device-width' or $feature == 'height' or $feature == 'monochrome' or $feature == 'resolution' or $feature == 'width' or $feature == 'device-pixel-ratio' {
-    @return true;
-  }
-  @else {
-    @return false;
-  }
-}
-
-@function breakpoint-string-value($feature) {
-  @if $feature == 'orientation' or $feature == 'scan' or $feature == 'color' {
-    @return true;
-  }
-  @else {
-    @return false;
-  }
-}
-
-@function breakpoint-experimental($property, $prefix) {
-  @if $property == 'min-device-pixel-ratio' {
-    @if $prefix == 'webkit' {
-      @return '-#{$prefix}-#{$property}';
-    }
-    @else if $prefix == 'moz' {
-      @return 'min--#{$prefix}-device-pixel-ratio';
-    }
-    @else {
-      @warn '#{$property} is not fully supported in -#{prefix}';
-      @return 'ERROR';
-    }
-  }
-  @else if $property == 'max-device-pixel-ratio' {
-    @if $prefix == 'webkit' {
-      @return '-#{$prefix}-#{$property}';
-    }
-    @else if $prefix == 'moz' {
-      @return 'max--#{$prefix}-device-pixel-ratio';
-    }
-    @else {
-      @warn '#{$property} is not fully supported in -#{prefix}';
-      @return 'ERROR';
-    }
-  }
-  @else {
-    @return '-#{$prefix}-#{$property}';
-  }
-}

data/stylesheets/breakpoint/_context.scss

@@ -0,0 +1,41 @@
+//////////////////////////////
+// Private Breakpoint Variables
+//////////////////////////////
+$TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;
+
+//////////////////////////////
+// Breakpoint Get Context
+// $feature: Input feature to get it's current MQ context. Returns false if no context
+//////////////////////////////
+@function breakpoint-get-context($feature) {
+  @each $context in $TXkgdmFyaWFibGUhIEdvIGF3YXkh {
+    @if $feature == nth($context, 1) {
+      @return nth($context, 2);
+    }
+  }
+
+  @return false;
+}
+
+//////////////////////////////
+// Private function to set context
+//////////////////////////////
+@function U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value) {
+  @if $value == 'monochrome' {
+    $feature: 'monochrome';
+  }
+
+  $append: $feature;
+  $append: join($append, $value, space);
+
+  $TXkgdmFyaWFibGUhIEdvIGF3YXkh: append($TXkgdmFyaWFibGUhIEdvIGF3YXkh, $append, comma);
+
+  @return true;
+}
+
+//////////////////////////////
+// Private function to reset context
+//////////////////////////////
+@mixin TXkgcmVzZXQhIEdvIGF3YXkh {
+  $TXkgdmFyaWFibGUhIEdvIGF3YXkh: ();
+}

data/stylesheets/breakpoint/_helpers.scss

@@ -0,0 +1,80 @@
+//////////////////////////////
+// Converts the input value to Base EMs
+//////////////////////////////
+@function breakpoint-to-base-em($value) {
+  $unit: unit($value);
+  
+  @if $unit == 'px' {
+    @return $value / 16px * 1em;
+  }
+  @else if $unit == '%' {
+    @return $value / 100% * 1em;
+  }
+  @else if $unit == 'em' {
+    @return $value;
+  }
+  @else if $unit == 'pt' {
+    @return $value / 12pt * 1em;
+  }
+  @else {
+    @return $value;
+//    @warn 'Everything is terrible! What have you done?!';
+  }
+}
+
+//////////////////////////////
+// Returns whether the feature can have a min/max pair
+//////////////////////////////
+@function breakpoint-min-max($feature) {
+  @if $feature == 'color' or $feature == 'color-index' or $feature == 'aspect-ratio' or $feature == 'device-height' or $feature == 'device-width' or $feature == 'height' or $feature == 'monochrome' or $feature == 'resolution' or $feature == 'width' or $feature == 'device-pixel-ratio' {
+    @return true;
+  }
+  @else {
+    @return false;
+  }
+}
+
+//////////////////////////////
+// Returns whether the feature can have a string value
+//////////////////////////////
+@function breakpoint-string-value($feature) {
+  @if $feature == 'orientation' or $feature == 'scan' or $feature == 'color' {
+    @return true;
+  }
+  @else {
+    @return false;
+  }
+}
+
+//////////////////////////////
+// Experimental Media Queries
+//////////////////////////////
+@function breakpoint-experimental($property, $prefix) {
+  @if $property == 'min-device-pixel-ratio' {
+    @if $prefix == 'webkit' {
+      @return '-#{$prefix}-#{$property}';
+    }
+    @else if $prefix == 'moz' {
+      @return 'min--#{$prefix}-device-pixel-ratio';
+    }
+    @else {
+      @warn '#{$property} is not fully supported in -#{prefix}';
+      @return 'ERROR';
+    }
+  }
+  @else if $property == 'max-device-pixel-ratio' {
+    @if $prefix == 'webkit' {
+      @return '-#{$prefix}-#{$property}';
+    }
+    @else if $prefix == 'moz' {
+      @return 'max--#{$prefix}-device-pixel-ratio';
+    }
+    @else {
+      @warn '#{$property} is not fully supported in -#{prefix}';
+      @return 'ERROR';
+    }
+  }
+  @else {
+    @return '-#{$prefix}-#{$property}';
+  }
+}

metadata

@@ -4,9 +4,8 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 1
-  - 0
-  - 2
-  version: 1.0.2
+  - 1
+  version: "1.1"
 platform: ruby
 authors: 
 - Mason Wendell
@@ -15,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-07-28 00:00:00 -04:00
+date: 2012-07-29 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -47,6 +46,8 @@ files:
 - CHANGELOG.markdown
 - lib/breakpoint.rb
 - stylesheets/_breakpoint.scss
+- stylesheets/breakpoint/_context.scss
+- stylesheets/breakpoint/_helpers.scss
 has_rdoc: true
 homepage: https://github.com/canarymason/breakpoint
 licenses: []