ezy 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e07ee1346c74a0173231c5a08cd91c994593a4e7
-  data.tar.gz: 27abca9223b02b5655a341d1e49b8f808e849d4e
+  metadata.gz: 5e4a4d640319b0dd69de17325d9fbe8c5eb20019
+  data.tar.gz: ac43b0b47043148d7d7fe98a30294ef9f20b1aa0
 SHA512:
-  metadata.gz: c15b95ae4bca28b324cd0ec3da9962aa26c8b52a399faf3ed4e7cd375a1944d7604ca30d778e75885f167d563c932ff5055f7fde418b3d50eeecf0958f34aa71
-  data.tar.gz: 21c0815ea1424ce062c5a302479f7f56e2c8de7d88420b0039bb37a428ae2cee8db7b5914e094b0c5289b6816714c467a38499e4450d55824a85af4fa93b2ad7
+  metadata.gz: db2f98065fe821b90d9dbdef892a3f296e421fa22543b6847a4ebf1bd4dfeef60fc6c61524b1f04368939b43f75bb895120302e8feb1c8df42463a1227612632
+  data.tar.gz: 1a04b58d62f47d62a21e4c971d97834cbe8cd98afaeac21cb938b4493c418a9d043ed3cdf7aff77fff5dede1400d8820b45b983ace470e6e1c326f6e63004207

data/README.md

@@ -1,17 +1,101 @@
-Ezy Grid
-========
+Ezy: The developer's toolbox for responsive websites
+====================================================
 
-My attempt to create a collection of simple-to-use grid helpers with SCSS
+My attempt to create a collection of simple-to-use grid helpers and other tools with SCSS and Ruby
 
+Installing Ezy
+--------------
 
-Building and testing gem
-------------------------
+#### 1) Install the gem
 
-### Build gem ###
-$ gem build ezy.gemspec
+`gem install ezy`
 
-### Install local gem ###
-$ gem install --local ezy-[build version].gem
+#### 2) Require Ezy in your config.rb
 
-### Open installed gem location (Mac) ###
-$ open /Users/[username]/.rvm/gems/
+`require "ezy"`
+
+#### 3) Import the part you need in your SCSS
+
+Import all features:
+
+`@import "ezy";`
+
+Import grid only:
+
+`@import "ezy/grid";`
+
+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) defaults to 0px
+      $layout:          vertical,         // (optional) vertical, horizontal, diagonal
+      $spacing-retina:  null,             // (optional) defaults to $spacing x 2
+      $layout-retina:   null              // (optional) defaults to $layout
+    );
+
+#### 2) Use sprite
+
+Simple use without retina:
+
+    .icon-git-fork {
+      @include background-sprite( "icons", "git-fork" ); // using image git-fork.png from images/icon-images/
+    }
+    
+Simple use with retina:
+
+    .icon-git-fork {
+      @include background-sprite( "icons", "git-fork", $use-retina: true );
+    }
+    
+Advanced use: 
+
+    .icon-git-fork {
+      @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
+      );
+    }
+
+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/`

data/ezy.gemspec

@@ -2,14 +2,14 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.0.5"
+  s.version = "0.0.6"
   s.date = "2013-11-12"
 
   # Gem Details
   s.name = "ezy"
   s.author = "Frej Raahede Nielsen"
-  s.summary = "Responsive grid framework for SASS"
-  s.description = "Ezy Grid is a light weight grid framework for use with SASS. It's simple, but smart and will allow you to create even the most complex responsive layouts."
+  s.summary = "The developer's toolbox for responsive websites"
+  s.description = "A collection of SCSS tools for creating responsive websites. Includes a simple but powerful grid framework, media query helpers and sprite helpers."
   s.email = "frejraahede@gmail.com"
   s.homepage = "http://github.com/raahede/"
   s.license = "MIT"

data/sass/ezy/_sprites.scss

@@ -48,9 +48,9 @@ $sprite-maps: ();
   $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.";
-    }
+    // @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 );
   }
@@ -83,6 +83,22 @@ $sprite-maps: ();
   }
 }
 
+// ---------------------------------------------------------------------------
+// @function return-sprite-repeat
+// 
+// Helper function to return a sprite's css repeat
+
+@function return-offset( $reference, $adjustment, $fail-msg ) {
+  @if unit($adjustment) == "%" {
+    @return $adjustment;
+  } @else if unit($adjustment) == "px" or unit($adjustment) == "" {
+    @return ( $reference + $adjustment );
+  } @else {
+    @warn $fail-msg;
+    @return $reference;
+  }
+}
+
 // ---------------------------------------------------------------------------
 // @function sprite-image-width
 // 
@@ -227,58 +243,39 @@ $sprite-maps: ();
 }
 
 // ---------------------------------------------------------------------------
-// @mixin sprite-base
+// @mixin background-sprite
 // 
-// Basic mixin for using sprites with retina fallback
+// Mixin for using sprites stored in the sprite map variable
 
-@mixin sprite-base( 
-  $map,                   // sprite map
+@mixin background-sprite(
+  $name,                  // sprite name
   $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)
-  ) {
+  $offset-y: 0,           // background offset y (optional)
+  $use-retina: true       // wether to use retina on hi-res screens (optional)
+) {
+  $map: return-sprite-map( $name );
+  $retina-map: $use-retina;
+  @if $use-retina {
+    $retina-map: return-sprite-map( $name, $retina: true );
+  }
+
   @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;
+    $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 $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;
+        $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!" );
         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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ezy
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Frej Raahede Nielsen
@@ -38,8 +38,8 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: 3.2.0
-description: Ezy Grid is a light weight grid framework for use with SASS. It's simple,
-  but smart and will allow you to create even the most complex responsive layouts.
+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: []
@@ -155,5 +155,5 @@ rubyforge_project:
 rubygems_version: 2.1.10
 signing_key: 
 specification_version: 4
-summary: Responsive grid framework for SASS
+summary: The developer's toolbox for responsive websites
 test_files: []