breakpoint 0.2 → 0.3

data/CHANGELOG.markdown

@@ -1,5 +1,9 @@
 # Changelog
 
+## 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.
+
 ## 0.2 - May 24, 2012
 * Converted from Sass to SCSS
 * Converted README examples from Sass to SCSS

data/README.markdown

@@ -2,28 +2,53 @@
 
 **Really simple media queries in Sass**
 
+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.
 
-## Setup
+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.
+* 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.
+
+## 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!
+
+## Installation
+
+`gem install breakpoint`
 
-```sass
-@import "breakpoint"
+#### If creating a new project
+`compass create <my_project> -r breakpoint`
 
+#### If adding to existing project, in config.rb
+`require 'breakpoint`
+
+#### Import the breakpoint partial at the top of your working file
+`@import "breakpoint";`
+
+
+## Setup
+
+```scss
 // create $breakpoint variables like so
 // assume $breakpoint-default-feature if only a number
-$breakpoint1: 500px
-$breakpoint2: 30em
+$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 and a feature
-$breakpoint4: 300px 700px height
+$breakpoint3: 500px 700px;
+// set min/max of feature if there are two numbers
+$breakpoint4: 300px 700px 'height';
 // if one value is a string, assume a feature/value pair
-$breakpoint5: min-width 700px
-$breakpoint6: max-width 700px
+$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
+$breakpoint7: max-width 700px, orientation portrait;
 // handle one-sided features (ie. monochrome)
-$breakpoint8: max-width 700px, orientation portrait, monochrome
-$breakpoint9: monochrome
+$breakpoint8: max-width 700px, orientation portrait, monochrome;
+$breakpoint9: monochrome;
+$breakpoint10: 2 device-pixel-ratio;
 ```
 
 
@@ -47,11 +72,6 @@ Call the mixin and pass one of your breakpoint variables. You can also call it w
     content: 'baz';
   }
 }
-.tgif {
- @include breakpoint($breakpoint4) {
-   content: 'tgif';
- }
-}
 .omg {
   @include breakpoint($breakpoint5) {
     content: 'omg';
@@ -87,6 +107,16 @@ Call the mixin and pass one of your breakpoint variables. You can also call it w
     content: 'rhcp';
   }
 }
