ezy 0.2.6.alpha → 0.2.7.alpha

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 150e5ad3b59fb4f46ae274647edc755e8e69bafa
-  data.tar.gz: 5b9411e323d5f38f110be02cd32cc8372c59c538
+  metadata.gz: bf66ced2ef96ce7a564935a3ebad6f4270378cbb
+  data.tar.gz: a352feb1613a56e2ac6cb03ac8f6c9c8f025a0a9
 SHA512:
-  metadata.gz: b0bd3eb1dd5e750585513adbc7d265fcaf336c9fead365cb43b99ea683fd8d276391ee363e8092494a8ab9e53a9b2671a5ee5318dae094aabb69d5402b1472b3
-  data.tar.gz: 06e0a26007226fdf805c87c48bed85a2e7f2bc11bc8da53aa7b91b52f0dcdc9b0d4991b9f167a1a95ff6c8879116d6078911a2259cba4eaa5f4d882c0f7c5b08
+  metadata.gz: bd0c5a9b126f17c6040793b8751314d2fe2a4d31f3c093274147bd493755ef97da2bad58125fdcf49e54eef92564935fc531cee34c2d94387d64436827182d30
+  data.tar.gz: 16522622fe31ebc16935aeb9d91c39681917bbaccfa932f3cca73f60107b4b78a8510870bfc9e598f03887a8548a6ae511319509c30180b6b4bb7f2d9efb0454

data/README.md

@@ -1,12 +1,24 @@
-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`
 
@@ -32,78 +44,19 @@ 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/`
+

data/VERSION

@@ -1 +1 @@
-0.2.6.alpha
+0.2.7.alpha

data/ezy.gemspec

@@ -2,8 +2,8 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.2.6.alpha"
-  s.date = "2013-12-03"
+  s.version = "0.2.7.alpha"
+  s.date = "2013-12-11"
 
   # Gem Details
   s.name = "ezy"
@@ -11,7 +11,7 @@ Gem::Specification.new do |s|
   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.homepage = "http://raahede.github.io/ezy/"
   s.license = "MIT"
 
   # Gem Files

data/sass/ezy/_functions.scss

@@ -8,4 +8,4 @@
 
 @function percentage-round( $value ) {
     @return floor( percentage( $value ) * 100 ) / 100;
-}
+}

data/sass/ezy/_grid.scss

@@ -7,12 +7,12 @@
 // ---------------------------------------------------------------------------
 // Grid defaults: can be overridden
 
-$column-width     : 4em   !default;
-$gutter-width     : 1em   !default;
-$gutter-property  : "margin" !default;
-$total-columns    : 12    !default;
-$is-fluid         : true  !default;
-$grid-padding     : 0     !default;
+$column-width     : 60px      !default;
+$gutter-width     : 20px      !default;
+$gutter-property  : "margin"  !default;
+$total-columns    : 12        !default;
+$is-fluid         : true      !default;
+$grid-padding     : 0         !default;
 
 // ---------------------------------------------------------------------------
 // Variables used in grid context
@@ -58,6 +58,10 @@ $init-gutter-property: $gutter-property;
   ) {
   @if $is-fluid {
     max-width: layout-width( $context );
+    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+      /* Forcing static grid on IE6 and IE7 */
+      *width: layout-width( $context );
+    }
   } @else {
     width: layout-width( $context );
   }

data/sass/ezy/_media.scss

@@ -33,6 +33,11 @@
   $breakpoint,
   $legacy-support: false
   ) {
+  
+  // Setting variable for reference 
+  // in the content of the mixin call
+  $at-breakpoint: true;
+
   @media #{ nth( $breakpoint, 1 ) } {
     @content;
   }
@@ -42,6 +47,9 @@
       @content;
     }
   }
+
+  // Reset reference
+  $at-breakpoint: false;
 }
 
 

data/sass/ezy/_settings.scss

@@ -16,3 +16,8 @@ $legacy-support-for-ie8 : $legacy-support-for-ie !default;
 // Selector used for legacy support in media queries
 
 $legacy-selector: ".no-media-queries" !default;
+
+// ---------------------------------------------------------------------------
+// Setting reference value for $at-breakpoint
+
+$at-breakpoint: false !default;

data/sass/ezy/grid/_helpers.scss

