ezy 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5e4a4d640319b0dd69de17325d9fbe8c5eb20019
-  data.tar.gz: ac43b0b47043148d7d7fe98a30294ef9f20b1aa0
+  metadata.gz: 2db028b1b54ee4478a578c73861f6a2774c0c7e7
+  data.tar.gz: 8bdc70fb9e4bb8e24e8899c58cd79937d60887aa
 SHA512:
-  metadata.gz: db2f98065fe821b90d9dbdef892a3f296e421fa22543b6847a4ebf1bd4dfeef60fc6c61524b1f04368939b43f75bb895120302e8feb1c8df42463a1227612632
-  data.tar.gz: 1a04b58d62f47d62a21e4c971d97834cbe8cd98afaeac21cb938b4493c418a9d043ed3cdf7aff77fff5dede1400d8820b45b983ace470e6e1c326f6e63004207
+  metadata.gz: b893755fa359ce97acde2510107a7bc8251b96d946e0ec4cb1823a2d681deecbc83906420f7e6a2614342add619cb467e7c24d045cf6bdeb89aef7bf05a96086
+  data.tar.gz: 7edaf0a3bdd6578ae0886bc148ce1324168ecee35f0b688d08dfba33f7eed87fcfd69c3b992057cb5a759fbdbfcbd44f9654fdbb89f648c611134163a178d52f

data/README.md

@@ -24,6 +24,10 @@ Import grid only:
 
 `@import "ezy/grid";`
 
+Import media queries only:
+
+`@import "ezy/media";`
+
 Import sprites only:
 
 `@import "ezy/sprites";`
@@ -82,9 +86,9 @@ Advanced use:
       @include background-sprite( 
         $name:          "icons",    // (required) sprite name
         $image:         "git-fork", // (required) image to use
-        $use-retina:    true,       // (optional) wether to use retina on hi-res screens 
         $offset-x:      10px,       // (optional) background offset x
-        $offset-y:      20px        // (optional) background offset y
+        $offset-y:      20px,       // (optional) background offset y
+        $use-retina:    true        // (optional) wether to use retina on hi-res screens 
       );
     }
 

data/VERSION

@@ -1 +1 @@
-0.0.5
+0.0.6

data/ezy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.0.6"
+  s.version = "0.0.7"
   s.date = "2013-11-12"
 
   # Gem Details
@@ -21,7 +21,11 @@ Gem::Specification.new do |s|
   s.files += Dir.glob("lib/**/*.*")
   s.files += Dir.glob("sass/**/*.*")
   s.files += Dir.glob("templates/**/*.*")
-  s.files += Dir.glob("test/**/*.*")
+  s.files += Dir.glob("test/config.rb")
+  s.files += Dir.glob("test/css/**/*.*")
+  s.files += Dir.glob("test/scss/**/*.*")
+  s.files += Dir.glob("test/html/**/*.*")
+  s.files += Dir.glob("test/img/test-*/*.*")
 
   # Gem Bookkeeping
   s.rubygems_version = %q{1.3.6}

data/sass/ezy/_sprites.scss

@@ -222,7 +222,7 @@ $sprite-maps: ();
     %sprite-placeholder-#{ $name } {
       background-image: sprite-url( $sprite );
       background-repeat: $repeat;
-      background-position-x: $position;
+      // background-position-x: $position;
     }
     %sprite-placeholder-#{ $name }-retina {
       @if $sprite-retina {
@@ -233,9 +233,9 @@ $sprite-maps: ();
           @if $repeat-retina != $repeat { 
             background-repeat: $repeat-retina;
           }
-          @if $position-retina != $position { 
-            background-position-x: $position-retina;
-          }
+          // @if $position-retina != $position { 
+          //   background-position-x: $position-retina;
+          // }
         }
       }
     }
@@ -252,8 +252,14 @@ $sprite-maps: ();
   $image,                 // image to use
   $offset-x: 0,           // background offset x (optional)
   $offset-y: 0,           // background offset y (optional)