+.tgif {
+ @include breakpoint($breakpoint4) {
+   content: 'tgif';
+ }
+}
+.omgdpr {
+ @include breakpoint($breakpoint10) {
+  content: 'omgdpr';
+ }
+}
 ```
 
 Example generated CSS
@@ -110,12 +140,6 @@ Example generated CSS
   }
 }
 
-@media screen and (min-height: 300px) and (max-height: 700px) {
-  .tgif {
-    content: "tgif";
-  }
-}
-
 @media screen and (min-width:  700px) {
   .omg {
     content: "omg";
@@ -157,24 +181,19 @@ Example generated CSS
     content: "rhcp";
   }
 }
-```
-
-### Installation
-
-  0. [Install Sass and Compass](http://compass-style.org/install/), if you haven't already.
-  1. **Terminal**: `gem install breakpoint`
-  2. Add `require 'breakpoint'` in Compass's config.rb file
-
-
-
-
-## Requirements
-
-- [Sass](http://sass-lang.com/)
-- [Compass](http://compass-style.org/)
-
 
+@media screen and (min-height: 300px) and (max-height: 700px) {
+  .tgif {
+    content: "tgif";
+  }
+}
 
+@media screen and (resolution: 192dpi) {
+  .omgdpr {
+    content: "omgdpr";
+  }
+}
+```
 
 ## License
 
@@ -184,5 +203,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

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

data/stylesheets/_breakpoint.scss

@@ -32,7 +32,7 @@ $breakpoint-default-feature: min-width !default;
   // Feature/Value Placeholders
   $feature:               false !default;
   $value:                 false !default;
-  // Prefixed Queries
+  // 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;
@@ -53,18 +53,13 @@ $breakpoint-default-feature: min-width !default;
     @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)) {
-        // Device Pixel Ratio is fracking weird, need to handle it three different ways
+        // 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' {
-          // Webkit
-          $webkit-query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "-webkit-min-#{nth($breakpoint, 3)}");
-          $webkit-query-string: breakpoint-concatenate($webkit-query-string, nth($breakpoint, 2), "-webkit-min-#{nth($breakpoint, 3)}");
-          // Mozilla
-          $moz-query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "min--moz-#{nth($breakpoint, 3)}");
-          $moz-query-string: breakpoint-concatenate($moz-query-string, nth($breakpoint, 2), "max--moz-#{nth($breakpoint, 3)}");
-          // Opera
-          // remove opera support for now.
-          // $o-query-string: breakpoint-concatenate($query-string, '#{numerator(nth($breakpoint, 1))}/#{denominator(nth($breakpoint, 1))}', "-o-min-#{nth($breakpoint, 3)}");
-          // $o-query-string: breakpoint-concatenate($o-query-string, '#{numerator(nth($breakpoint, 2))}/#{denominator(nth($breakpoint, 2))}', "-o-max-#{nth($breakpoint, 3)}");
+          $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)}");
@@ -77,8 +72,6 @@ $breakpoint-default-feature: min-width !default;
         $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 1), "min-width");
         $query-string: breakpoint-concatenate($query-string, nth($breakpoint, 2), "max-width");
       }
-
-
     }
     @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
@@ -91,17 +84,26 @@ $breakpoint-default-feature: min-width !default;
         $feature: nth($breakpoint, 2);
         $value: nth($breakpoint, 1);
       }
-      // If the feature is device-pixel-ratio, it's gonna be weird
+      // 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' {
-        // Webkit
-        $webkit-query-string: breakpoint-concatenate($query-string, $value, "-webkit-#{$feature}");
-        // Mozilla
-        $moz-query-string: breakpoint-concatenate($query-string, $value, "-moz-#{$feature}");
-        // Opera
-        // remove opera support for now.
-        // $o-query-string: breakpoint-concatenate($query-string, '#{numerator($value)}/#{denominator($value)}', "-o-#{$feature}");
+        $value: 96 * $value * 1dpi;
+        $feature: 'resolution';
+        $query-string: breakpoint-concatenate($query-string, $value, $feature);
+      }
+      @else if $feature == 'min-device-pixel-ratio' {
+        $value: 96 * $value * 1dpi;
+        $feature: 'min-resolution';
+        $query-string: breakpoint-concatenate($query-string, $value, $feature);
+      }
+      @else if $feature == 'max-device-pixel-ratio' {
+        $value: 96 * $value * 1dpi;
+        $feature: 'max-resolution';
+        $query-string: breakpoint-concatenate($query-string, $value, $feature);
+      }
+      @else {
+        $query-string: breakpoint-concatenate($query-string, $value, $feature);
       }
-      $query-string: breakpoint-concatenate($query-string, $value, $feature);
     }
     @else if type-of(nth($breakpoint, 1)) == list {
       // for multidimensional lists, assume each item is a feature value pair
@@ -121,6 +123,7 @@ $breakpoint-default-feature: min-width !default;
   @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;
@@ -136,12 +139,11 @@ $breakpoint-default-feature: min-width !default;
       @content;
     }
   }
-  // remove opera support for now.
-  // @if $o-query-string {
-  //   @media #{$o-query-string} {
-  //     @content;
-  //   }
-  // }
+   @if $o-query-string {
+     @media #{$o-query-string} {
+       @content;
+     }
+   }
 }
 
 @function breakpoint-concatenate($query-string, $new-value, $feature: $breakpoint-default-feature) {

metadata

@@ -1,12 +1,11 @@
 --- !ruby/object:Gem::Specification 
 name: breakpoint
 version: !ruby/object:Gem::Version 
-  hash: 15
-  prerelease: 
+  prerelease: false
   segments: 
   - 0
-  - 2
-  version: "0.2"
+  - 3
+  version: "0.3"
 platform: ruby
 authors: 
 - Mason Wendell
@@ -15,17 +14,16 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-05-24 00:00:00 Z
+date: 2012-06-21 00:00:00 -04:00
+default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
-    none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 45
         segments: 
         - 0
         - 12
@@ -48,6 +46,7 @@ files:
 - CHANGELOG.markdown
 - lib/breakpoint.rb
 - stylesheets/_breakpoint.scss
+has_rdoc: true
 homepage: http://thecodingdesigner.com
 licenses: []
 
@@ -57,20 +56,16 @@ rdoc_options: []
 require_paths: 
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 
-  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: 3
       segments: 
       - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
-  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: 23
       segments: 
       - 1
       - 3
@@ -79,7 +74,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.8.17
+rubygems_version: 1.3.6
 signing_key: 
 specification_version: 3
 summary: An easy to use system for writing and managing media queries.