ezy 0.2.7.alpha → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bf66ced2ef96ce7a564935a3ebad6f4270378cbb
-  data.tar.gz: a352feb1613a56e2ac6cb03ac8f6c9c8f025a0a9
+  metadata.gz: 1fbb1478ff648abae2c74dd31938c81a46aa971d
+  data.tar.gz: 2445d1f5deb200bfd89aeac4b7ee7a63709037ec
 SHA512:
-  metadata.gz: bd0c5a9b126f17c6040793b8751314d2fe2a4d31f3c093274147bd493755ef97da2bad58125fdcf49e54eef92564935fc531cee34c2d94387d64436827182d30
-  data.tar.gz: 16522622fe31ebc16935aeb9d91c39681917bbaccfa932f3cca73f60107b4b78a8510870bfc9e598f03887a8548a6ae511319509c30180b6b4bb7f2d9efb0454
+  metadata.gz: 360c21aa75455dcf10efa73e768bd4dd2029abf0c96c60404b8eaadf6ca505253ef10d23c6e57bf5505a2984e0301cca73a97471c6a70e4da80b6678f2b9877d
+  data.tar.gz: 7cae818ad5155811560709912ee1424d7f050e48cdc8181203fa1f6260e4430f7271a13f74bccc5d099b0b17db524674586be36b50590917d6d4202bc274d764

data/README.md

@@ -11,8 +11,8 @@ Ezy so far contains:
 
 View all documentation here: [raahede.github.io/ezy](http://raahede.github.io/ezy/)
 
-Installing Ezy
---------------
+Documentation
+-------------
 
 #### 1) Install the gem
 
@@ -59,4 +59,3 @@ If you've cloned my project and want to test your code with a local gem.
 #### Install local gem ###
 `gem install --local ezy-[build version].gem`
 
-

data/VERSION

@@ -1 +1 @@
-0.2.7.alpha
+0.2.8

data/ezy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.2.7.alpha"
+  s.version = "0.2.8"
   s.date = "2013-12-11"
 
   # Gem Details

data/sass/ezy/_sprites.scss

@@ -9,9 +9,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
@@ -160,18 +161,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;
+    }
   }
+  
 }
 
 // ---------------------------------------------------------------------------
@@ -227,7 +244,6 @@ $sprite-maps: ();
     %sprite-placeholder-#{ $name } {
       background-image: sprite-url( $sprite );
       background-repeat: $repeat;
-      // background-position-x: $position;
     }
     %sprite-placeholder-#{ $name }-retina {
       @if $sprite-retina {
@@ -238,9 +254,6 @@ $sprite-maps: ();
           @if $repeat-retina != $repeat { 
             background-repeat: $repeat-retina;
           }
-          // @if $position-retina != $position { 
-          //   background-position-x: $position-retina;
-          // }
         }
       }
     }
@@ -259,7 +272,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; }
@@ -271,27 +286,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?17551386780919');
+  background-image: url('../../img/test-layout.png?18311386783117');
   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?17551386780919');
+    background-image: url('../../img/test-layout@2x.png?18311386783117');
     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?17551386780922');
+  background-image: url('../../img/test-position.png?18321386783121');
   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?17551386780922');
+    background-image: url('../../img/test-position@2x.png?18321386783121');
     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?17551386780922');
+  background-image: url('../../img/test-position-alt.png?18321386783121');
   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?17551386780922');
+    background-image: url('../../img/test-position-alt@2x.png?18321386783121');
     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?17551386780925');
+  background-image: url('../../img/test-repeat.png?18321386783123');
   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?17551386780925');
+    background-image: url('../../img/test-repeat@2x.png?18321386783123');
     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?17551386780926');
+  background-image: url('../../img/test-retina.png?18321386783125');
   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?17551386780926');
+    background-image: url('../../img/test-retina@2x.png?18321386783125');
     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?18321386783131');
+  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?18321386783131');
+    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?18321386783131');
+    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?18321386783131');
+    background-size: 152px auto;
+  }
+}
+@media (min-width: 960px) {
+  .indy {
+    background-position: 0 -281px;
+    background-image: url('../../img/test-retina.png?18321386783131');
+    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?18321386783131');
+    background-size: 152px auto;
+  }
+}
+@media (min-width: 1024px) {
+  .indy {
+    background-position: 0 0;
+    background-image: url('../../img/test-retina.png?18321386783131');
+    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?17551386780928');
+  background-image: url('../../img/test-retina.png?18321386783132');
   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?17551386780928');
+    background-image: url('../../img/test-retina@2x.png?18321386783132');
     background-size: 152px auto;
   }
 }

data/test/css/sprites/simple.css

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

data/test/css/sprites/spacing.css

@@ -1,12 +1,12 @@
 .classic {
-  background-image: url('../../img/test-spacing.png?17551386780933');
+  background-image: url('../../img/test-spacing.png?18321386783138');
   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?17551386780933');
+    background-image: url('../../img/test-spacing@2x.png?18321386783138');
     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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ezy
 version: !ruby/object:Gem::Version
-  version: 0.2.7.alpha
+  version: 0.2.8
 platform: ruby
 authors:
 - Frej Raahede Nielsen
@@ -78,6 +78,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
@@ -96,6 +97,7 @@ 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
@@ -103,6 +105,7 @@ files:
 - test/html/grid/fluid.html
 - test/html/grid/responsive.html
 - 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
@@ -158,9 +161,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>'
+  - - '>='
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.1.10