-  $use-retina: true       // wether to use retina on hi-res screens (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)
 ) {
+
+  @if $offset-x-retina == null { $offset-x-retina: $offset-x; }
+  @if $offset-y-retina == null { $offset-y-retina: $offset-y; }
+
   $map: return-sprite-map( $name );
   $retina-map: $use-retina;
   @if $use-retina {
@@ -269,8 +275,8 @@ $sprite-maps: ();
       @include at-retina {
         /* Retina sprite */
         $pos: sprite-position($retina-map, $image);
-        $pos-x: return-offset( nth( $pos, 1 )/2, $offset-x, "$offset-x must be a number, a pixel value or a percentage!" );
-        $pos-y: return-offset( nth( $pos, 2 )/2, $offset-y, "$offset-y must be a number, a pixel value or a percentage!" );
+        $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;
       }
     }

data/test/css/sprites/layout.css

@@ -1,13 +1,12 @@
 .classic {
-  background-image: url('../../img/test-layout.png?23071384207639');
+  background-image: url('../../img/test-layout.png?19081384279708');
   background-repeat: no-repeat;
-  background-position-x: 0%;
 }
 
 @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 (-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?23071384207639');
+    background-image: url('../../img/test-layout@2x.png?19081384279708');
     background-size: 718px auto;
   }
 }
@@ -18,6 +17,6 @@
 @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 (-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: -209px 0px;
+    background-position: -209px 0;
   }
 }

data/test/css/sprites/position.css

@@ -1,24 +1,61 @@
-.classic {
-  background-image: url('../../img/test-position.png?23071384207639');
+/* -------------------------------------------------------------------- *
+ * Compiled 1x sprite has all images horizontally centered
+ * Compiled 2x sprite has all images aligned to the right
+ */
+.vertical {
+  background-image: url('../../img/test-position.png?19151384280136');
   background-repeat: no-repeat;
-  background-position-x: 50%;
 }
 
 @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 (-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 {
+  .vertical {
     /* Retina sprite */
-    background-image: url('../../img/test-position@2x.png?23071384207639');
+    background-image: url('../../img/test-position@2x.png?19151384280136');
     background-size: 281px auto;
-    background-position-x: 100%;
   }
 }
 
-.classic {
-  background-position: -115px -200px;
+/* -------------------------------------------------------------------- *
+ * Compiled 1x sprite has all images vertically centered
+ * Compiled 2x sprite has all images aligned to the bottom
+ */
+.horizontal {
+  background-image: url('../../img/test-position-alt.png?19151384280136');
+  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 (-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?19151384280136');
+    background-size: 421px auto;
+  }
+}
+
+/* -------------------------------------------------------------------- *
+ * Regular image has background centered
+ * Retina image has background aligned to the right
+ */
+.vertical {
+  background-position: 50% -200px;
+}
+@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 (-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-position: 100% -200px;
+  }
+}
+
+/* -------------------------------------------------------------------- *
+ * Regular image has background centered
+ * Retina image has background aligned to the right
+ */
+.horizontal {
+  background-position: -281px 50%;
 }
 @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 (-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 {
+  .horizontal {
     /* Retina sprite */
-    background-position: -231px -200px;
+    background-position: -281px 100%;
   }
 }

data/test/css/sprites/repeat.css

@@ -1,21 +1,19 @@
 .meassure-1, .meassure-2, .meassure-3 {
-  background-image: url('../../img/test-repeat.png?23071384207639');
+  background-image: url('../../img/test-repeat.png?19081384279708');
   background-repeat: repeat-x;
-  background-position-x: 0%;
 }
 
 @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 (-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?23071384207639');
+    background-image: url('../../img/test-repeat@2x.png?19081384279708');
     background-size: 378px auto;
     background-repeat: no-repeat;
-    background-position-x: 100%;
   }
 }
 
 .meassure-1 {
-  background-position: 0px -100px;
+  background-position: 0 -100px;
   width: 378px;
   height: 50px;
 }
@@ -27,7 +25,7 @@
 }
 
 .meassure-2 {
-  background-position: 0px -50px;
+  background-position: 0 -50px;
   width: 378px;
   height: 50px;
 }
@@ -39,13 +37,13 @@
 }
 
 .meassure-3 {
-  background-position: 0px 0px;
+  background-position: 0 0;
   width: 378px;
   height: 50px;
 }
 @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 (-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-3 {
     /* Retina sprite */
-    background-position: 0px 0px;
+    background-position: 0 0;
   }
 }

