breakpoint 0.3 → 1.0

data/CHANGELOG.markdown

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0 - June 22, 2012
+* Refactor of the underlying logic to make everything work better and make the world a happy place.
+* Added default options for Default Feature, Default Media, and Default Feature Pair.
+* Changed default media from "Screen" to "All".
+* Added ability to have all px/pt/percentage media queries transformed into em based media queries.
+
 ## 0.3 - June 18, 2012
 * Rewrote 'device-pixel-ratio' conversions to change from prefixed nightmarish hell to Resolution standard based on the [W3C Unprefixing -webkit-device-pixel-ratio article](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/)
 * Large README update covering feature set, installation, assumptions, and more.

data/README.markdown

@@ -6,11 +6,13 @@ Breakpoint aims to make writing media queries in Sass super simple. Create a var
 
 Breakpoint makes the following assumptions:
 
-* All queries are assumed to be screen queries. 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.
-* 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.
+* 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.
 
+If you'd prefer to use string names to identify your queries as opposed to variables, check out [Respond-To](https://github.com/snugug/respond-to); a string based naming API for Breakpoint.
+
 ## Requirements
 
 Breakpoint is a Compass extension, so make sure you have [Sass and Compass Installed](http://compass-style.org/install/) in order to use its awesomeness!
@@ -28,9 +30,20 @@ Breakpoint is a Compass extension, so make sure you have [Sass and Compass Insta
 #### Import the breakpoint partial at the top of your working file
 `@import "breakpoint";`
 
-
 ## Setup
 
+### Breakpoint Options
+
+Breakpoint provides a few default options that you can change.
+
+* `$breakpoint-default-media` - Defaults to 'all'. If you do not pass a media type into the breakpoint mixin, this is the media type that will be used.
+* `$breakpoint-default-feature` - Defaults to 'min-width'. If you write a breakpoint with only a number, this is the feature that is used.
+* `$breakpoint-default-pair` - Defaults to 'width'. If you write a breakpoint with two numbers but do not specify the feature, this is the feature that is used.
+* `$breakpoint-to-ems` - Defaults to 'false'. If set to true, all pt/px/percent numbers will be converted to em units for better, more accessable media queries.
+
+### Usage
+
+
 ```scss
 // create $breakpoint variables like so
 // assume $breakpoint-default-feature if only a number

data/lib/breakpoint.rb

@@ -4,7 +4,7 @@ Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/.
 
 module Breakpoint
 
-  VERSION = "0.3"
-  DATE = "2012-06-21"
+  VERSION = "1.0"
+  DATE = "2012-06-22"
 
 end

data/stylesheets/_breakpoint.scss

@@ -1,80 +1,122 @@
-// experimental - depends on Sass 3.2 or higher
-// define your own breakpoints
-// styles nested in the mixin will pass thru in @content
-// resist the urge to settle on common device sizes
-// http://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead
+//////////////////////////////
+// Default Variables
+//////////////////////////////
+$breakpoint-default-feature:  'min-width' !default;
+$breakpoint-default-media:    'all'       !default;
+$breakpoint-default-pair:     'width'     !default;
+$breakpoint-to-ems:           false       !default;
 
-////////////////////////////
-// BREAKPOINT
-// breakpoint($breakpoint, $media: 'screen')
-//
-// // create $breakpoint variables like so
-// // assume $breakpoint-default-feature if only a number
-// $breakpoint1: 500px
-// $breakpoint2: 30em
-// // set min-width/max-width if both values are numbers
-// $breakpoint3: 500px 700px
-// // set min/max of feature if there are two numbers
-// $breakpoint4: 400px 700px 'height'
-// // if one value is a string, assume a feature/value pair
-// $breakpoint5: min-width 700px
-// $breakpoint6: max-width 700px
-// // for multidimensional lists, assume each item is a feature/value pair
-// $breakpoint7: max-width 700px, orientation portrait
-// // handle one-sided features (ie. monochrome)
-// $breakpoint8: max-width 700px, orientation portrait, monochrome
-// $breakpoint9: monochrome
-////////////////////////////
-
-$breakpoint-default-feature: min-width !default;
+//////////////////////////////
+// Breakpoint Mixin
+//////////////////////////////
+@mixin breakpoint($breakpoint, $media: $breakpoint-default-media) {
+  // Query and Media String Defaults
+  $query:         false !default;
+  $query-holder:  false !default;
+  $media-string:  false !default;
+  
+  // Holder for Count;
+  $first:         true  !default;
+  
+  // Initialize Query String
+  @if $media != 'all' {
+    $media-string: "#{$media} ";
+  }
+  @else {
+    $media-string: "";
+  }
+  
+  // If we have a single query, let's just work with that.
+  @if type-of(nth($breakpoint, 1)) != 'list' {
+    $query: breakpoint-switch($breakpoint, $media-string, true);
+  }
+  @else {
+    @each $bkpt in $breakpoint {
+      @if $first == true {
+        $query: breakpoint-switch($bkpt, $media-string, true);
+        $first: false;
+      }
+      @else {
+        $query: join($query, breakpoint-switch($bkpt, $media-string));
+      }
+    }
+  }
+  
+  @media #{$query} {
+    @content;
+  }
+}
 
-@mixin breakpoint($breakpoint, $media: "screen") {
-  // Feature/Value Placeholders
-  $feature:               false !default;
-  $value:                 false !default;
-  // Prefixed Queries (We have none for now, mostly to be Future Friendly)
-  $webkit-query-string:   false !default;
-  $moz-query-string:      false !default;
-  $ms-query-string:       false !default;
-  $o-query-string:        false !default;
-//  @debug $breakpoint;
-  // initialize string
-  $query-string: "#{$media} ";
-  @if type-of($breakpoint) == number {
-    // assume max-width if only a number
-    $query-string: breakpoint-concatenate($query-string, $breakpoint);
-  }
-  @if type-of($breakpoint) == string {
-    // handle one-sided features (ie. monochrome)
-    $query-string: breakpoint-concatenate($query-string, $breakpoint, false);
-  }
-  @else if type-of($breakpoint) == list {
-    // set min/max if both values are numbers
-    @if type-of(nth($breakpoint, 1)) == number and type-of(nth($breakpoint, 2)) == number {
-      // Optionally pass in 3rd parameter
-      @if length($breakpoint) == 3 and breakpoint-min-max(nth($breakpoint, 3)) {
-        // If the feature is device-pixel-ratio, let's convert it to the standard resolution media query!
-        //  - via http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
-        @if nth($breakpoint, 3) == 'device-pixel-ratio' {
-          $value1: 96 * nth($breakpoint, 1) * 1dpi;
-          $value2: 96 * nth($breakpoint, 2) * 1dpi;;
-          $feature: 'resolution';
-          $breakpoint: $value1 $value2 $feature;
-        }
-        // Min/Max for given
-        $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "min-#{nth($breakpoint, 3)}");
-        $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), "max-#{nth($breakpoint, 3)}");
+@function breakpoint-switch($breakpoint, $media-string, $first: false) {
+  // Feature/Value/Length/Query Placehoders:
+  $feature:       false !default;
+  $min-feature:   "min-#{$breakpoint-default-pair}" !default;
+  $max-feature:   "max-#{$breakpoint-default-pair}" !default;
+  $value:         false !default;
+  $min-value:     false !default;
+  $max-value:     false !default;
+  $length:        false !default;
+  $query:         false !default;
+  
+  $length: length($breakpoint);
+  // Check to see if there is only one item.
+  @if $length == 1 {
+    $value: $breakpoint;
+    @if type-of($breakpoint) == 'number' {
+      $feature: $breakpoint-default-feature;
+    }
+    
+    // If EM Breakpoints are active, do it!
+    @if $breakpoint-to-ems and type-of($value) == 'number' {
+      $value: breakpoint-to-base-em($value);
+    }
+    // Build the Query
+    $query: breakpoint-generate($media-string, $feature, $value, $first);
+  }
+  @else if $length == 2 {
+    // If both are numbers, we've got a double!
+    @if type-of(nth($breakpoint, 1)) == 'number' and type-of(nth($breakpoint, 2)) == 'number' {
+      // See which is larger.
+      @if nth($breakpoint, 1) > nth($breakpoint, 2) {
+        $min-value: nth($breakpoint, 2);
+        $max-value: nth($breakpoint, 1);
       }
       @else {
-        @if length($breakpoint) == 3 and breakpoint-min-max(nth($breakpoint, 3)) != true {
-          @warn '#{nth($breakpoint, 3)} does not accept a min/max value.'
-        }
-        $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "min-width");
-        $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), "max-width");
+        $min-value: nth($breakpoint, 1);
+        $max-value: nth($breakpoint, 2);
+      }
+      
+      // If EM Breakpoints are active, do it!
+      @if $breakpoint-to-ems and type-of($min-value) == 'number' {
+        $min-value: breakpoint-to-base-em($min-value);
       }
+      @if $breakpoint-to-ems and type-of($max-value) == 'number' {
+        $max-value: breakpoint-to-base-em($max-value);
+      }
+      
+      // 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));
     }
-    @else if type-of(nth($breakpoint, 1)) == string or type-of(nth($breakpoint, 2)) == string {
-      // if one value is a string, assume a feature/value pair
+    @else if type-of(nth($breakpoint, 1)) == 'string' and type-of(nth($breakpoint, 2)) == 'string' {
+      @if breakpoint-string-value(nth($breakpoint, 1)) == true {
+        $feature: nth($breakpoint, 1);
+        $value: nth($breakpoint, 2);
+      }
+      @else {
+        $feature: nth($breakpoint, 2);
+        $value: nth($breakpoint, 1);
+      }
+      
+      // If EM Breakpoints are active, do it!
+      @if $breakpoint-to-ems and type-of($value) == 'number' {
+        $value: breakpoint-to-base-em($value);
+      }
+      
+      // Build the Query
+      $query: breakpoint-generate($media-string, $feature, $value, $first);
+    }
+    @else {
       // Because we can have either the first or second option be the feature, we switch on it.
       @if type-of(nth($breakpoint, 1)) == string {
         $feature: nth($breakpoint, 1);
@@ -84,79 +126,127 @@ $breakpoint-default-feature: min-width !default;
         $feature: nth($breakpoint, 2);
         $value: nth($breakpoint, 1);
       }
-      // If the feature is device-pixel-ratio, let's convert it to the standard resolution media query!
-      //  - via http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
-      @if $feature == 'device-pixel-ratio' {
+      
+      @if $feature == 'device-pixel-ratio' or $feature == 'min-device-pixel-ratio' or $feature == 'max-device-pixel-ratio' {
         $value: 96 * $value * 1dpi;
-        $feature: 'resolution';
-        $query-string: breakpoint-concatenate($query-string, $value, $feature);
+        @if $feature == 'device-pixel-ratio' {
+          $feature: 'resolution';
+        }
+        @else if $feature == 'min-device-pixel-ratio' {
+          $feature: 'min-resolution';
+        }
+        @else if $feature == 'max-device-pixel-ratio' {
+          $feature: 'max-resolution';
+        }
       }
-      @else if $feature == 'min-device-pixel-ratio' {
-        $value: 96 * $value * 1dpi;
-        $feature: 'min-resolution';
-        $query-string: breakpoint-concatenate($query-string, $value, $feature);
+      
+      // If EM Breakpoints are active, do it!
+      @if $breakpoint-to-ems and type-of($value) == 'number' {
+        $value: breakpoint-to-base-em($value);
       }
-      @else if $feature == 'max-device-pixel-ratio' {
-        $value: 96 * $value * 1dpi;
-        $feature: 'max-resolution';
-        $query-string: breakpoint-concatenate($query-string, $value, $feature);
+      
+      // Build the Query
+      $query: breakpoint-generate($media-string, $feature, $value, $first);
+    }
+  }
+  @else if $length == 3 {
+    @if type-of(nth($breakpoint, 1)) == 'string' {
+      $feature: nth($breakpoint, 1);
+      // See which is larger.
+      @if nth($breakpoint, 2) > nth($breakpoint, 3) {
+        $min-value: nth($breakpoint, 3);
+        $max-value: nth($breakpoint, 2);
       }
       @else {
-        $query-string: breakpoint-concatenate($query-string, $value, $feature);
+        $min-value: nth($breakpoint, 2);
+        $max-value: nth($breakpoint, 3);
       }
     }
-    @else if type-of(nth($breakpoint, 1)) == list {
-      // for multidimensional lists, assume each item is a feature value pair
-      @each $item in $breakpoint {
-        @if type-of($item) == list {
-          // $query-string: #{$query-string}unquote("and (#{nth($item, 1)}:  #{nth($item, 2)}) ")
-          $query-string: breakpoint-concatenate($query-string, nth($item, 2), nth($item, 1));
-        }
-        @else {
-          // handle one-sided features (ie. monochrome)
-          $query-string: breakpoint-concatenate($query-string, $item, false);
-        }
+    @else {
+      $feature: nth($breakpoint, 3);
+      // See which is larger.
+      @if nth($breakpoint, 1) > nth($breakpoint, 2) {
+        $min-value: nth($breakpoint, 2);
+        $max-value: nth($breakpoint, 1);
+      }
+      @else {
+        $min-value: nth($breakpoint, 1);
+        $max-value: nth($breakpoint, 2);
       }
     }
-  }
-  // write out the media query
-  @media #{$query-string} {
-    @content;
-  }
-  // We have no prefixed query strings, this is mostly to be Future Friendly for now.
-  @if $webkit-query-string {
-    @media #{$webkit-query-string} {
-      @content;
+    
+    @if $feature == 'device-pixel-ratio' {
+      $min-value: 96 * $min-value * 1dpi;
+      $max-value: 96 * $max-value * 1dpi;
+      $feature: 'resolution';
     }
-  }
-  @if $moz-query-string {
-    @media #{$moz-query-string} {
-      @content;
+    
+    // If EM Breakpoints are active, do it!
+    @if $breakpoint-to-ems and type-of($min-value) == 'number' {
+      $min-value: breakpoint-to-base-em($min-value);
     }
-  }
-  @if $ms-query-string {
-    @media #{$ms-query-string} {
-      @content;
+    @if $breakpoint-to-ems and type-of($max-value) == 'number' {
+      $max-value: breakpoint-to-base-em($max-value);
+    }
+    
+    @if breakpoint-min-max($feature) == true {
+      $min-feature: 'min-#{$feature}';
+      $max-feature: 'max-#{$feature}';
+
+      // 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));
+    }
+    @else {
+      @warn '#{$feature} cannot have a min/max value!';
     }
   }
-   @if $o-query-string {
-     @media #{$o-query-string} {
-       @content;
-     }
-   }
+  
+  @return $query;
 }
 
-@function breakpoint-concatenate($query-string, $new-value, $feature: $breakpoint-default-feature) {
+@function breakpoint-generate($media, $feature, $value, $first: false) {
   $new-string: "";
-  @if $feature != false {
-    $new-string: #{$query-string}unquote("and (#{$feature}:  #{$new-value}) ");
+  @if $media == '' and $first == true {
+    @if $feature != false {
+      $new-string: #{$media}unquote("(#{$feature}: #{$value})");
+    }
+    @else {
+      $new-string: #{$media}unquote("(#{$value})");
+    }
   }
   @else {
-    $new-string: #{$query-string}unquote("and (#{$new-value}) ");
+    @if $feature != false {
+      $new-string: #{$media}unquote("and (#{$feature}: #{$value})");
+    }
+    @else {
+      $new-string: #{$media}unquote("and (#{$value})");
+    }
   }
   @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;
@@ -165,3 +255,12 @@ $breakpoint-default-feature: min-width !default;
     @return false;
   }
 }
+
+@function breakpoint-string-value($feature) {
+  @if $feature == 'orientation' or $feature == 'scan' or $feature == 'color' {
+    @return true;
+  }
+  @else {
+    @return false;
+  }
+}

metadata

@@ -3,9 +3,9 @@ name: breakpoint
 version: !ruby/object:Gem::Version 
   prerelease: false
   segments: 
+  - 1
   - 0
-  - 3
-  version: "0.3"
+  version: "1.0"
 platform: ruby
 authors: 
 - Mason Wendell
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-06-21 00:00:00 -04:00
+date: 2012-06-22 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -47,7 +47,7 @@ files:
 - lib/breakpoint.rb
 - stylesheets/_breakpoint.scss
 has_rdoc: true
-homepage: http://thecodingdesigner.com
+homepage: https://github.com/canarymason/breakpoint
 licenses: []
 
 post_install_message: