ezy 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d2646d76fa14740473e6f2fc6650cb55f81ccda7
-  data.tar.gz: 4a07995eb2a198c4b3f09297045a655f28b21945
+  metadata.gz: e07ee1346c74a0173231c5a08cd91c994593a4e7
+  data.tar.gz: 27abca9223b02b5655a341d1e49b8f808e849d4e
 SHA512:
-  metadata.gz: 6ec2d578a84920768fa0e6cedbfe958a7bcf466a207f153e50474347b657ba2188a5f9604ca512cacdc509c4349e672d4cfac289ceeacc9c5947b79d72c565d4
-  data.tar.gz: 71b27587c090b0db51516eb574198daf61b9cc01a6bb3c6dd59afdec5ff03fee27ae94fe54bc8eb18923a5a26370d7277d8f8e940620788bb8a9a069a9ed2a24
+  metadata.gz: c15b95ae4bca28b324cd0ec3da9962aa26c8b52a399faf3ed4e7cd375a1944d7604ca30d778e75885f167d563c932ff5055f7fde418b3d50eeecf0958f34aa71
+  data.tar.gz: 21c0815ea1424ce062c5a302479f7f56e2c8de7d88420b0039bb37a428ae2cee8db7b5914e094b0c5289b6816714c467a38499e4450d55824a85af4fa93b2ad7

data/VERSION

@@ -1 +1 @@
-0.0.4
+0.0.5

data/ezy.gemspec

@@ -2,8 +2,8 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.0.4"
-  s.date = "2013-11-10"
+  s.version = "0.0.5"
+  s.date = "2013-11-12"
 
   # Gem Details
   s.name = "ezy"

data/sass/_ezy.scss

@@ -1,5 +1,6 @@
-// This is your framework's main stylesheet. Use it to import all default modules.
-@import "ezy/clearfix";
-@import "ezy/functions";
+// ---------------------------------------------------------------------------
+// Partials
+
 @import "ezy/media";
-@import "ezy/grid";
+@import "ezy/grid";
+@import "ezy/sprites";

data/sass/ezy/_grid.scss

@@ -1,3 +1,9 @@
+// ---------------------------------------------------------------------------
+// Importing dependencies
+
+@import "functions";
+@import "clearfix";
+
 // ---------------------------------------------------------------------------
 // Mandatory grid settings
 // Defaults: can be overridden

data/sass/ezy/_sprites.scss

@@ -0,0 +1,289 @@
+
+// ---------------------------------------------------------------------------
+// Sprites
+// Making good use of http://compass-style.org/reference/compass/helpers/sprites/
+// 
+// If you are concerned about the amount of "unchanged" and "created" statuses 
+// when compiling your SCSS, read this thread:
+// https://github.com/chriseppstein/compass/issues/897
+
+// ---------------------------------------------------------------------------
+// Sprite map store
+
+$sprite-maps: ();
+
+// ---------------------------------------------------------------------------
+// @function return-sprite-map
+// 
+// Helper function to return a sprite setting stored in the sprite map variable
+
+@function return-sprite-setting( $name, $pos ) {
+  $sprite: false;
+  $setting: false;
+  @if type-of(nth($sprite-maps, 1)) == list {
+    @each $item in $sprite-maps {
+      @if nth( $item, 1 ) == $name {
+        $sprite: $item;
+      }
+    }
+  } @else {
+    $sprite: $sprite-maps;
+    // List has collapsed because it only has 1 item
+  }
+  @if (not $sprite) {
+    @warn "Couldn't find any sprite named '#{$name}'. Please check your sprite settings.";
+  } @else {
+    $setting: nth( $sprite, $pos );
+  }
+  @return $setting;
+}
+
+// ---------------------------------------------------------------------------
+// @function return-sprite-map
+// 
+// Helper function to return a sprite map stored in the sprite map variable
+
+@function return-sprite-map( $name, $retina: false ) {
+  $map: false;
+  $sprite: false;
+  @if $retina {
+    $map: return-sprite-setting( $name, 3 );
+    @if (not $map) {
+      @warn "The sprite '#{$name}' doesn't appear to have a retina version. Please check your sprite settings.";
+    }
+  } @else {
+    $map: return-sprite-setting( $name, 2 );
+  }
+  @return $map;
+}
+
+// ---------------------------------------------------------------------------
+// @function return-sprite-position
+// 
+// Helper function to return a sprite's horizontal position
+
+@function return-sprite-position( $name, $retina: false ) {
+  @if $retina {
+    @return return-sprite-setting( $name, 5 );
+  } @else {
+    @return return-sprite-setting( $name, 4 );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @function return-sprite-repeat
+// 
+// Helper function to return a sprite's css repeat
+
+@function return-sprite-position( $name, $retina: false ) {
+  @if $retina {
+    @return return-sprite-setting( $name, 7 );
+  } @else {
+    @return return-sprite-setting( $name, 6 );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @function sprite-image-width
+// 
+// Returns width of image in sprite
+
+@function sprite-image-width( $name, $image, $use-retina: false ) {
+  $map: return-sprite-map( $name, $use-retina );
+  @return image-width( sprite-file( $map, $image ) );
+}
+
+// ---------------------------------------------------------------------------
+// @function sprite-image-height
+// 
+// Returns height of image in sprite
+
+@function sprite-image-height( $name, $image, $use-retina: false ) {
+  $map: return-sprite-map( $name, $use-retina );
+  @return image-height( sprite-file( $map, $image ) );
+}
+
+// ---------------------------------------------------------------------------
+// @mixin sprite-image-dimensions
+// 
+// Sets height and width from a sprite image's dimensions
+
+@mixin sprite-image-dimensions( $name, $image, $use-retina: false ) {
+  width: sprite-image-width( $name, $image, $use-retina );
+  height: sprite-image-height( $name, $image, $use-retina );
+}
+
+// ---------------------------------------------------------------------------
+// @function sprite-width
+// 
+// Returns width of compiled sprite
+
+@function sprite-width( $name, $use-retina: false ) {
+  $map: return-sprite-map( $name, $use-retina );
+  @return image-width( sprite-path( $map ) );
+}
+
+// ---------------------------------------------------------------------------
+// @function sprite-height
+// 
+// Returns height of compiled sprite
+
+@function sprite-height( $name, $use-retina: false ) {
+  $map: return-sprite-map( $name, $use-retina );
+  @return image-height( sprite-path( $map ) );
+}
+
+// ---------------------------------------------------------------------------
+// @mixin at-retina
+// 
+// Retina media query mixin
+
+@mixin at-retina {
+  @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) { 
+    @content;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin make-sprite
+// 
+// Creates new sprite map and stores it for later use
+
+@mixin make-sprite(
+  $name: null,
+  $folder: null,
+  $folder-retina: null, 
+  $position: 0%, 
+  $spacing: 0px, 
+  $repeat: no-repeat, // no-repeat or repeat-x !! WARNING: it can take ages to compile because it repeats until the images meet at both ends
+  $layout: vertical, // vertical, horizontal, diagonal
+  $clean-up: true, // wether or not to remove old compiled sprites
+  $position-retina: null,
+  $spacing-retina: null,
+  $repeat-retina: null,
+  $layout-retina: null,
+  $clean-up-retina: null
+) {
+  @if $position-retina == null { $position-retina: $position; }
+  @if $spacing-retina == null { $spacing-retina: $spacing*2; }
+  @if $repeat-retina == null { $repeat-retina: $repeat; }
+  @if $layout-retina == null { $layout-retina: $layout; }
+  @if $clean-up-retina == null { $clean-up-retina: $clean-up; }
+
+  @if $name {
+    $sprite: false;
+    $sprite-retina: false;
+    @if $folder {
+      $sprite: sprite-map( $folder +"/*.png",
+        $position:  $position, 
+        $spacing:   $spacing, 
+        $repeat:    $repeat,
+        $layout:    $layout,
+        $clean-up:  $clean-up
+      );
+    }
+    @if $folder-retina {
+      $sprite-retina: sprite-map( $folder-retina +"/*.png",
+        $position:  $position-retina,
+        $spacing:   $spacing-retina,
+        $repeat:    $repeat-retina,
+        $layout:    $layout-retina,
+        $clean-up:  $clean-up-retina
+      );
+    }
+    @if $sprite-maps == () {
+      $sprite-maps: ($name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina);
+    } @else {
+      $sprite-maps: $sprite-maps, ($name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina);
+    }
+    %sprite-placeholder-#{ $name } {
+      background-image: sprite-url( $sprite );
+      background-repeat: $repeat;
+      background-position-x: $position;
+    }
+    %sprite-placeholder-#{ $name }-retina {
+      @if $sprite-retina {
+        @include at-retina {
+          /* Retina sprite */
+          background-image: sprite-url( $sprite-retina );
+          background-size: image-width( sprite-path( $sprite-retina ) )/2 auto;
+          @if $repeat-retina != $repeat { 
+            background-repeat: $repeat-retina;
+          }
+          @if $position-retina != $position { 
+            background-position-x: $position-retina;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin sprite-base
+// 
+// Basic mixin for using sprites with retina fallback
+
+@mixin sprite-base( 
+  $map,                   // sprite map
+  $image,                 // image to use
+  $retina-map: false,     // retina sprite map (optional)
+  $offset-x: 0,           // background offset x (optional)
+  $offset-y: 0            // background offset y (optional)
+  ) {
+  @if $map and $image {
+    $pos: sprite-position($map, $image);
+    $pos-x: nth( $pos, 1 ) + $offset-x*1px;
+    $pos-y: nth( $pos, 2 ) + $offset-y*1px;
+    background-position: $pos-x $pos-y;
+    @if $retina-map {
+      @include at-retina {
+        /* Retina sprite */
+        $pos: sprite-position($retina-map, $image);
+        $pos-x: nth( $pos, 1 )/2 + $offset-x*1px;
+        $pos-y: nth( $pos, 2 )/2 + $offset-y*1px;
+        background-position: $pos-x $pos-y;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin background-sprite
+// 
+// Mixin for using sprites stored in the sprite map variable
+
+@mixin background-sprite(
+  $name,                  // sprite name
+  $image,                 // image to use
+  $use-retina: true,      // wether to use retina on hi-res screens (optional)
+  $offset-x: 0,           // background offset x (optional)
+  $offset-y: 0            // background offset y (optional)
+) {
+  $map: return-sprite-map( $name );
+  $retina-map: $use-retina;
+  @if $use-retina {
+    $retina-map: return-sprite-map( $name, $retina: true );
+  }
+  @include sprite-base( 
+    $map: $map,                // sprite map
+    $image: $image,            // image to use
+    $retina-map: $retina-map,  // retina sprite map (optional)
+    $offset-x: $offset-x,      // background offset x (optional)
+    $offset-y: $offset-y       // background offset y (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/config.rb

@@ -4,7 +4,37 @@ project_type = :stand_alone
 http_path = "/"
 sass_dir = "scss"
 css_dir = "css"
+images_dir = "img"
 line_comments = false
 preferred_syntax = :scss
 output_style = :expanded
 relative_assets = true
+
+# ----------------------------------------------------- #
+# Nice sprite names
+# 
+
+nice_sprite_names = true
+
+if nice_sprite_names
+  # Rename sprites to remove the Compass-generated hash and move it up 1 directory
+  on_sprite_saved do |filename|
+    if File.exists?(filename)
+      FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png').gsub('images/../images/', '')
+    end
+  end
+
+  # Replace in stylesheets generated references to sprites
+  # by their counterparts without the hash uniqueness.
+  # Adding timestamp as cache buster.
+  on_stylesheet_saved do |filename|
+    if File.exists?(filename)
+      css = File.read filename
+      File.open(filename, 'w+') do |f|
+        f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png?' + Time.now.strftime("%H%M%s"))
+      end
+    end
+  end
+end
+
+# ----------------------------------------------------- #

data/test/css/media.css

@@ -1,8 +1,3 @@
-/* -------------------------------------------------------------------- *
- *  Micro Clearfix 
- *  http://nicolasgallagher.com/micro-clearfix-hack/
- */
-/* -------------------------------------------------------------------- */
 @media (max-width: 400px) {
   .test {
     content: "Breakpoint 1 (A)";

data/test/css/sprites/layout.css

@@ -0,0 +1,23 @@
+.classic {
+  background-image: url('../../img/test-layout.png?23071384207639');
+  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-size: 718px auto;
+  }
+}
+
+.classic {
+  background-position: -159px -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) {
+  .classic {
+    /* Retina sprite */
+    background-position: -209px 0px;
+  }
+}

data/test/css/sprites/position.css

@@ -0,0 +1,24 @@
+.classic {
+  background-image: url('../../img/test-position.png?23071384207639');
+  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 {
+    /* Retina sprite */
+    background-image: url('../../img/test-position@2x.png?23071384207639');
+    background-size: 281px auto;
+    background-position-x: 100%;
+  }
+}
+
+.classic {
+  background-position: -115px -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) {
+  .classic {
+    /* Retina sprite */
+    background-position: -231px -200px;
+  }
+}

data/test/css/sprites/repeat.css

@@ -0,0 +1,51 @@
+.meassure-1, .meassure-2, .meassure-3 {
+  background-image: url('../../img/test-repeat.png?23071384207639');
+  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-size: 378px auto;
+    background-repeat: no-repeat;
+    background-position-x: 100%;
+  }
+}
+
+.meassure-1 {
+  background-position: 0px -100px;
+  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-1 {
+    /* Retina sprite */
+    background-position: -252px -100px;
+  }
+}
+
+.meassure-2 {
+  background-position: 0px -50px;
+  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-2 {
+    /* Retina sprite */
+    background-position: -126px -50px;
+  }
+}
+
+.meassure-3 {
+  background-position: 0px 0px;
+  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;
+  }
+}