data/test/css/sprites/retina.css

@@ -1,43 +1,42 @@
 .classic, .indy, .alien {
-  background-image: url('../../img/test-retina.png?23071384207639');
+  background-image: url('../../img/test-retina.png?19081384279708');
   background-repeat: no-repeat;
-  background-position-x: 0%;
 }
 
 @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 (-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?23071384207639');
+    background-image: url('../../img/test-retina@2x.png?19081384279708');
     background-size: 152px auto;
   }
 }
 
 .classic {
-  background-position: 0px -281px;
+  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 (-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: 0px -140px;
+    background-position: 0 -140px;
   }
 }
 
 .indy {
-  background-position: 0px -141px;
+  background-position: 0 -141px;
   width: 128px;
   height: 140px;
 }
 @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 (-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) {
   .indy {
     /* Retina sprite */
-    background-position: 0px 0px;
+    background-position: 0 0;
   }
 }
 
 .alien {
-  background-position: 0px 0px;
+  background-position: 0 0;
   width: 159px;
   height: 141px;
 }

data/test/css/sprites/simple.css

@@ -1,17 +1,16 @@
 .classic, .indy {
-  background-image: url('../../img/test-simple.png?23071384207639');
+  background-image: url('../../img/test-simple.png?19081384279708');
   background-repeat: no-repeat;
-  background-position-x: 0%;
 }
 
 .classic {
-  background-position: 0px -281px;
+  background-position: 0 -281px;
   width: 152px;
   height: 135px;
 }
 
 .indy {
-  background-position: 0px -141px;
+  background-position: 0 -141px;
   width: 128px;
   height: 140px;
 }

data/test/css/sprites/spacing.css

@@ -1,23 +1,22 @@
 .classic {
-  background-image: url('../../img/test-spacing.png?23071384207640');
+  background-image: url('../../img/test-spacing.png?19081384279708');
   background-repeat: no-repeat;
-  background-position-x: 0%;
 }
 
 @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 (-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?23071384207640');
+    background-image: url('../../img/test-spacing@2x.png?19081384279708');
     background-size: 159px auto;
   }
 }
 
 .classic {
-  background-position: 0px -381px;
+  background-position: 0 -381px;
 }
 @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 (-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: 0px -481px;
+    background-position: 0 -481px;
   }
 }

data/test/scss/sprites/position.scss

@@ -3,21 +3,57 @@
 
 @import "../../../sass/ezy/sprites";
 
-// ---------------------------------------------------------------------------
-// Create sprite
+/* -------------------------------------------------------------------- *
+ * Compiled 1x sprite has all images horizontally centered
+ * Compiled 2x sprite has all images aligned to the right
+ */
 
 @include make-sprite(
-  $name: "base",
+  $name: "vertical",
   $folder: "test-position",
   $folder-retina: "test-position@2x", 
   $position: 50%,
-  $position-retina: 100%,
-  $clean-up: false
+  $position-retina: 100%
 );
 
-// ---------------------------------------------------------------------------
-// Calling sprite so it will compile
+/* -------------------------------------------------------------------- *
+ * Compiled 1x sprite has all images vertically centered
+ * Compiled 2x sprite has all images aligned to the bottom
+ */
+
+@include make-sprite(
+  $name: "horizontal",
+  $folder: "test-position-alt",
+  $folder-retina: "test-position-alt@2x", 
+  $layout: horizontal,
+  $position: 50%,
+  $position-retina: 100%
+);
+
+/* -------------------------------------------------------------------- *
+ * Regular image has background centered
+ * Retina image has background aligned to the right
+ */
+
+.vertical {
+  @include background-sprite(
+    $name: "vertical",
+    $image: "icon-coffee",
+    $offset-x: 50%,
+    $offset-x-retina: 100%
+  );
+}
+
+/* -------------------------------------------------------------------- *
+ * Regular image has background centered
+ * Retina image has background aligned to the right
+ */
 
