breakpoint 1.3 → 2.0.0

data/README.markdown

@@ -47,7 +47,7 @@ This will install Sass 3.2. If you are compiling with CodeKit, [Chris Coyier has
 `compass create <my_project> -r breakpoint`
 
 #### If adding to existing project, in config.rb
-`require 'breakpoint`
+`require 'breakpoint'`
 
 #### Import the breakpoint partial at the top of your working file
 `@import "breakpoint";`
@@ -79,7 +79,7 @@ $breakpoint-medium-width-em: 30em;
 // set min-width/max-width if both values are numbers
 $breakpoint-medium-not-wide: 500px 700px;
 // set min/max of feature if there are two numbers
-$breakpoint-medium-height: 300px 700px 'height';
+$breakpoint-medium-height: height 300px 700px;
 // if one value is a string, assume a feature/value pair
 $breakpoint-kind-of-wide: min-width 700px;
 $breakpoint-not-too-wide: max-width 700px;
@@ -314,7 +314,7 @@ Caviats with Media Query context:
 
 ## No Query Fallback
 
-Breakpoint provides a way to generate fallback CSS for if you would like the CSS to apply even if media queries aren't available. There are three methidologies we discovered cover most, if not all, of the stylistic options a user could have in a system like this: a wrapping selector within the same stylesheet, a seperate stylesheet with no wrapping selector, and a seperate stylesheet with a wrapping selector. For both of these, bare in mind that Sass cannot create separate stylesheets automatically ([yet](https://github.com/nex3/sass/issues/241)), so you're going to need to do it by hand, but the tools we've provided are very powerful, so we think you'll like.
+Breakpoint provides a way to generate fallback CSS for if you would like the CSS to apply even if media queries aren't available. There are three methidologies we discovered cover most, if not all, of the stylistic options a user could have in a system like this: a wrapping selector within the same stylesheet, a seperate stylesheet with no wrapping selector, and a seperate stylesheet with a wrapping selector. For both of these, bare in mind that Sass cannot create separate stylesheets automatically ([yet](https://github.com/nex3/sass/issues/241)), so you're going to need to do it by hand, but the tools we've provided are very powerful, so we think you'll like it anyway.
 
 There are now two new breakpoint flags to set that control no query support, `$breakpoint-no-queries` for specifying that only no query output should be output by Breakpoint and `$breakpoint-no-query-wrappers` for specifying that you want no query wrappers to be printed. Both of the new flags, `$breakpoint-no-queries` and `$breakpoint-no-query-wrappers` default to `false`, toggling them to `true` activates them. For the purposes of clarity in the following code samples, I'm including both flags even though the `false` flags are not explicitly needed. When passing in a wrapper, you must write the whole wrapper and may include a compound wrapper, *i.e.* `'.no-mqs'` or `'#print'` or `'.high-dpi.no-mqs'`. Variables may also be passed in, but they still require the whole wrapper.
 

data/lib/breakpoint.rb

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

data/stylesheets/_breakpoint.scss

@@ -1,401 +1,131 @@
 //////////////////////////////
 // Default Variables
 //////////////////////////////
-$breakpoint-default-feature:  'min-width'     !default;
-$breakpoint-default-media:    'all'           !default;
-$breakpoint-force-media-all:  false           !default;
-$breakpoint-default-pair:     'width'         !default;
-$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;
+// Default Features
+$breakpoint-default-media:      all !default;
+$breakpoint-default-feature:    min-width !default;
+$breakpoint-default-pair:       width !default;
 
-$breakpoint-no-queries:       false           !default;
-$breakpoint-no-query-wrappers: false           !default;
+// Default Transforms
+$breakpoint-force-media-all:    false !default;
+$breakpoint-to-ems:             false !default;
+$breakpoint-resolutions:        true !default;
 
-$breakpoint-base-font-size: false;
+// Default No Query Options
+$breakpoint-no-queries:         false !default;
+$breakpoint-no-query-wrappers:  false !default;
+
+// Deftault Base Font Size
+$breakpoint-base-font-size:     16px !default;
+
+// Legacy Syntax Support
+$breakpoint-legacy-syntax:      false !default;
 
 //////////////////////////////
-// Import Breakpoint Helpers
+// Imports
 //////////////////////////////
-@import 'breakpoint/helpers';
 @import 'breakpoint/context';
+@import 'breakpoint/helpers';
+@import 'breakpoint/parsers';
+@import 'breakpoint/no-query';
+
+@import 'breakpoint/respond-to';
 
 //////////////////////////////
 // Breakpoint Mixin
 //////////////////////////////
-@mixin breakpoint($breakpoint, $media: $breakpoint-default-media, $no-query: false, $base-font-size: $breakpoint-base-font-size) {
-  // Query and Media String Defaults
-  $query:         false !default;
-  $query-holder:  false !default;
-  $media-string:  false !default;
-  $do-prefix:     false !default;
-
-  $webkit:        false !default;
-  $webkit-first:  true !default;
-  $moz:           false !default;
-  $moz-first:     true !default;
-  $o:             false !default;
-  $o-first:       true !default;
-  $ms:            false !default;
-  $ms-first:      true !default;
 
-  // Holder for Count
-  $first:         true  !default;
+@mixin breakpoint($query) {
+  // Internal Variables
+  $query-string: '';
 
-  // Reset Context
-  @include TXkgcmVzZXQhIEdvIGF3YXkh;
+  // Reset contexts
+  @include private-breakpoint-reset-contexts();
 
-  // Set Media Context
-  $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('media', $media);
+  // Test to see if it's a comma-separated list
+  $or-list: is-breakpoint-list($query);
+  $query-fallback: false;
 
-  // Initialize Query String
-  @if $media != 'all' or $breakpoint-force-media-all {
-    $media-string: "#{$media} ";
-  }
-  @else {
-    $media-string: "";
-  }
-
-  // If we have a single query, let's just work with that.
-  @if is_breakpoint_list($breakpoint) == false {
-    @each $prefix-query in $breakpoint-prefixed-queries {
-      @if $do-prefix == false {
-        $do-prefix: featureExists($prefix-query, $breakpoint);
-      }
-    }
-    @if $do-prefix {
-      @each $prfx in $breakpoint-prefixes {
-        @if $prfx == 'webkit' {
-          $webkit: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
-        }
 
-        @if $prfx == 'moz' {
-          $moz: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
-        }
+  @if ($or-list != false and $breakpoint-legacy-syntax == false) {
+    $length: length($query);
 
-        @if $prfx == 'o' {
-          $o: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
-        }
+    $last: nth($query, $length);
+    $query-fallback: breakpoint-no-query($last);
 
-        @if $prfx == 'ms' {
-          $ms: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
-        }
-      }
-    }
-    @else {
-      $query: breakpoint-switch($breakpoint, $media-string, true, $base-font-size: $base-font-size);
-    }
-  }
-  @else {
-    // See if Prefix Query exists
-    @each $prefix-query in $breakpoint-prefixed-queries {
-      @if $do-prefix == false {
-        $do-prefix: featureExists($prefix-query, $breakpoint);
-      }
+    @if ($query-fallback != false) {
+      $length: $length - 1;
     }
 
-    @if $do-prefix {
-      @each $prfx in $breakpoint-prefixes {
-        @each $bkpt in $breakpoint {
-          @if $prfx == 'webkit' {
-            @if $webkit-first {
-              $webkit: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
-              $webkit-first: false;
-            }
-            @else {
-              $webkit: join($webkit, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
-            }
-          }
 
-          @if $prfx == 'moz' {
-            @if $moz-first {
-              $moz: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
-              $moz-first: false;
-            }
-            @else {
-              $moz: join($moz, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
-            }
-          }
-
-          @if $prfx == 'o' {
-            @if $o-first {
-              $o: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
-              $o-first: false;
-            }
-            @else {
-              $o: join($o, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
-            }
-          }
-
-          @if $prfx == 'ms' {
-            @if $ms-first {
-              $ms: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
-              $ms-first: false;
-            }
-            @else {
-              $ms: join($ms, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
-            }
-          }
-        }
-      }
-    }
-    @else {
-      @each $bkpt in $breakpoint {
-        @if $first == true {
-          $query: breakpoint-switch($bkpt, $media-string, true, $base-font-size: $base-font-size);
-          $first: false;
-        }
-        @else {
-          $query: join($query, breakpoint-switch($bkpt, $media-string, $base-font-size: $base-font-size));
-        }
-      }
-    }
-  }
-
-  @if $breakpoint-no-queries {
-    @if $no-query {
-      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no queries', true);
-      @if $breakpoint-no-query-wrappers and type-of($no-query) == string {
-        #{$no-query} & {
-          @content;
-          $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no query wrapper', $no-query);
-        }
+    @for $i from 1 through $length {
+      @if $i == 1 {
+        $query-string: breakpoint-parse(nth($query, $i));
       }
       @else {
-        @content;
+        $query-string: $query-string + ', ' + breakpoint-parse(nth($query, $i));
       }
     }
   }
   @else {
-    @if $breakpoint-no-query-wrappers and type-of($no-query) == string {
-      #{$no-query} & {
-        @content;
-        $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no query wrapper', $no-query);
-      }
-    }
-    @if $query {
-      @media #{$query} {
-        @content;
-      }
-    }
-    @else {
-      $pf-queries: $webkit, $moz, $o, $ms;
-      $pf-query: ();
+    @if ($breakpoint-legacy-syntax == true) {
+      $length: length($query);
 
-      @each $pfq in $pf-queries {
-        @if $pfq {
-          $pf-query: append($pf-query, $pfq, comma);
-        }
-      }
-      @media #{$pf-query} {
-        @content;
-      }
-    }
-  }
+      $last: nth($query, $length);
+      $query-fallback: breakpoint-no-query($last);
 
-  @include TXkgcmVzZXQhIEdvIGF3YXkh;
-}
-
-@function breakpoint-switch($breakpoint, $media-string, $first: false, $prefix: false, $base-font-size: $breakpoint-base-font-size) {
-  // 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, $base-font-size);
-    }
-    // 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!
-    @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 {
-        $min-value: nth($breakpoint, 1);
-        $max-value: nth($breakpoint, 2);
+      @if ($query-fallback != false) {
+        $length: $length - 1;
       }
 
-      // 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, $base-font-size);
-      }
-      @if $breakpoint-to-ems and type-of($max-value) == 'number' {
-        $max-value: breakpoint-to-base-em($max-value, $base-font-size);
-      }
+      $mq: ();
 
-      // 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 {
-        $feature: nth($breakpoint, 1);
-        $value: nth($breakpoint, 2);
-      }
-      @else {
-        $feature: nth($breakpoint, 2);
-        $value: nth($breakpoint, 1);
+      @for $i from 1 through $length {
+        $mq: append($mq, nth($query, $i), comma);
       }
 
-      // If EM Breakpoints are active, do it!
-      @if $breakpoint-to-ems and type-of($value) == 'number' {
-        $value: breakpoint-to-base-em($value, $base-font-size);
-      }
-
-      // Build the Query
-      $query: breakpoint-generate($media-string, $feature, $value, $first);
-      // Set Context
-      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
+      $query-string: breakpoint-parse($mq);
     }
     @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);
-        $value: nth($breakpoint, 2);
-      }
-      @else if type-of(nth($breakpoint, 2)) == string {
-        $feature: nth($breakpoint, 2);
-        $value: nth($breakpoint, 1);
-      }
-
-      @if $feature == 'device-pixel-ratio' or $feature == 'min-device-pixel-ratio' or $feature == 'max-device-pixel-ratio' {
-        $feature: breakpoint-experimental($feature, $prefix);
-        //$value: 96 * $value * 1dpi;
-        //        @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';
-        //        }
-      }
-
-      // If EM Breakpoints are active, do it!
-      @if $breakpoint-to-ems and type-of($value) == 'number' {
-        $value: breakpoint-to-base-em($value, $base-font-size);
-      }
-
-      // Build the Query
-      $query: breakpoint-generate($media-string, $feature, $value, $first);
-      // Set Context
-      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
+      $query-string: breakpoint-parse($query);
     }
   }
-  @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 {
-        $min-value: nth($breakpoint, 2);
-        $max-value: nth($breakpoint, 3);
-      }
-    }
-    @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);
-      }
-    }
 
