breakpoint 1.0.1 → 1.0.2

data/CHANGELOG.markdown

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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.
+
+## 1.0.1 - June 27, 2012
+* fixed logic error that would print multiple instences of a media type
+
 ## 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.

data/README.markdown

@@ -1,6 +1,6 @@
 # Breakpoint #
 
-**Media Queries Made Easy**
+**Really Simple Media Queries with Sass**
 
 Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the `breakpoint` mixin.  Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.
 
@@ -11,12 +11,18 @@ Breakpoint makes the following assumptions:
 * 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 the semantic awesomeness of 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.
+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.
 
 ## 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!
 
+Breakpoint also requires Sass 3.2, which is currently in pre-release. Breakpoint should install Sass 3.2 for you when you install it, but in case you are getting errors, open up your terminal and type the following in:
+
+`gem install sass --pre`
+
+This will install Sass 3.2. If you are compiling with CodeKit, [Chris Coyier has an awesome writeup](http://css-tricks.com/media-queries-sass-3-2-and-codekit/) on how to get CodeKit playing nice with Sass 3.2.
+
 ## Installation
 
 `gem install breakpoint`

data/lib/breakpoint.rb

@@ -3,6 +3,32 @@ require 'compass'
 Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
 
 module Breakpoint
-  VERSION = "1.0.1"
-  DATE = "2012-06-27"
+  VERSION = "1.0.2"
+  DATE = "2012-07-28"
+end
+
+module Sass::Script::Functions
+  def is_breakpoint_list(breakpoint)
+    result = false unless breakpoint.class == Sass::Script::List && breakpoint.separator.to_s == 'comma'
+    Sass::Script::Bool.new(result)
+  end
+  def featureExists(feature, list)
+    testList = Array.new
+    listLength = list.to_a.length - 1
+
+    for i in 0..listLength
+      if list.value[i].class == Sass::Script::List
+        subList = list.value[i].to_a.length - 1
+
+        for j in 0..subList
+          testList << list.value[i].value[j]
+        end
+      else
+        testList << list.value[i]
+      end
+    end
+
+    result = testList.include?(feature)
+    Sass::Script::Bool.new(result)
+  end
 end

data/stylesheets/_breakpoint.scss

@@ -1,10 +1,12 @@
 //////////////////////////////
 // Default Variables
 //////////////////////////////
-$breakpoint-default-feature:  'min-width' !default;
-$breakpoint-default-media:    'all'       !default;
-$breakpoint-default-pair:     'width'     !default;
-$breakpoint-to-ems:           false       !default;
+$breakpoint-default-feature:  'min-width'     !default;
+$breakpoint-default-media:    'all'           !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;
 
 //////////////////////////////
 // Breakpoint Mixin
@@ -14,10 +16,20 @@ $breakpoint-to-ems:           false       !default;
   $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;
-  
+
   // Initialize Query String
   @if $media != 'all' {
     $media-string: "#{$media} ";
@@ -25,29 +37,133 @@ $breakpoint-to-ems:           false       !default;
   @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);
+  @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);
+        }
+
+        @if $prfx == 'moz' {
+          $moz: breakpoint-switch($breakpoint, $media-string, true, $prfx);
+        }
+
+        @if $prfx == 'o' {
+          $o: breakpoint-switch($breakpoint, $media-string, true, $prfx);
+        }
+
+        @if $prfx == 'ms' {
+          $ms: breakpoint-switch($breakpoint, $media-string, true, $prfx);
+        }
+      }
+    }
+    @else {
+      $query: breakpoint-switch($breakpoint, $media-string, true);
+    }
   }
   @else {
-    @each $bkpt in $breakpoint {
-      @if $first == true {
-        $query: breakpoint-switch($bkpt, $media-string, true);
-        $first: false;
+    // See if Prefix Query exists
+    @each $prefix-query in $breakpoint-prefixed-queries {
+      @if $do-prefix == false {
+        $do-prefix: featureExists($prefix-query, $breakpoint);
       }
-      @else {
-        $query: join($query, breakpoint-switch($bkpt, $media-string));
+    }
+
+    @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);
+              $webkit-first: false;
+            }
+            @else {
+              $webkit: join($webkit, breakpoint-switch($bkpt, $media-string, $prefix: $prfx));
+            }
+          }
+
+          @if $prfx == 'moz' {
+            @if $moz-first {
+              $moz: breakpoint-switch($bkpt, $media-string, true, $prfx);
+              $moz-first: false;
+            }
+            @else {
+              $moz: join($moz, breakpoint-switch($bkpt, $media-string, $prefix: $prfx));
+            }
+          }
+
+          @if $prfx == 'o' {
+            @if $o-first {
+              $o: breakpoint-switch($bkpt, $media-string, true, $prfx);
+              $o-first: false;
+            }
+            @else {
+              $o: join($o, breakpoint-switch($bkpt, $media-string, $prefix: $prfx));
+            }
+          }
+
+          @if $prfx == 'ms' {
+            @if $ms-first {
+              $ms: breakpoint-switch($bkpt, $media-string, true, $prfx);
+              $ms-first: false;
+            }
+            @else {
+              $ms: join($ms, breakpoint-switch($bkpt, $media-string, $prefix: $prfx));
+            }
+          }
+        }
+      }
+    }
+    @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;
+
+  @if not $webkit and not $moz and not $o and not $ms {
+    @media #{$query} {
+      @content;
+    }
+  }
+  @else {
+    @if $webkit {
+      @media #{$webkit} {
+        @content;
+      }
+    }
+    @if $moz {
+      @media #{$moz} {
+        @content;
+      }
+    }
+    @if $o {
+      @media #{$o} {
+        @content;
+      }
+    }
+    @if $ms {
+      @media #{$ms} {
+        @content;
+      }
+    }
   }
 }
 
