breakpoint 1.0 → 1.0.1

data/CHANGELOG.markdown

@@ -20,4 +20,4 @@
 * Added ability to have single feature/value input be either have feature first or second
 
 ## 0.1 - May 22, 2012
-* extract breakpoint from ssurvival kit to this gem
+* extract breakpoint from survival kit to this gem

data/README.markdown

@@ -1,8 +1,8 @@
 # Breakpoint #
 
-**Really simple media queries in Sass**
+**Media Queries Made Easy**
 
-Breakpoint aims to make 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 lifting of writing the media query itself, including cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.
+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.
 
 Breakpoint makes the following assumptions:
 
@@ -11,7 +11,7 @@ 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 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.
+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.
 
 ## Requirements
 
@@ -46,22 +46,22 @@ Breakpoint provides a few default options that you can change.
 
 ```scss
 // create $breakpoint variables like so
-// assume $breakpoint-default-feature if only a number
-$breakpoint1: 500px;
-$breakpoint2: 30em;
+// assume min-width (by default) if only a number
+$breakpoint-medium-width: 500px;
+$breakpoint-medium-width-em: 30em;
 // set min-width/max-width if both values are numbers
-$breakpoint3: 500px 700px;
+$breakpoint-medium-not-wide: 500px 700px;
 // set min/max of feature if there are two numbers
-$breakpoint4: 300px 700px 'height';
+$breakpoint-medium-height: 300px 700px 'height';
 // if one value is a string, assume a feature/value pair
-$breakpoint5: min-width 700px;
-$breakpoint6: max-width 700px;
+$breakpoint-kind-of-wide: min-width 700px;
+$breakpoint-not-too-wide: max-width 700px;
 // for multidimensional lists, assume each item is a feature value pair
-$breakpoint7: max-width 700px, orientation portrait;
+$breakpoint-wide-portrait: max-width 700px, orientation portrait;
 // handle one-sided features (ie. monochrome)
-$breakpoint8: max-width 700px, orientation portrait, monochrome;
-$breakpoint9: monochrome;
-$breakpoint10: 2 device-pixel-ratio;
+$breakpoint-wide-portrait-mono: max-width 700px, orientation portrait, monochrome;
+$breakpoint-mono: monochrome;
+$breakpoint-hi-rez: 2 device-pixel-ratio;
 ```
 
 