@@ -28,8 +28,8 @@
 // @return        :   Width in the same unit as $column-width, $gutter-width and $grid-padding
 
 @function grid-width( 
-  $columns, 
-  $grid-padding: $grid-padding 
+  $columns      : $total-columns, 
+  $grid-padding : $grid-padding 
   ) {
   @if type-of( $grid-padding ) == "list" {
     // If grid padding is set as 2 values (in case left 

data/test/css/grid/elastic.css

@@ -34,6 +34,8 @@
 
 .page {
   max-width: 70em;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 70em;
   padding-left: 0;
   padding-right: 0;
   font-size: 14px;

data/test/css/grid/fluid.css

@@ -34,6 +34,8 @@
 
 .page {
   max-width: 1050px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 1050px;
   padding-left: 0;
   padding-right: 0;
 }

data/test/css/grid/layout/fluid.css

@@ -0,0 +1,121 @@
+/* ------------------------------------------------- *
+ *  Ezy Grid by Frej Raahede Nielsen
+ *  http://github.com/raahede/ezy
+ * ------------------------------------------------- *
+ */
+/* ------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+.page:before, .grid:before,
+.page:after,
+.grid:after {
+  content: " ";
+  display: table;
+}
+
+.page:after, .grid:after {
+  clear: both;
+}
+
+.page, .grid {
+  /**
+   * For IE 6/7 only
+   * Include this rule to trigger hasLayout and contain floats.
+   */
+  *zoom: 1;
+}
+
+/* --- End clearfix --- */
+.page {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
+  /* Grid column base at a 12-column context */
+  margin-left: 1.04%;
+  margin-right: 1.04%;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+}
+
+.page {
+  max-width: 940px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 940px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.grid {
+  margin-left: -1.06%;
+  margin-right: -1.06%;
+}
+
+.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
+  background: hotpink;
+  text-align: center;
+  zoom: 1;
+}
+
+.span-1 {
+  /* Spanning 1 of 12 columns */
+  width: 6.25%;
+}
+
+.span-2 {
+  /* Spanning 2 of 12 columns */
+  width: 14.58%;
+}
+
+.span-3 {
+  /* Spanning 3 of 12 columns */
+  width: 22.91%;
+}
+
+.span-4 {
+  /* Spanning 4 of 12 columns */
+  width: 31.25%;
+}
+
+.span-5 {
+  /* Spanning 5 of 12 columns */
+  width: 39.58%;
+}
+
+.span-6 {
+  /* Spanning 6 of 12 columns */
+  width: 47.91%;
+}
+
+.span-7 {
+  /* Spanning 7 of 12 columns */
+  width: 56.25%;
+}
+
+.span-8 {
+  /* Spanning 8 of 12 columns */
+  width: 64.58%;
+}
+
+.span-9 {
+  /* Spanning 9 of 12 columns */
+  width: 72.91%;
+}
+
+.span-10 {
+  /* Spanning 10 of 12 columns */
+  width: 81.25%;
+}
+
+.span-11 {
+  /* Spanning 11 of 12 columns */
+  width: 89.58%;
+}
+
+.span-12 {
+  /* Spanning 12 of 12 columns */
+  width: 97.91%;
+}

data/test/css/grid/layout/responsive.css

@@ -0,0 +1,182 @@
+/* ------------------------------------------------- *
+ *  Ezy Grid by Frej Raahede Nielsen
+ *  http://github.com/raahede/ezy
+ * ------------------------------------------------- *
+ */
+/* ------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+.page:before, .grid:before,
+.page:after,
+.grid:after {
+  content: " ";
+  display: table;
+}
+
+.page:after, .grid:after {
+  clear: both;
+}
+
+.page, .grid {
+  /**
+   * For IE 6/7 only
+   * Include this rule to trigger hasLayout and contain floats.
+   */
+  *zoom: 1;
+}
+
+/* --- End clearfix --- */
+.page {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.small, .medium, .large {
+  /* Grid column base at a 4-column context */
+  margin-left: 3.125%;
+  margin-right: 3.125%;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+}
+
+.page {
+  max-width: 300px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 300px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+@media (min-width: 321px) {
+  .page {
+    max-width: 620px;
+    /* Forcing static grid on IE6 and IE7 */
+    *width: 620px;
+  }
+}
+@media (min-width: 641px) {
+  .page {
+    max-width: 940px;
+    /* Forcing static grid on IE6 and IE7 */
+    *width: 940px;
+  }
+}
+.no-media-queries .page {
+  /* Fallback for browsers not supporting media queries */
+  max-width: 940px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 940px;
+}
+
+.grid {
+  margin-left: -3.33%;
+  margin-right: -3.33%;
+}
+@media (min-width: 321px) {
+  .grid {
+    margin-left: -1.61%;
+    margin-right: -1.61%;
+  }
+}
+@media (min-width: 641px) {
+  .grid {
+    margin-left: -1.06%;
+    margin-right: -1.06%;
+  }
+}
+.no-media-queries .grid {
+  /* Fallback for browsers not supporting media queries */
+  margin-left: -1.06%;
+  margin-right: -1.06%;
+}
+
+.small, .medium, .large {
+  background: hotpink;
+  text-align: center;
+  zoom: 1;
+}
+
+.small {
+  /* Spanning 2 of 4 columns */
+  width: 43.75%;
+}
+@media (min-width: 321px) {
+  .small {
+    /* Spanning 2 of 8 columns */
+    width: 21.87%;
+    margin-left: 1.56%;
+    margin-right: 1.56%;
+  }
+}
+@media (min-width: 641px) {
+  .small {
+    /* Spanning 3 of 12 columns */
+    width: 22.91%;
+    margin-left: 1.04%;
+    margin-right: 1.04%;
+  }
+}
+.no-media-queries .small {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 3 of 12 columns */
+  width: 22.91%;
+  margin-left: 1.04%;
+  margin-right: 1.04%;
+}
+
+.medium {
+  /* Spanning 4 of 4 columns */
+  width: 93.75%;
+}
+@media (min-width: 321px) {
+  .medium {
+    /* Spanning 4 of 8 columns */
+    width: 46.87%;
+    margin-left: 1.56%;
+    margin-right: 1.56%;
+  }
+}
+@media (min-width: 641px) {
+  .medium {
+    /* Spanning 6 of 12 columns */
+    width: 47.91%;
+    margin-left: 1.04%;
+    margin-right: 1.04%;
+  }
+}
+.no-media-queries .medium {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 6 of 12 columns */
+  width: 47.91%;
+  margin-left: 1.04%;
+  margin-right: 1.04%;
+}
+
+.large {
+  /* Spanning 4 of 4 columns */
+  width: 93.75%;
+}
+@media (min-width: 321px) {
+  .large {
+    /* Spanning 8 of 8 columns */
+    width: 96.87%;
+    margin-left: 1.56%;
+    margin-right: 1.56%;
+  }
+}
+@media (min-width: 641px) {
+  .large {
+    /* Spanning 12 of 12 columns */
+    width: 97.91%;
+    margin-left: 1.04%;
+    margin-right: 1.04%;
+  }
+}
+.no-media-queries .large {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 12 of 12 columns */
+  width: 97.91%;
+  margin-left: 1.04%;
+  margin-right: 1.04%;
+}

data/test/css/grid/layout.css

@@ -43,12 +43,16 @@
 
 .page {
   max-width: 330px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 330px;
   padding-left: 1em;
   padding-right: 1em;
 }
 @media (min-width: 990px) {
   .page {
     max-width: 690px;
+    /* Forcing static grid on IE6 and IE7 */
+    *width: 690px;
     padding-left: 50px;
     padding-right: 100px;
   }
@@ -56,6 +60,8 @@
 @media (min-width: 1250px) {
   .page {
     max-width: 1050px;
+    /* Forcing static grid on IE6 and IE7 */
+    *width: 1050px;
     padding-left: 100px;
     padding-right: 100px;
   }
@@ -63,6 +69,8 @@
 .no-media-queries .page {
   /* Fallback for browsers not supporting media queries */
   max-width: 1050px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 1050px;
   padding-left: 100px;
   padding-right: 100px;
 }

data/test/css/grid/responsive.css

@@ -43,6 +43,8 @@
 
 .page {
   max-width: 1050px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 1050px;
   padding-left: 0;
   padding-right: 0;
 }

data/test/css/sprites/layout.css

@@ -1,12 +1,12 @@
 .classic {
-  background-image: url('../../img/test-layout.png?22091386277782');
+  background-image: url('../../img/test-layout.png?17551386780919');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .classic {
     /* Retina sprite */
-    background-image: url('../../img/test-layout@2x.png?22091386277782');
+    background-image: url('../../img/test-layout@2x.png?17551386780919');
     background-size: 718px auto;
   }
 }

data/test/css/sprites/position.css

@@ -3,14 +3,14 @@
  * Compiled 2x sprite has all images aligned to the right
  */
 .vertical {
-  background-image: url('../../img/test-position.png?22091386277782');
+  background-image: url('../../img/test-position.png?17551386780922');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .vertical {
     /* Retina sprite */
-    background-image: url('../../img/test-position@2x.png?22091386277782');
+    background-image: url('../../img/test-position@2x.png?17551386780922');
     background-size: 281px auto;
   }
 }
@@ -20,14 +20,14 @@
  * Compiled 2x sprite has all images aligned to the bottom
  */
 .horizontal {
-  background-image: url('../../img/test-position-alt.png?22091386277782');
+  background-image: url('../../img/test-position-alt.png?17551386780922');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .horizontal {
     /* Retina sprite */
-    background-image: url('../../img/test-position-alt@2x.png?22091386277782');
+    background-image: url('../../img/test-position-alt@2x.png?17551386780922');
     background-size: 421px auto;
   }
 }

data/test/css/sprites/repeat.css

@@ -1,12 +1,12 @@
 .meassure-1, .meassure-2, .meassure-3 {
-  background-image: url('../../img/test-repeat.png?22091386277782');
+  background-image: url('../../img/test-repeat.png?17551386780925');
   background-repeat: repeat-x;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .meassure-1, .meassure-2, .meassure-3 {
     /* Retina sprite */
-    background-image: url('../../img/test-repeat@2x.png?22091386277782');
+    background-image: url('../../img/test-repeat@2x.png?17551386780925');
     background-size: 378px auto;
     background-repeat: no-repeat;
   }

data/test/css/sprites/resolution.css

@@ -2,14 +2,14 @@
  * Min device pixel ratio changed to 1.7
  */
 .classic {
-  background-image: url('../../img/test-retina.png?22091386277782');
+  background-image: url('../../img/test-retina.png?17551386780926');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.7), only screen and (min--moz-device-pixel-ratio: 1.7), only screen and (-moz-min-device-pixel-ratio: 1.7), only screen and (-ms-min-device-pixel-ratio: 1.7), only screen and (-o-min-device-pixel-ratio: 1.7 / 1), only screen and (min-device-pixel-ratio: 1.7), only screen and (min-resolution: 163.2dpi), only screen and (min-resolution: 1.7dppx) {
   .classic {
     /* Retina sprite */
-    background-image: url('../../img/test-retina@2x.png?22091386277782');
+    background-image: url('../../img/test-retina@2x.png?17551386780926');
     background-size: 152px auto;
   }
 }

data/test/css/sprites/retina.css

@@ -1,12 +1,12 @@
 .classic, .indy, .alien {
-  background-image: url('../../img/test-retina.png?22091386277782');
+  background-image: url('../../img/test-retina.png?17551386780928');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .classic, .indy {
     /* Retina sprite */
-    background-image: url('../../img/test-retina@2x.png?22091386277782');
+    background-image: url('../../img/test-retina@2x.png?17551386780928');
     background-size: 152px auto;
   }
 }

data/test/css/sprites/simple.css

@@ -1,5 +1,5 @@
 .classic, .indy {
-  background-image: url('../../img/test-simple.png?22091386277783');
+  background-image: url('../../img/test-simple.png?17551386780929');
   background-repeat: no-repeat;
 }
 

data/test/css/sprites/spacing.css

@@ -1,12 +1,12 @@
 .classic {
-  background-image: url('../../img/test-spacing.png?22091386277783');
+  background-image: url('../../img/test-spacing.png?17551386780933');
   background-repeat: no-repeat;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-ms-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
   .classic {
     /* Retina sprite */
-    background-image: url('../../img/test-spacing@2x.png?22091386277783');
+    background-image: url('../../img/test-spacing@2x.png?17551386780933');
     background-size: 159px auto;
   }
 }

data/test/html/grid/fluid.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Sprite: repeat</title>
+
+    <meta name="description" content="Ezy Grid Demo">
+    <meta name="viewport" content="width=device-width">
+
+    <link href="../../css/grid/layout/fluid.css" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="page">
+      <div class="grid">
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+        <div class="span-1">
+          <p>1</p>
+        </div>
+
+        <div class="span-2">
+          <p>2</p>
+        </div>
+        <div class="span-2">
+          <p>2</p>
+        </div>
+        <div class="span-2">
+          <p>2</p>
+        </div>
+        <div class="span-2">
+          <p>2</p>
+        </div>
+        <div class="span-2">
+          <p>2</p>
+        </div>
+        <div class="span-2">
+          <p>2</p>
+        </div>
+
+        <div class="span-3">
+          <p>3</p>
+        </div>
+        <div class="span-3">
+          <p>3</p>
+        </div>
+        <div class="span-3">
+          <p>3</p>
+        </div>
+        <div class="span-3">
+          <p>3</p>
+        </div>
+
+        <div class="span-4">
+          <p>4</p>
+        </div>
+        <div class="span-4">
+          <p>4</p>
+        </div>
+        <div class="span-4">
+          <p>4</p>
+        </div>
+
+        <div class="span-6">
+          <p>6</p>
+        </div>
+        <div class="span-6">
+          <p>6</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

data/test/html/grid/responsive.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<!--[if lt IE 9]>         <html class="no-media-queries"> <![endif]-->
+<!--[if gte IE 9]><!--> <html> <!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+
+    <title>Sprite: repeat</title>
+
+    <meta name="description" content="Ezy Grid Demo">
+    <meta name="viewport" content="width=device-width">
+
+    <link href="../../css/grid/layout/responsive.css" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="page">
+      <div class="grid">
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="medium">
+          <p>Medium</p>
+        </div>
+        <div class="large">
+          <p>Large</p>
+        </div>
+        <div class="medium">
+          <p>Medium</p>
+        </div>
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="small">
+          <p>Small</p>
+        </div>
+        <div class="medium">
+          <p>Medium</p>
+        </div>
+        <div class="medium">
+          <p>Medium</p>
+        </div>
+        <div class="large">
+          <p>Large</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

data/test/scss/grid/layout/fluid.scss

@@ -0,0 +1,41 @@
+// ------------------------------------
+// Imports
+
+@import "../../../../sass/ezy/grid";
+
+// ------------------------------------
+// Grid settings
+
+$column-width   : 60px;
+$gutter-width   : 20px;
+$grid-padding   : 10px;
+$total-columns  : 12;
+
+// ------------------------------------
+// Initializing grid for cleaner output
+
+@include grid-init();
+
+// ------------------------------------
+// Grid layouts
+
+.page {
+  @include master;
+}
+
+.grid {
+  @include container;
+}
+
+%column {
+  background: hotpink;
+  text-align: center;
+  zoom: 1;
+}
+
+@for $i from 1 through $total-columns {
+  .span-#{$i} {
+    @include span-columns( $i );
+    @extend %column;
+  }
+}

data/test/scss/grid/layout/responsive.scss

@@ -0,0 +1,100 @@
+// ------------------------------------
+// Imports
+
+@import "../../../../sass/ezy/grid";
+
+// ------------------------------------
+// Number of columns on different screen sizes
+
+$columns-mobile   : 4;
+$columns-tablet   : 8;
+$columns-desktop  : 12;
+
+// ------------------------------------
+// Grid settings
+
+$column-width   : 60px;
+$gutter-width   : 20px;
+$grid-padding   : 10px;
+$total-columns  : $columns-mobile; // mobile first
+$is-fluid       : true;
+
+// ------------------------------------
+// Breakpoint settings
+
+// Selector for browsers not supporting media queries
+// (IE8 and down)
+$legacy-selector: ".no-media-queries";
+
+// ------------------------------------
+// Defining media query breakpoints
+
+$breakpoint-tablet  : set-breakpoint( $min: grid-width( $columns-mobile ) + 1 );
+$breakpoint-desktop : set-breakpoint( $min: grid-width( $columns-tablet ) + 1, $legacy-support: true ); // Default for old IE
+
+// ------------------------------------
+// Defining grid layouts
+
+$mobile  : set-layout( $total-columns, $grid-padding ); // mobile first
+$tablet  : set-layout( $columns-tablet, $at-breakpoint: $breakpoint-tablet );
+$desktop : set-layout( $columns-desktop, $at-breakpoint: $breakpoint-desktop );
+
+// ------------------------------------
+// Initializing grid for cleaner output
+
+@include grid-init();
+
+// ------------------------------------
+// Grid layouts
+
+.page {
+  @include each-layout {
+    @include master;
+  }
+}
+
+.grid {
+  @include each-layout {
+    @include container;
+  }
+}
+
+%column {
+  background: hotpink;
+  text-align: center;
+  zoom: 1;
+}
+
+.small {
+  @extend %column;
+  @include span-columns( 2 );       // 2 of 4 columns on mobile
+  @include at-layout( $tablet ) {
+    @include span-columns( 2 );     // 2 of 8 columns on tablet
+  }
+  @include at-layout( $desktop ) {
+    @include span-columns( 3 );     // 3 of 12 columns on desktop
+  }
+}
+
+.medium {
+  @extend %column;
+  @include span-columns( 4 );       // 4 of 4 columns on mobile
+  @include at-layout( $tablet ) {
+    @include span-columns( 4 );     // 4 of 8 columns on tablet
+  }
+  @include at-layout( $desktop ) {
+    @include span-columns( 6 );     // 6 of 12 columns on desktop
+  }
+}
+
+.large {
+  @extend %column;
+  @include span-columns( 4 );       // 4 of 4 columns on mobile
+  @include at-layout( $tablet ) {
+    @include span-columns( 8 );     // 8 of 8 columns on tablet
+  }
+  @include at-layout( $desktop ) {
+    @include span-columns( 12 );    // 12 of 12 columns on desktio
+  }
+}
+

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ezy
 version: !ruby/object:Gem::Version
-  version: 0.2.6.alpha
+  version: 0.2.7.alpha
 platform: ruby
 authors:
 - Frej Raahede Nielsen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-12-03 00:00:00.000000000 Z
+date: 2013-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -67,6 +67,8 @@ files:
 - test/css/grid/elastic.css
 - test/css/grid/fluid.css
 - test/css/grid/gutter.css
+- test/css/grid/layout/fluid.css
+- test/css/grid/layout/responsive.css
 - test/css/grid/layout.css
 - test/css/grid/offset.css
 - test/css/grid/responsive.css
@@ -83,6 +85,8 @@ files:
 - test/scss/grid/elastic.scss
 - test/scss/grid/fluid.scss
 - test/scss/grid/gutter.scss
+- test/scss/grid/layout/fluid.scss
+- test/scss/grid/layout/responsive.scss
 - test/scss/grid/layout.scss
 - test/scss/grid/offset.scss
 - test/scss/grid/responsive.scss
@@ -96,7 +100,8 @@ files:
 - test/scss/sprites/simple.scss
 - test/scss/sprites/size.scss
 - test/scss/sprites/spacing.scss
-- test/html/grid/layout-1.html
+- test/html/grid/fluid.html
+- test/html/grid/responsive.html
 - test/html/sprites/repeat.html
 - test/html/sprites/retina.html
 - test/html/sprites/simple.html
@@ -138,7 +143,7 @@ files:
 - test/img/test-spacing@2x/alien.png
 - test/img/test-spacing@2x/classic.png
 - test/img/test-spacing@2x/indy.png
-homepage: http://github.com/raahede/
+homepage: http://raahede.github.io/ezy/
 licenses:
 - MIT
 metadata: {}
@@ -158,7 +163,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.1.11
+rubygems_version: 2.1.10
 signing_key: 
 specification_version: 4
 summary: The developer's toolbox for responsive websites

data/test/html/grid/layout-1.html

@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>Sprite: repeat</title>
-
-    <meta name="description" content="Ezy Grid Demo">
-    <meta name="viewport" content="width=device-width">
-
-    <link href="../../css/grid/layout-1.css" rel="stylesheet">
-
-  </head>
-  <body>
-    <div class="page">
-      <div class="grid">
-        <div class="column pullout">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column offset">
-          Test
-        </div>
-        <div class="column pullout">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-        <div class="column">
-          Test
-        </div>
-      </div>
-    </div>
-  </body>
-</html>