README.md in ezy-0.2.6.alpha vs README.md in ezy-0.2.7.alpha

- old
+ new

@@ -1,15 +1,27 @@ -Ezy: The developer's toolbox for responsive websites -==================================================== +Ezy: Responsive website toolbox +=============================== -My attempt to create a collection of simple-to-use grid helpers and other tools with SCSS and Ruby +Ezy is a SCSS framwork for building responsive websites. It's targeting experienced frontend developers who know the principles of responsive design and development. +Ezy so far contains: + +* Grid framework +* Media query helpers +* Sprite helpers + +View all documentation here: [raahede.github.io/ezy](http://raahede.github.io/ezy/) + Installing Ezy -------------- -#### 1) Install the gem (This is an alpha release!) +#### 1) Install the gem +`gem install ezy` + +Or install the latest alpha release: + `gem install ezy --pre` #### 2) Require Ezy in your config.rb `require "ezy"` @@ -30,80 +42,21 @@ 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 ------------------------------ +If you've cloned my project and want to test your code with a local gem. + +#### Switch to project folder ### +`cd [folder path]` + #### 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/` +