-    // 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, $base-font-size);
-    }
-    @if $breakpoint-to-ems and type-of($max-value) == 'number' {
-      $max-value: breakpoint-to-base-em($max-value, $base-font-size);
-    }
 
-    @if breakpoint-min-max($feature) == true {
-      @if $feature == 'device-pixel-ratio' {
-        $min-feature: breakpoint-experimental('min-#{$feature}', $prefix);
-        $max-feature: breakpoint-experimental('max-#{$feature}', $prefix);
-      }
-      @else {
-        $min-feature: 'min-#{$feature}';
-        $max-feature: 'max-#{$feature}';
-      }
+  // Print Out Query String
 
-      // 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!';
+  @if not $breakpoint-no-queries {
+    @media #{$query-string} {
+      @content;
     }
   }
 
-  @return $query;
-}
+  @if $breakpoint-no-query-wrappers != false {
 
-@function breakpoint-generate($media, $feature, $value, $first: false) {
-  // Media Query string to be returned
-  $new-string: "";
+    $type: type-of($breakpoint-no-query-wrappers);
+    $print: false;
 
-  // If it's the first item, it gets special treatment
-  @if $first == true {
-    // And Statement
-    $and: 'and ';
-    // If $media is blank (i.e. all), remove and statement
-    @if $media == '' {
-      $and: '';
+    @if ($type == 'bool') {
+      $print: true;
     }
-
-    @if $feature != false {
-      $new-string: #{$media}unquote("#{$and}(#{$feature}: #{$value})");
+    @else if ($type == 'string') {
+      @if $query-fallback == $breakpoint-no-query-wrappers {
+        $print: true;
+      }
     }
-    @else {
-      $new-string: #{$media}unquote("#{$and}(#{$value})");
+    @else if ($type == 'list') {
+      @each $wrapper in $breakpoint-no-query-wrappers {
+        @if $query-fallback == $wrapper {
+          $print: true;
+        }
+      }
     }
-  }
 
-  @else {
-    @if $feature != false {
-      $new-string: unquote("and (#{$feature}: #{$value})");
-    }
-    @else {
-      $new-string: unquote("and (#{$value})");
+    @if ($query-fallback != false) and ($print == true) {
+      #{$query-fallback} & {
+        @content;
+      }
     }
   }
 
-  @return $new-string;
 }