-.classic {
-  @include background-sprite( "base", "icon-coffee" );
+.horizontal {
+  @include background-sprite(
+    $name: "horizontal",
+    $image: "icon-1",
+    $offset-y: 50%,
+    $offset-y-retina: 100%
+  );
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ezy
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
 platform: ruby
 authors:
 - Frej Raahede Nielsen
@@ -73,65 +73,60 @@ files:
 - test/css/sprites/simple.css
 - test/css/sprites/size.css
 - test/css/sprites/spacing.css
+- test/scss/grid/elastic.scss
+- test/scss/grid/fluid.scss
+- test/scss/grid/gutter.scss
+- test/scss/grid/responsive.scss
+- test/scss/grid/static.scss
+- test/scss/media.scss
+- test/scss/sprites/layout.scss
+- test/scss/sprites/position.scss
+- test/scss/sprites/repeat.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/retina.html
 - test/html/sprites/simple.html
 - test/img/test-layout/alien.png
 - test/img/test-layout/goat.png
 - test/img/test-layout/indy.png
-- test/img/test-layout.png
 - test/img/test-layout@2x/alien.png
 - test/img/test-layout@2x/goat.png
 - test/img/test-layout@2x/indy.png
-- test/img/test-layout@2x.png
 - test/img/test-position/goat.png
 - test/img/test-position/icon-1.png
 - test/img/test-position/icon-coffee.png
-- test/img/test-position.png
+- test/img/test-position-alt/goat.png
+- test/img/test-position-alt/icon-1.png
+- test/img/test-position-alt/icon-coffee.png
+- test/img/test-position-alt@2x/goat.png
+- test/img/test-position-alt@2x/icon-1.png
+- test/img/test-position-alt@2x/icon-coffee.png
 - test/img/test-position@2x/goat.png
 - test/img/test-position@2x/icon-1.png
 - test/img/test-position@2x/icon-coffee.png
-- test/img/test-position@2x.png
 - test/img/test-repeat/meassure-1.png
 - test/img/test-repeat/meassure-2.png
 - test/img/test-repeat/meassure-3.png
-- test/img/test-repeat.png
 - test/img/test-repeat@2x/meassure-1.png
 - test/img/test-repeat@2x/meassure-2.png
 - test/img/test-repeat@2x/meassure-3.png
-- test/img/test-repeat@2x.png
 - test/img/test-retina/alien.png
 - test/img/test-retina/classic.png
 - test/img/test-retina/indy.png
-- test/img/test-retina.png
 - test/img/test-retina@2x/classic.png
 - test/img/test-retina@2x/indy.png
-- test/img/test-retina@2x.png
 - test/img/test-simple/alien.png
 - test/img/test-simple/classic.png
 - test/img/test-simple/indy.png
-- test/img/test-simple.png
 - test/img/test-spacing/alien.png
 - test/img/test-spacing/classic.png
 - test/img/test-spacing/indy.png
-- test/img/test-spacing.png
 - test/img/test-spacing@2x/alien.png
 - test/img/test-spacing@2x/classic.png
 - test/img/test-spacing@2x/indy.png
-- test/img/test-spacing@2x.png
-- test/scss/grid/elastic.scss
-- test/scss/grid/fluid.scss
-- test/scss/grid/gutter.scss
-- test/scss/grid/responsive.scss
-- test/scss/grid/static.scss
-- test/scss/media.scss
-- test/scss/sprites/layout.scss
-- test/scss/sprites/position.scss
-- test/scss/sprites/repeat.scss
-- test/scss/sprites/retina.scss
-- test/scss/sprites/simple.scss
-- test/scss/sprites/size.scss
-- test/scss/sprites/spacing.scss
 homepage: http://github.com/raahede/
 licenses:
 - MIT