-@function breakpoint-switch($breakpoint, $media-string, $first: false) {
+@function breakpoint-switch($breakpoint, $media-string, $first: false, $prefix: false) {
   // Feature/Value/Length/Query Placehoders:
   $feature:       false !default;
   $min-feature:   "min-#{$breakpoint-default-pair}" !default;
@@ -57,7 +173,7 @@ $breakpoint-to-ems:           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 {
@@ -65,7 +181,7 @@ $breakpoint-to-ems:           false       !default;
     @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);
@@ -85,7 +201,7 @@ $breakpoint-to-ems:           false       !default;
         $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);
@@ -93,7 +209,7 @@ $breakpoint-to-ems:           false       !default;
       @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));
@@ -107,12 +223,12 @@ $breakpoint-to-ems:           false       !default;
         $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);
     }
@@ -126,25 +242,26 @@ $breakpoint-to-ems:           false       !default;
         $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' {
-        $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';
-        }
+        $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);
       }
-      
+
       // Build the Query
       $query: breakpoint-generate($media-string, $feature, $value, $first);
     }
@@ -174,13 +291,7 @@ $breakpoint-to-ems:           false       !default;
         $max-value: nth($breakpoint, 2);
       }
     }
-    
-    @if $feature == 'device-pixel-ratio' {
-      $min-value: 96 * $min-value * 1dpi;
-      $max-value: 96 * $max-value * 1dpi;
-      $feature: 'resolution';
-    }
-    
+
     // 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);
@@ -188,10 +299,16 @@ $breakpoint-to-ems:           false       !default;
     @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}';
+      @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}';
+      }
 
       // Min/Max for given
       $query: breakpoint-generate($media-string, $min-feature, $min-value, $first);
@@ -201,14 +318,14 @@ $breakpoint-to-ems:           false       !default;
       @warn '#{$feature} cannot have a min/max value!';
     }
   }
-  
+
   @return $query;
 }
 
 @function breakpoint-generate($media, $feature, $value, $first: false) {
   // Media Query string to be returned
   $new-string: "";
-  
+
   // If it's the first item, it gets special treatment
   @if $first == true {
     // And Statement
@@ -217,7 +334,7 @@ $breakpoint-to-ems:           false       !default;
     @if $media == '' {
       $and: '';
     }
-    
+
     @if $feature != false {
       $new-string: #{$media}unquote("#{$and}(#{$feature}: #{$value})");
     }
@@ -225,7 +342,7 @@ $breakpoint-to-ems:           false       !default;
       $new-string: #{$media}unquote("#{$and}(#{$value})");
     }
   }
-  
+
   @else {
     @if $feature != false {
       $new-string: unquote("and (#{$feature}: #{$value})");
@@ -234,13 +351,13 @@ $breakpoint-to-ems:           false       !default;
       $new-string: unquote("and (#{$value})");
     }
   }
-  
+
   @return $new-string;
 }
 
 @function breakpoint-to-base-em($value) {
   $unit: unit($value);
-  
+
   @if $unit == 'px' {
     @return $value / 16px * 1em;
   }
@@ -275,4 +392,34 @@ $breakpoint-to-ems:           false       !default;
   @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}';
+  }
+}

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 1
   - 0
-  - 1
-  version: 1.0.1
+  - 2
+  version: 1.0.2
 platform: ruby
 authors: 
 - Mason Wendell
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-06-27 00:00:00 -04:00
+date: 2012-07-28 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency