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 (This is an alpha release!)

`gem install ezy --pre`

#### 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) [default: 0px] spacing between images in compiled sprite
      $layout:          vertical,         // (optional) [default: vertical] vertical, horizontal, diagonal
      $position:        0%,               // (optional) [default: 0%] alignment of images in the sprite 
      $spacing-retina:  40px,             // (optional) [default: $spacing x 2]
      $layout-retina:   diagonal,         // (optional) [default: $layout]
      $position-retina: 100%              // (optional) [default: $position]
    );

#### 2) Use sprite

Simple use: (if a sprite has a retina version, it uses retina as a default)

    .icon-git-fork {
      @include background-sprite( "icons", "git-fork" ); // using image git-fork.png from images/icon-images/
    }
    
Simple use, force no retina:

    .icon-git-fork {
      @include background-sprite( "icons", "git-fork", $use-retina: false );
    }
    
Advanced use: 

    .icon-git-fork {
      @include background-sprite( 
        $name:          "icons",    // (required) sprite name
        $image:         "git-fork", // (required) image to use
        $offset-x:      10px,       // (optional) [default: 0] background offset x
        $offset-y:      20px,       // (optional) [default: 0] background offset y
        $use-retina:    true        // (optional) [default: true] 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/`
or
`open /Library/Ruby/Gems/[version]/gems/`