ezy 0.2.0.alpha → 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ecc5a657ba9ce7ab7a6b85269db4ff0ca3f8ffe9
+  data.tar.gz: 8f348367ead3da3f9165770262ffd30dfb24e45d
+SHA512:
+  metadata.gz: dba7608afd2431e094919d09201ea90044dcabde24febff0fe8cdacb05b10c0dedd287073b047c1dc8ae0e3875a66c285a056622d8e35a8ec6d97ac8c7ab69cc
+  data.tar.gz: 0c5d73d8dc8f025b14488a25532c89dd71c161583f2ce81809a5cb939d7b593dd47cb7f677463ab857b6bcdabaad0c3e1fc6315bd637614022f0c88114278e26

data/README.md

@@ -3,97 +3,12 @@ Ezy: The developer's toolbox for responsive websites
 
 My attempt to create a collection of simple-to-use grid helpers and other tools with SCSS and Ruby
 
-Installing Ezy
---------------
+> NOTE: Ezy is now in beta, with only sprites out-of-the-box.
+> Stand by for release of the grid. 
 
-#### 1) Install the gem
+> If you can't wait, you can check out the progress [here](https://github.com/raahede/ezy/tree/grid-alpha).
 
-`gem install ezy`
+Documentation
+-------------
 
-#### 2) Require Ezy in your config.rb
-
-`require "ezy"`
-
-#### 3) Import the part you need in your SCSS
-
-Import all features:
-
-`@import "ezy";`
-
-Import sprites only:
-
-`@import "ezy/sprites";`
-
-Using Ezy
----------
-
-### Sprites
-
-#### 1) Create sprite
-
-Simple use without retina:
-
-    @include make-sprite(
-      $name:            "icons",          // (required) your name to use when calling sprites
-      $folder:          "icon-images"     // (required) folder path relative to image folder
-    );
-
-Simple use with retina:
-
-    @include make-sprite(
-      $name:            "icons",          // (required) your name to use when calling sprites
-      $folder:          "icon-images",    // (required) folder path relative to image folder
-      $folder-retina:   "icon-images@2x"  // (optional) folder path relative to image folder
-    );
-
-Advanced use:
-
-    @include make-sprite(
-      $name:            "icons",          // (required) your name to use when calling sprites
-      $folder:          "icon-images",    // (required) folder path relative to image folder
-      $folder-retina:   "icon-images@2x", // (optional) folder path relative to image folder
-      $spacing:         20px,             // (optional) [default: 0px] spacing between images in compiled sprite
-      $layout:          vertical,         // (optional) [default: vertical] vertical, horizontal, diagonal
-      $position:        0%,               // (optional) [default: 0%] alignment of images in the sprite 
-      $spacing-retina:  40px,             // (optional) [default: $spacing x 2]
-      $layout-retina:   diagonal,         // (optional) [default: $layout]
-      $position-retina: 100%              // (optional) [default: $position]
-    );
-
-#### 2) Use sprite
-
-Simple use: (if a sprite has a retina version, it uses retina as a default)
-
-    .icon-git-fork {
-      @include background-sprite( "icons", "git-fork" ); // using image git-fork.png from images/icon-images/
-    }
-    
-Simple use, force no retina:
-
-    .icon-git-fork {
-      @include background-sprite( "icons", "git-fork", $use-retina: false );
-    }
-    
-Advanced use: 
-
-    .icon-git-fork {
-      @include background-sprite( 
-        $name:          "icons",    // (required) sprite name
-        $image:         "git-fork", // (required) image to use
-        $offset-x:      10px,       // (optional) [default: 0] background offset x
-        $offset-y:      20px,       // (optional) [default: 0] background offset y
-        $use-retina:    true        // (optional) [default: true] wether to use retina on hi-res screens 
-      );
-    }
-
-Building and testing local gem
-------------------------------
-
-#### Build gem ###
-`gem build ezy.gemspec`
-
-#### Install local gem ###
-`gem install --local ezy-[build version].gem`
-
-#### Open installed gem location (Mac) ###
-`open /Users/[username]/.rvm/gems/`
+View documentation here: [raahede.github.io/ezy](http://raahede.github.io/ezy/)

data/VERSION

@@ -1 +1 @@
-0.2.0.alpha
+0.2.0

data/ezy.gemspec

@@ -2,8 +2,8 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.2.0.alpha"
-  s.date = "2013-11-13"
+  s.version = "0.2.0"
+  s.date = "2013-12-08"
 
   # Gem Details
   s.name = "ezy"
@@ -19,7 +19,9 @@ Gem::Specification.new do |s|
   s.files += %w(ezy.gemspec)
   s.files += %w(VERSION)
   s.files += Dir.glob("lib/**/*.*")
-  s.files += Dir.glob("sass/**/*.*")
+  # s.files += Dir.glob("sass/**/*.*")
+  s.files += Dir.glob("sass/_ezy.scss")
+  s.files += Dir.glob("sass/ezy/_sprites.scss")
   s.files += Dir.glob("templates/**/*.*")
   s.files += Dir.glob("test/config.rb")
   s.files += Dir.glob("test/css/**/*.*")
@@ -31,4 +33,4 @@ Gem::Specification.new do |s|
   s.rubygems_version = %q{1.3.6}
   s.add_dependency(%q<compass>, [">= 0.12.2"])
   s.add_dependency(%q<sass>, [">= 3.2.0"])
-end
+end

data/sass/_ezy.scss

@@ -1,6 +1,6 @@
 // ---------------------------------------------------------------------------
 // Partials
 
-@import "ezy/media";
-@import "ezy/grid";
+// @import "ezy/media";
+// @import "ezy/grid";
 @import "ezy/sprites";

data/sass/ezy/_sprites.scss

@@ -8,9 +8,10 @@
 // https://github.com/chriseppstein/compass/issues/897
 
 // ---------------------------------------------------------------------------
-// Global variable for device pixel ratio
+// Setting defaults
 
 $min-device-pixel-ratio: 2 !default;
+$legacy-selector: ".no-media-queries" !default;
 
 // ---------------------------------------------------------------------------
 // Sprite map store
@@ -159,18 +160,34 @@ $sprite-maps: ();
 // 
 // Retina media query mixin
 
-@mixin at-retina( $ratio: 2 ) {
-  @media
-  only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }),
-  only screen and (   min--moz-device-pixel-ratio: #{ $ratio }),
-  only screen and (   -moz-min-device-pixel-ratio: #{ $ratio }),
-  only screen and (    -ms-min-device-pixel-ratio: #{ $ratio }),
-  only screen and (     -o-min-device-pixel-ratio: #{ $ratio }/1),
-  only screen and (        min-device-pixel-ratio: #{ $ratio }),
-  only screen and (                min-resolution: #{ $ratio * 96 }dpi),
-  only screen and (                min-resolution: #{ $ratio }dppx) { 
-    @content;
+@mixin at-retina( $ratio: 2, $query: false ) {
+  @if $query {
+    // Extending retina media query with breakpoint query
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
+    only screen and (   min--moz-device-pixel-ratio: #{ $ratio }) and #{ $query },
+    only screen and (   -moz-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
+    only screen and (    -ms-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
+    only screen and (     -o-min-device-pixel-ratio: #{ $ratio }/1) and #{ $query },
+    only screen and (        min-device-pixel-ratio: #{ $ratio }) and #{ $query },
+    only screen and (                min-resolution: #{ $ratio * 96 }dpi) and #{ $query },
+    only screen and (                min-resolution: #{ $ratio }dppx) and #{ $query } { 
+      @content;
+    }
+  } @else {
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }),
+    only screen and (   min--moz-device-pixel-ratio: #{ $ratio }),
+    only screen and (   -moz-min-device-pixel-ratio: #{ $ratio }),
+    only screen and (    -ms-min-device-pixel-ratio: #{ $ratio }),
+    only screen and (     -o-min-device-pixel-ratio: #{ $ratio }/1),
+    only screen and (        min-device-pixel-ratio: #{ $ratio }),
+    only screen and (                min-resolution: #{ $ratio * 96 }dpi),
+    only screen and (                min-resolution: #{ $ratio }dppx) { 
+      @content;
+    }
   }
+  
 }
 
 // ---------------------------------------------------------------------------
@@ -220,15 +237,15 @@ $sprite-maps: ();
         $clean-up:  $clean-up-retina
       );
     }
+    $sprite-settings: $name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina;
     @if $sprite-maps == () {
-      $sprite-maps: ($name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina);
+      $sprite-maps: ($sprite-settings);
     } @else {
-      $sprite-maps: $sprite-maps, ($name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina);
+      $sprite-maps: $sprite-maps, ($sprite-settings);
     }
     %sprite-placeholder-#{ $name } {
       background-image: sprite-url( $sprite );
       background-repeat: $repeat;
-      // background-position-x: $position;
     }
     %sprite-placeholder-#{ $name }-retina {
       @if $sprite-retina {
@@ -239,9 +256,6 @@ $sprite-maps: ();
           @if $repeat-retina != $repeat { 
             background-repeat: $repeat-retina;
           }
-          // @if $position-retina != $position { 
-          //   background-position-x: $position-retina;
-          // }
         }
       }
     }
@@ -260,7 +274,9 @@ $sprite-maps: ();
   $offset-y: 0,           // background offset y (optional)
   $use-retina: true,      // wether to use retina on hi-res screens (optional)
   $offset-x-retina: null, // background offset x on retina (optional)
-  $offset-y-retina: null  // background offset y on retina (optional)
+  $offset-y-retina: null, // background offset y on retina (optional)
+  $at-breakpoint: false,  // media query
+  $legacy-support: false  // fallback for media query
 ) {
 
   @if $offset-x-retina == null { $offset-x-retina: $offset-x; }
@@ -272,27 +288,63 @@ $sprite-maps: ();
     $retina-map: return-sprite-map( $name, $retina: true );
   }
 
+  // Catching media breakpoints from set-breakpoint
+  @if type-of( $at-breakpoint ) == "list" {
+    @if ( not $legacy-support ) and length( $at-breakpoint ) > 1 {
+      // Inheriting legacy support setting from set-breakpoint
+      $legacy-support: nth( $at-breakpoint, 2 );
+    }
+    $at-breakpoint: nth( $at-breakpoint, 1 );
+  }
+
   @if $map and $image {
     $pos: sprite-position($map, $image);
     $pos-x: return-offset( nth( $pos, 1 ), $offset-x, "$offset-x must be a number, a pixel value or a percentage!" );
     $pos-y: return-offset( nth( $pos, 2 ), $offset-y, "$offset-y must be a number, a pixel value or a percentage!" );
-    background-position: $pos-x $pos-y;
+    
+    @if $at-breakpoint {
+      @media #{ $at-breakpoint } {
+        background-position: $pos-x $pos-y;
+        // Settings that would usually be set by extending %sprite-placeholder-#{ $name }
+        // @extend is not possible from within a media query
+        background-image: sprite-url( $map );
+        background-repeat: return-sprite-setting( $name, 6 );
+      }
+    } @else {
+      background-position: $pos-x $pos-y;
+      @extend %sprite-placeholder-#{ $name };
+    }
+
+    @if $legacy-support {
+      #{ $legacy-selector } & {
+        background-position: $pos-x $pos-y;
+        @extend %sprite-placeholder-#{ $name };
+      }
+    }
+    
     @if $retina-map {
-      @include at-retina( $min-device-pixel-ratio ) {
+      @include at-retina( $min-device-pixel-ratio, $at-breakpoint ) {
         /* Retina sprite */
         $pos: sprite-position($retina-map, $image);
         $pos-x: return-offset( nth( $pos, 1 )/2, $offset-x-retina, "$offset-x-retina must be a number, a pixel value or a percentage!" );
         $pos-y: return-offset( nth( $pos, 2 )/2, $offset-y-retina, "$offset-y-retina must be a number, a pixel value or a percentage!" );
         background-position: $pos-x $pos-y;
+        @if $at-breakpoint {
+          // Settings that would usually be set by extending %sprite-placeholder-#{ $name }
+          // @extend is not possible from within a media query
+          background-image: sprite-url( $retina-map );
+          background-size: image-width( sprite-path( $retina-map ) )/2 auto;
+          @if return-sprite-setting( $name, 7 ) != return-sprite-setting( $name, 6 ) { 
+            background-repeat: return-sprite-setting( $name, 7 );
+          }
+        }
+      }
+      @if ( not $at-breakpoint ) {
+        // Set to optional because placeholder only exists if a retina sprite is set
+        @extend %sprite-placeholder-#{ $name }-retina !optional;
       }
     }
   }
-
-  @extend %sprite-placeholder-#{ $name };
-  @if $use-retina {
-    // Set to optional because placeholder only exists if a retina sprite is set
-    @extend %sprite-placeholder-#{ $name }-retina !optional;
-  }
 }
 
 

data/test/css/sprites/layout.css

@@ -1,12 +1,12 @@
 .classic {
-  background-image: url('../../img/test-layout.png?19551384282552');
+  background-image: url('../../img/test-layout.png?15501385736652');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .classic {
     /* Retina sprite */
-    background-image: url('../../img/test-layout@2x.png?19551384282552');
+    background-image: url('../../img/test-layout@2x.png?15501385736652');
     background-size: 718px auto;
   }
 }

data/test/css/sprites/position.css

@@ -3,14 +3,14 @@
  * Compiled 2x sprite has all images aligned to the right
  */
 .vertical {
-  background-image: url('../../img/test-position.png?19551384282552');
+  background-image: url('../../img/test-position.png?15501385736652');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .vertical {
     /* Retina sprite */
-    background-image: url('../../img/test-position@2x.png?19551384282552');
+    background-image: url('../../img/test-position@2x.png?15501385736652');
     background-size: 281px auto;
   }
 }
@@ -20,14 +20,14 @@
  * Compiled 2x sprite has all images aligned to the bottom
  */
 .horizontal {
-  background-image: url('../../img/test-position-alt.png?19551384282552');
+  background-image: url('../../img/test-position-alt.png?15501385736652');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .horizontal {
     /* Retina sprite */
-    background-image: url('../../img/test-position-alt@2x.png?19551384282552');
+    background-image: url('../../img/test-position-alt@2x.png?15501385736652');
     background-size: 421px auto;
   }
 }

data/test/css/sprites/repeat.css

@@ -1,12 +1,12 @@
 .meassure-1, .meassure-2, .meassure-3 {
-  background-image: url('../../img/test-repeat.png?19551384282552');
+  background-image: url('../../img/test-repeat.png?15501385736652');
   background-repeat: repeat-x;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .meassure-1, .meassure-2, .meassure-3 {
     /* Retina sprite */
-    background-image: url('../../img/test-repeat@2x.png?19551384282552');
+    background-image: url('../../img/test-repeat@2x.png?15501385736652');
     background-size: 378px auto;
     background-repeat: no-repeat;
   }

data/test/css/sprites/resolution.css

@@ -2,14 +2,14 @@
  * Min device pixel ratio changed to 1.7
  */
 .classic {
-  background-image: url('../../img/test-retina.png?19551384282552');
+  background-image: url('../../img/test-retina.png?15501385736652');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.7), only screen and (min--moz-device-pixel-ratio: 1.7), only screen and (-moz-min-device-pixel-ratio: 1.7), only screen and (-ms-min-device-pixel-ratio: 1.7), only screen and (-o-min-device-pixel-ratio: 1.7 / 1), only screen and (min-device-pixel-ratio: 1.7), only screen and (min-resolution: 163.2dpi), only screen and (min-resolution: 1.7dppx) {
   .classic {
     /* Retina sprite */
-    background-image: url('../../img/test-retina@2x.png?19551384282552');
+    background-image: url('../../img/test-retina@2x.png?15501385736652');
     background-size: 152px auto;
   }
 }

data/test/css/sprites/responsive.css

@@ -0,0 +1,69 @@
+.classic, .no-media-queries .indy {
+  background-image: url('../../img/test-retina.png?15511385736703');
+  background-repeat: no-repeat;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  .classic {
+    /* Retina sprite */
+    background-image: url('../../img/test-retina@2x.png?15511385736703');
+    background-size: 152px auto;
+  }
+}
+
+.classic {
+  background-position: 0 -281px;
+  width: 152px;
+  height: 135px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  .classic {
+    /* Retina sprite */
+    background-position: 0 -140px;
+  }
+}
+
+.indy {
+  width: 128px;
+  height: 140px;
+}
+@media (min-width: 400px) {
+  .indy {
+    background-position: 0 -141px;
+    background-image: url('../../img/test-retina.png?15511385736703');
+    background-repeat: no-repeat;
+  }
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 400px), only screen and (min-device-pixel-ratio: 2) and (min-width: 400px), only screen and (min-resolution: 192dpi) and (min-width: 400px), only screen and (min-resolution: 2dppx) and (min-width: 400px) {
+  .indy {
+    /* Retina sprite */
+    background-position: 0 0;
+    background-image: url('../../img/test-retina@2x.png?15511385736703');
+    background-size: 152px auto;
+  }
+}
+@media (min-width: 960px) {
+  .indy {
+    background-position: 0 -281px;
+    background-image: url('../../img/test-retina.png?15511385736703');
+    background-repeat: no-repeat;
+  }
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-ms-min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 960px), only screen and (min-device-pixel-ratio: 2) and (min-width: 960px), only screen and (min-resolution: 192dpi) and (min-width: 960px), only screen and (min-resolution: 2dppx) and (min-width: 960px) {
+  .indy {
+    /* Retina sprite */
+    background-position: 0 -140px;
+    background-image: url('../../img/test-retina@2x.png?15511385736703');
+    background-size: 152px auto;
+  }
+}
+@media (min-width: 1024px) {
+  .indy {
+    background-position: 0 0;
+    background-image: url('../../img/test-retina.png?15511385736703');
+    background-repeat: no-repeat;
+  }
+}
+.no-media-queries .indy {
+  background-position: 0 0;
+}

data/test/css/sprites/retina.css

@@ -1,12 +1,12 @@
 .classic, .indy, .alien {
-  background-image: url('../../img/test-retina.png?19551384282552');
+  background-image: url('../../img/test-retina.png?15501385736653');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .classic, .indy {
     /* Retina sprite */
-    background-image: url('../../img/test-retina@2x.png?19551384282552');
+    background-image: url('../../img/test-retina@2x.png?15501385736653');
     background-size: 152px auto;
   }
 }

data/test/css/sprites/simple.css

@@ -1,5 +1,5 @@
 .classic, .indy {
-  background-image: url('../../img/test-simple.png?19551384282552');
+  background-image: url('../../img/test-simple.png?15501385736653');
   background-repeat: no-repeat;
 }
 

data/test/css/sprites/spacing.css

@@ -1,12 +1,12 @@
 .classic {
-  background-image: url('../../img/test-spacing.png?19551384282552');
+  background-image: url('../../img/test-spacing.png?15501385736653');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .classic {
     /* Retina sprite */
-    background-image: url('../../img/test-spacing@2x.png?19551384282552');
+    background-image: url('../../img/test-spacing@2x.png?15501385736653');
     background-size: 159px auto;
   }
 }

data/test/html/sprites/responsive.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Sprite: responsive</title>
+
+    <meta name="description" content="Ezy Grid Demo">
+    <meta name="viewport" content="width=device-width">
+
+    <link href="../../css/sprites/responsive.css" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="classic">&nbsp;</div>
+    <div class="indy">&nbsp;</div>
+    <div class="alien">&nbsp;</div>
+  </body>
+</html>

data/test/scss/sprites/responsive.scss

@@ -0,0 +1,52 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy/media";
+@import "../../../sass/ezy/sprites";
+
+// ---------------------------------------------------------------------------
+// Defining media query breakpoints
+
+$breakpoint-small:  set-breakpoint( $max: 580px );
+$breakpoint-medium: set-breakpoint( $min: 960px );
+$breakpoint-large:  set-breakpoint( $min: 1024px, $legacy-support: true ); // Support for legacy browsers
+
+
+// ---------------------------------------------------------------------------
+// Create sprite
+
+@include make-sprite(
+  $name: "base",
+  $folder: "test-retina",
+  $folder-retina: "test-retina@2x"
+);
+
+// ---------------------------------------------------------------------------
+// Use sprite
+
+.classic {
+  @include background-sprite( "base", "classic" );
+  width: 152px;
+  height: 135px;
+}
+
+.indy {
+  @include background-sprite(
+    $name: "base",
+    $image: "indy",
+    $at-breakpoint: "(min-width: 400px)"
+  );
+  @include background-sprite(
+    $name: "base",
+    $image: "classic",
+    $at-breakpoint: $breakpoint-medium
+  );
+  @include background-sprite(
+    $name: "base",
+    $image: "alien",
+    $use-retina: false,
+    $at-breakpoint: $breakpoint-large
+  );
+  width: 128px;
+  height: 140px;
+}

metadata

@@ -1,73 +1,55 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: ezy
-version: !ruby/object:Gem::Version 
-  hash: -933531639
-  prerelease: 6
-  segments: 
-  - 0
-  - 2
-  - 0
-  - alpha
-  version: 0.2.0.alpha
+version: !ruby/object:Gem::Version
+  version: 0.2.0
 platform: ruby
-authors: 
+authors:
 - Frej Raahede Nielsen
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2013-11-13 00:00:00 Z
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2013-12-08 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: compass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 43
-        segments: 
-        - 0
-        - 12
-        - 2
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
         version: 0.12.2
   type: :runtime
-  version_requirements: *id001
-- !ruby/object:Gem::Dependency 
-  name: sass
   prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 15
-        segments: 
-        - 3
-        - 2
-        - 0
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
         version: 3.2.0
   type: :runtime
-  version_requirements: *id002
-description: A collection of SCSS tools for creating responsive websites. Includes a simple but powerful grid framework, media query helpers and sprite helpers.
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+description: A collection of SCSS tools for creating responsive websites. Includes
+  a simple but powerful grid framework, media query helpers and sprite helpers.
 email: frejraahede@gmail.com
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - README.md
 - ezy.gemspec
 - VERSION
 - lib/ezy.rb
 - sass/_ezy.scss
-- sass/ezy/_clearfix.scss
-- sass/ezy/_functions.scss
-- sass/ezy/_grid.scss
-- sass/ezy/_media.scss
 - sass/ezy/_sprites.scss
 - templates/project/_settings.scss
 - templates/project/index.html
@@ -84,6 +66,7 @@ files:
 - test/css/sprites/position.css
 - test/css/sprites/repeat.css
 - test/css/sprites/resolution.css
+- test/css/sprites/responsive.css
 - test/css/sprites/retina.css
 - test/css/sprites/simple.css
 - test/css/sprites/size.css
@@ -98,11 +81,13 @@ files:
 - test/scss/sprites/position.scss
 - test/scss/sprites/repeat.scss
 - test/scss/sprites/resolution.scss
+- test/scss/sprites/responsive.scss
 - test/scss/sprites/retina.scss
 - test/scss/sprites/simple.scss
 - test/scss/sprites/size.scss
 - test/scss/sprites/spacing.scss
 - test/html/sprites/repeat.html
+- test/html/sprites/responsive.html
 - test/html/sprites/retina.html
 - test/html/sprites/simple.html
 - test/img/test-layout/alien.png
@@ -144,39 +129,27 @@ files:
 - test/img/test-spacing@2x/classic.png
 - test/img/test-spacing@2x/indy.png
 homepage: http://github.com/raahede/
-licenses: 
+licenses:
 - MIT
+metadata: {}
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+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: 25
-      segments: 
-      - 1
-      - 3
-      - 1
-      version: 1.3.1
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
 requirements: []
-
 rubyforge_project: 
-rubygems_version: 1.8.25
+rubygems_version: 2.1.11
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: The developer's toolbox for responsive websites
 test_files: []
-

data/sass/ezy/_clearfix.scss

@@ -1,25 +0,0 @@
-/* -------------------------------------------------------------------- *
- *  Micro Clearfix 
- *  http://nicolasgallagher.com/micro-clearfix-hack/
- */
-
-%clearfix:before,
-%clearfix:after {
-  content: " ";
-  display: table;
-}
-
-%clearfix:after {
-  clear: both;
-}
-
-
-%clearfix {
-  /**
-   * For IE 6/7 only
-   * Include this rule to trigger hasLayout and contain floats.
-   */
-  *zoom: 1;
-}
-
-/* -------------------------------------------------------------------- */

data/sass/ezy/_functions.scss

@@ -1,11 +0,0 @@
-
-// ---------------------------------------------------------------------------
-// @function percentage-round
-// 
-// Similar to the SASS percentage() function, but rounds down to 2 decimals
-// $columns :   Fraction to convert to percentage
-// @return  :   Percentage value rounded down to 2 decimals
-
-@function percentage-round( $value ) {
-    @return floor( percentage( $value ) * 100 ) / 100;
-}

data/sass/ezy/_grid.scss

@@ -1,279 +0,0 @@
-// ---------------------------------------------------------------------------
-// Importing dependencies
-
-@import "functions";
-@import "clearfix";
-
-// ---------------------------------------------------------------------------
-// Mandatory grid settings
-// Defaults: can be overridden
-
-$column-width:            4em       !default;
-$gutter-width:            1em       !default;
-$default-gutter-property: "margin"  !default;
-$total-columns:           12        !default;
-$is-fluid:                true      !default;
-
-// ---------------------------------------------------------------------------
-// Variables used in grid context
-
-$grid-init: false;
-$context-warn: "You must set $context if $is-fluid is set to true.";
-$init-gutter-property: $default-gutter-property;
-
-// ---------------------------------------------------------------------------
-// @function layout-width
-// 
-// Returns width based on given number of culumns
-// $columns :   Number of columns to calculate width from
-// @return  :   Width in the same unit as $column-width and $gutter-width
-
-@function layout-width( $columns ) {
-  @if comparable( $column-width, $gutter-width ) {
-    @return $columns * ( $column-width + $gutter-width ) - $gutter-width;
-  } @else {
-    @warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
-  }
-}
-
-// ---------------------------------------------------------------------------
-// @function context-width
-// 
-// Returns width based on given number of culumns, plus an extra gutter
-// Used for % calculations in the grid
-// $columns :   Number of columns to calculate width from
-// @return  :   Width in the same unit as $column-width and $gutter-width
-
-@function context-width( $columns ) {
-  @return layout-width( $columns ) + $gutter-width;
-}
-
-// ---------------------------------------------------------------------------
-// @function span-column-width
-// 
-// Same as layout-width( $columns ), but renamed for better context awareness
-
-@function span-column-width( $columns ) {
-  @return layout-width( $columns );
-}
-
-// ---------------------------------------------------------------------------
-// @function gutter
-// 
-// Returns gutter in the same unit as $gutter-width if grid is static
-// Returns gutter as a percentage of the context if grid is fluid
-// $context :   Number of columns in the current context. 
-//          :   If set to false, the returned value is as in static grid 
-// @return  :   Width as $gutter-width or as a percentage of the context
-
-@function gutter(
-  $context: false
-  ) {
-  @if $is-fluid and $context {
-    @return ( percentage-round( ( $gutter-width / 2 ) / context-width( $context ) ) );
-  } @else if $is-fluid {
-    @warn $context-warn;
-  } @else {
-    @return $gutter-width / 2; 
-  }
-}
-
-// ---------------------------------------------------------------------------
-// @mixin gutters
-// 
-// Sets gutters using the gutter( $context ) function
-// $context           :   Number of columns in the current context. 
-//                    :   Only mandatory if grid is fluid 
-// $gutter-property   :   Set to "margin" or "padding"
-
-@mixin gutters( 
-  $context: false,
-  $property: false
-  ) {
-  @if (not $property) {
-    $property: $default-gutter-property;
-  }
-  @if $property == "margin" or $property == "padding" {
-    float: left;
-    #{ $property }: {
-      left: gutter( $context );
-      right: gutter( $context );
-    }
-  } @else {
-    @warn "$gutter-property must be set to either 'margin' or 'padding'";
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Grid master placeholder selector
-// Adds cleafix and centers page in browser
-
-%ezy-master {
-  @extend %clearfix;
-  margin: {
-    left: auto;
-    right: auto;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// @mixin master
-// 
-// Sets width on page. If the grid is fluid, it's set as a max-width
-// Extends the grid master placeholder selector
-// $context           :   Number of columns in the current context. 
-
-@mixin master(
-  $context
-  ) {
-  @if $is-fluid {
-    max-width: layout-width( $context );
-  } @else {
-    width: layout-width( $context );
-  }
-  @extend %ezy-master;
-}
-
-// ---------------------------------------------------------------------------
-// Grid container placeholder selector
-// Adds cleafix
-
-%ezy-container {
-  @extend %clearfix;
-}
-
-// ---------------------------------------------------------------------------
-// @mixin container
-// 
-// Sets width on page. If the grid is fluid, it's set as a max-width
-// Extends the grid master placeholder selector
-// $context           :   Number of columns in the current context
-//                    :   Only mandatory if grid is fluid
-// $at-breakpoint     :   Set to true if mixin is called within a media query
-//                    :   Avoids SASS compillation errors from extending within
-//                    :   a media query
-
-@mixin container(
-  $context: false,
-  $at-breakpoint: false
-  ) {
-  $pullout: -( $gutter-width )/2;
-  @if $is-fluid and $context {
-    $pullout: -( percentage-round( $gutter-width / layout-width( $context ) ) )/2;
-  } @else if $is-fluid {
-    @warn $context-warn;
-  }
-  margin: {
-    left: $pullout;
-    right: $pullout;
-  }
-  @if (not $at-breakpoint) {
-    @extend %ezy-container;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// @mixin grid-init
-// 
-// Prints out placeholder selectors used with columns. Helps reduce the CSS output.
-// 
-// Should be called after setting grid variables:
-// ----------------
-// $column-width
-// $gutter-width
-// $gutter-property
-// $total-columns
-// ----------------
-
-@mixin grid-init() {
-  $grid-init: true;
-  $init-gutter-property: $default-gutter-property;
-  @if $is-fluid {
-    @for $i from 1 through $total-columns {
-      %ezy-column-#{ $i } {
-        @include gutters( $i );
-      }
-    }
-  } @else {
-    %ezy-column {
-      @include gutters;
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// @mixin span-columns
-// 
-// Sets width and gutter on columns
-// Uses @extend for gutters outside media queries if grid-init() has been called
-// $columns           :   Number of columns to span
-// $context           :   Number of columns in the current context
-//                    :   Only mandatory if grid is fluid
-// $at-breakpoint     :   Set to true if mixin is called within a media query
-//                    :   Avoids SASS compillation errors from extending within
-//                    :   a media query
-// $gutter-property   :   Overrides the global $gutter-property
-
-@mixin span-columns(
-  $columns,
-  $context: false,
-  $at-breakpoint: false,
-  $gutter-property: false
-  ) {
-  $width: span-column-width( $columns );
-  @if $is-fluid and $context {
-  /* Spanning #{ $columns } of #{ $context } columns */
-    $context-width: context-width( $context );
-    $pct-width: percentage-round( $width / $context-width );
-    width: $pct-width;
-  } @else {
-  /* Spanning #{ $columns } columns */
-    width: $width;
-  }
-
-  @if $gutter-property and $gutter-property != $default-gutter-property {
-
-    @if $is-fluid and $context {
-      @include gutters( $context, $gutter-property );
-
-    } @else if ( not $is-fluid ) {
-      @include gutters( $property: $gutter-property );
-
-    } @else if $is-fluid and ( not $context ) {
-      @warn $context-warn;
-    }
-
-  } @else if $is-fluid and $context {
-
-    @if $at-breakpoint or $init-gutter-property != $default-gutter-property {
-      @include gutters( $context );
-
-    } @else if ( $total-columns < $context ) {
-      @include gutters( $context );
-      @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
-
-    } @else if ( not $grid-init ) {
-      @include gutters( $context );
-      @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
-      
-    } @else {
-      @extend %ezy-column-#{ $context };
-    }
-
-
-  } @else if $is-fluid { // $context not set
-
-    @warn $context-warn;
-
-  } @else if $grid-init and $init-gutter-property == $default-gutter-property { // Grid is static
-      @extend %ezy-column;
-
-  } @else {
-    @include gutters( $context );
-
-    @if (not $grid-init) { 
-      @warn "Include grid-init() after setting $gutter-width for cleaner CSS output."; 
-    }
-  }
-}
-

data/sass/ezy/_media.scss

@@ -1,48 +0,0 @@
-
-$legacy-selector: ".no-media-queries" !default;
-
-@function set-breakpoint(
-  $min: false,
-  $max: false,
-  $custom: false,
-  $legacy-support: false
-  ) {
-
-  @if (not $min) and (not $max) and (not $custom) {
-    @warn "Either $min, $max, or $custom must be defined for set-breakpoint to work.";
-  }
-
-  @if $min and $max {
-    // Both $min and $max
-    @return "(min-width: #{ $min }) and (max-width: #{ $max })", $legacy-support;
-  } @else {
-    @if $min and (not $max) {
-      // Min only:
-      @return "(min-width: #{ $min })", $legacy-support;
-    }
-    @if $max and (not $min) {
-      // Max only:
-      @return "(max-width: #{ $max })", $legacy-support;
-    } @else {
-      // Custom:
-      @return $custom, $legacy-support;
-    }
-  }
-}
-
-@mixin at-breakpoint( 
-  $breakpoint,
-  $legacy-support: false
-  ) {
-  @media #{ nth( $breakpoint, 1 ) } {
-    @content;
-  }
-  @if $legacy-support or nth( $breakpoint, 2 ) {
-    #{ $legacy-selector } & {
-      /* Fallback for browsers not supporting media queries */
-      @content;
-    }
-  }
-}
-
-