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