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
--------------

#### 1) Install the gem

`gem install ezy`

#### 2) Require Ezy in your config.rb

`require "ezy"`

#### 3) Import the part you need in your SCSS

Import all features:

`@import "ezy";`

Import grid only:

`@import "ezy/grid";`

Import media queries only:

`@import "ezy/media";`

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
        $offset-x:      10px,       // (optional) background offset x
        $offset-y:      20px,       // (optional) background offset y
        $use-retina:    true        // (optional) 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/`