@@ -71,143 +71,209 @@ Call the mixin and pass one of your breakpoint variables. You can also call it w
 
 ```scss
 .foo {
-  @include breakpoint($breakpoint1) {
-    content: 'foo';
+  @include breakpoint($breakpoint-medium-width) {
+    content: 'medium widths';
   }
 }
 .bar {
-  @include breakpoint($breakpoint2) {
-    content: 'bar';
+  @include breakpoint($breakpoint-medium-width-em) {
+    content: 'medium widths measured in ems';
   }
 }
 .baz {
-  @include breakpoint($breakpoint3) {
-    content: 'baz';
+  @include breakpoint($breakpoint-medium-not-wide) {
+    content: 'medium, but not too wide';
   }
 }
+.tgif {
+ @include breakpoint($breakpoint-medium-height) {
+   content: 'medium heights';
+ }
+}
 .omg {
-  @include breakpoint($breakpoint5) {
-    content: 'omg';
+  @include breakpoint($breakpoint-kind-of-wide) {
+    content: 'kind of wide';
   }
 }
 .wtf {
-  @include breakpoint($breakpoint6) {
-    content: 'wtf';
+  @include breakpoint($breakpoint-not-too-wide) {
+    content: 'not too wide';
   }
 }
 .bbq {
-  @include breakpoint($breakpoint7) {
-    content: 'bbq';
+  @include breakpoint($breakpoint-wide-portrait) {
+    content: 'wide, portrait';
   }
 }
 .zztop {
-  @include breakpoint($breakpoint8) {
-    content: 'zztop';
-  }
-}
-.elp {
-  @include breakpoint($breakpoint1, print) {
-    content: 'elp';
+  @include breakpoint($breakpoint-wide-portrait-mono) {
+    content: 'wide, portrait, monochrome';
   }
 }
 .csny {
-  @include breakpoint($breakpoint9) {
-    content: 'csny';
+  @include breakpoint($breakpoint-mono) {
+    content: 'monochrome';
   }
 }
-.rhcp {
-  @include breakpoint(30em 40em) {
-    content: 'rhcp';
+.elp {
+  @include breakpoint($breakpoint-mono, print) {
+    content: 'monochrome, print';
   }
 }
-.tgif {
- @include breakpoint($breakpoint4) {
-   content: 'tgif';
- }
-}
 .omgdpr {
- @include breakpoint($breakpoint10) {
-  content: 'omgdpr';
+ @include breakpoint($breakpoint-hi-rez) {
+  content: 'hi resolutions';
  }
 }
+
+// You can use breakpoint without variables too.
+.rhcp {
+  @include breakpoint(30em 40em) {
+    content: 'between 30 and 40ems';
+  }
+}
 ```
 
 Example generated CSS
 
 ```css
-@media screen and (min-width:  500px) {
+@media (min-width: 500px) {
   .foo {
-    content: "foo";
+    content: 'medium widths';
   }
 }
 
-@media screen and (min-width:  30em) {
+@media (min-width: 30em) {
   .bar {
-    content: "bar";
+    content: 'medium widths measured in ems';
   }
 }
 
-@media screen and (min-width:  500px) and (max-width:  700px) {
+@media (min-width: 500px) and (max-width: 700px) {
   .baz {
-    content: "baz";
+    content: 'medium, but not too wide';
+  }
+}
+
+@media (min-height: 300px) and (max-height: 700px) {
+  .tgif {
+    content: 'medium heights';
   }
 }
 
-@media screen and (min-width:  700px) {
+@media (min-width: 700px) {
   .omg {
-    content: "omg";
+    content: 'kind of wide';
   }
 }
 
-@media screen and (max-width:  700px) {
+@media (max-width: 700px) {
   .wtf {
-    content: "wtf";
+    content: 'not too wide';
   }
 }
 
-@media screen and (max-width:  700px) and (orientation:  portrait) {
+@media (max-width: 700px) and (orientation: portrait) {
   .bbq {
-    content: "bbq";
+    content: 'wide, portrait';
   }
 }
 
-@media screen and (max-width:  700px) and (orientation:  portrait) and (monochrome) {
+@media (max-width: 700px) and (orientation: portrait) and (monochrome) {
   .zztop {
-    content: "zztop";
+    content: 'wide, portrait, monochrome';
+  }
+}
+
+@media (monochrome) {
+  .csny {
+    content: 'monochrome';
   }
 }
 
-@media print and (min-width:  500px) {
+@media print and (monochrome) {
   .elp {
-    content: "elp";
+    content: 'monochrome, print';
   }
 }
 
-@media screen and (monochrome) {
-  .csny {
-    content: "csny";
+@media (resolution: 192dpi) {
+  .omgdpr {
+    content: 'hi resolutions';
   }
 }
 
-@media screen and (min-width:  30em) and (max-width:  40em) {
+@media (min-width: 30em) and (max-width: 40em) {
   .rhcp {
-    content: "rhcp";
+    content: 'between 30 and 40ems';
+  }
+}
+```
+
+With `$breakpoint-to-ems: true;`
+```scss
+@media (min-width: 31.25em) {
+  .foo {
+    content: 'medium widths';
+  }
+}
+
+@media (min-width: 30em) {
+  .bar {
+    content: 'medium widths measured in ems';
+  }
+}
+
+@media (min-width: 31.25em) and (max-width: 43.75em) {
+  .baz {
+    content: 'medium, but not too wide';
   }
 }
 
-@media screen and (min-height: 300px) and (max-height: 700px) {
+@media (min-height: 18.75em) and (max-height: 43.75em) {
   .tgif {
-    content: "tgif";
+    content: 'medium heights';
   }
 }
 
-@media screen and (resolution: 192dpi) {
-  .omgdpr {
-    content: "omgdpr";
+@media (min-width: 43.75em) {
+  .omg {
+    content: 'kind of wide';
+  }
+}
+
+@media (max-width: 43.75em) {
+  .wtf {
+    content: 'not too wide';
+  }
+}
+
+@media (max-width: 43.75em) and (orientation: portrait) {
+  .bbq {
+    content: 'wide, portrait';
+  }
+}
+
+@media (max-width: 43.75em) and (orientation: portrait) and (monochrome) {
+  .zztop {
+    content: 'wide, portrait, monochrome';
+  }
+}
+
+@media print and (monochrome) {
+  .elp {
+    content: 'monochrome, print';
+  }
+}
+
+@media (min-width: 30em) and (max-width: 40em) {
+  .rhcp {
+    content: 'between 30 and 40ems';
   }
 }
 ```
 
+
 ## License
 
 Licensed under MIT/GPL.
@@ -216,4 +282,4 @@ GPL license:
 http://www.gnu.org/licenses/gpl.html
 
 MIT license:
-http://www.opensource.org/licenses/mit-license.php
+http://www.opensource.org/licenses/mit-license.php

data/lib/breakpoint.rb

@@ -3,8 +3,6 @@ require 'compass'
 Compass::Frameworks.register("breakpoint", :path => "#{File.dirname(__FILE__)}/..")
 
 module Breakpoint
-
-  VERSION = "1.0"
-  DATE = "2012-06-22"
-
+  VERSION = "1.0.1"
+  DATE = "2012-06-27"
 end

data/stylesheets/_breakpoint.scss

@@ -206,23 +206,35 @@ $breakpoint-to-ems:           false       !default;
 }
 
 @function breakpoint-generate($media, $feature, $value, $first: false) {
+  // Media Query string to be returned
   $new-string: "";
-  @if $media == '' and $first == true {
+  
+  // 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 $feature != false {
-      $new-string: #{$media}unquote("(#{$feature}: #{$value})");
+      $new-string: #{$media}unquote("#{$and}(#{$feature}: #{$value})");
     }
     @else {
-      $new-string: #{$media}unquote("(#{$value})");
+      $new-string: #{$media}unquote("#{$and}(#{$value})");
     }
   }
+  
   @else {
     @if $feature != false {
-      $new-string: #{$media}unquote("and (#{$feature}: #{$value})");
+      $new-string: unquote("and (#{$feature}: #{$value})");
     }
     @else {
-      $new-string: #{$media}unquote("and (#{$value})");
+      $new-string: unquote("and (#{$value})");
     }
   }
+  
   @return $new-string;
 }
 

metadata

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