ezy 0.3.3 → 0.4.0.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ea7c45ea129dca650a63acc44ab043dbc39c2574
-  data.tar.gz: b0da396f0be98e2b8c6f9237e17f5fe22eec0ae7
+  metadata.gz: 61d8cb214a5395a536ee7de2ea2c6babd3575030
+  data.tar.gz: c50f7357b4649541d340f552a92bce96d555575f
 SHA512:
-  metadata.gz: 2adc99bf0c320be16d0c33754a000d5b3ca4317446bb4bbf905da099d5ebaf9c4f9a582fbb92a7ed0237ddad21c5af6a06f76796e07c582c06172f147576f2b1
-  data.tar.gz: 96b005ac29c7ce246bc10d92c326017fab0ff0c30d73bc427a59bec4971c5d5a8b9723b7acd8484558b550659af37f92ed6882cc373134a784654bb5bfbbf91e
+  metadata.gz: 1d52afc72500df4e13a8f369e8fef24229612d4b85133d0d858ade617b34f57c3b7565d03f357e6e75d16df6fb9ef6124e64c2d5493a154b8915d0b0c102d4dd
+  data.tar.gz: 6de165559144128b590ecabeaffa626918441ac4456a64d903ed529b561eaaf98d8da1e2654dd52a5ac9e4969ff3f34c1c7a315eaaad7dec9f8c8826b627030b

data/VERSION

@@ -1 +1 @@
-0.3.3
+0.4.0.beta

data/ezy.gemspec

@@ -2,8 +2,8 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.3.3"
-  s.date = "2014-04-16"
+  s.version = "0.4.0.beta"
+  s.date = "2014-04-06"
 
   # Gem Details
   s.name = "ezy"
@@ -28,7 +28,7 @@ Gem::Specification.new do |s|
   s.files += Dir.glob("test/img/test-*/*.*")
 
   # Gem Bookkeeping
-  s.rubygems_version = %q{1.3.6}
-  s.add_dependency(%q<compass>, [">= 0.12.2"])
-  s.add_dependency(%q<sass>, [">= 3.2.0"])
+  s.rubygems_version = %q{2.2.2}
+  s.add_dependency(%q<compass>, [">= 1.0.0"])
+  s.add_dependency(%q<sass>, [">= 3.3.4"])
 end

data/sass/ezy/_grid.scss

@@ -13,7 +13,6 @@ $gutter-property  : "margin"  !default;
 $total-columns    : 12        !default;
 $is-fluid         : true      !default;
 $grid-padding     : 0         !default;
-$debug-selector   : "body"    !default;
 
 // ---------------------------------------------------------------------------
 // Variables used in grid context
@@ -48,10 +47,10 @@ $init-gutter-property: $gutter-property;
 
 // ---------------------------------------------------------------------------
 // @mixin master
-//
+// 
 // Sets width on page. If the grid is fluid, it's set as a max-width
 // Extends the grid master placeholder selector
-// $context : Number of columns in the current context.
+// $context : Number of columns in the current context. 
 
 @mixin master(
   $context        : $total-columns,
@@ -78,7 +77,7 @@ $init-gutter-property: $gutter-property;
 
   @if $grid-padding-left {  padding-left: $grid-padding-left; }
   @if $grid-padding-right { padding-right: $grid-padding-right; }
-
+  
   @if ( not $at-breakpoint ) {
     @extend %ezy-master;
   }
@@ -94,7 +93,7 @@ $init-gutter-property: $gutter-property;
 
 // ---------------------------------------------------------------------------
 // @mixin container
-//
+// 
 // Sets width on page. If the grid is fluid, it's set as a max-width
 // Extends the grid master placeholder selector
 // $context           :   Number of columns in the current context
@@ -120,15 +119,6 @@ $init-gutter-property: $gutter-property;
   @if (not $at-breakpoint) {
     @extend %ezy-container;
   }
-  // Debug info about layouts
-  @if $debug {
-    @include debug-layout-styles;
-    @include debug-layout-info("CONTEXT :: columns: #{$total-columns} | column-width: #{$column-width} | gutter-width: #{$gutter-width} | at-breakpoint: #{$at-breakpoint}");
-    &:before {
-      @include span-columns( $total-columns );
-      width: auto;
-    }
-  }
 }
 
 // ---------------------------------------------------------------------------
@@ -149,9 +139,9 @@ $init-gutter-property: $gutter-property;
 
 // ---------------------------------------------------------------------------
 // @mixin grid-init
-//
+// 
 // Prints out placeholder selectors used with columns. Helps reduce the CSS output.
-//
+// 
 // Should be called after setting grid variables:
 // ----------------
 // $column-width
@@ -161,9 +151,9 @@ $init-gutter-property: $gutter-property;
 // ----------------
 
 @mixin grid-init( $columns: $total-columns ) {
-  $grid-init            : true;
-  $grid-init-index      : $grid-init-index + 1;
-  $init-gutter-property : $gutter-property;
+  $grid-init            : true !global;
+  $grid-init-index      : $grid-init-index + 1 !global;
+  $init-gutter-property : $gutter-property !global;
 
   // Placeholder selector for fluid grid columns
   @for $i from 1 through $columns {
@@ -188,7 +178,7 @@ $init-gutter-property: $gutter-property;
 
 // ---------------------------------------------------------------------------
 // @mixin span-columns
-//
+// 
 // Sets width and gutter on columns
 // Uses @extend for gutters outside media queries if grid-init() has been called
 // $columns           :   Number of columns to span
@@ -221,13 +211,13 @@ $init-gutter-property: $gutter-property;
     @include debug-info( $columns, $context );
   }
 
-  // Setting base column styles when a column can't
+  // Setting base column styles when a column can't 
   // have extended the base columns placeholder selector
   @if ( not $grid-init ) {
     @include column-base;
   }
 
-  // Some crazy logic to set gutter or
+  // Some crazy logic to set gutter or 
   // extend column placeholder selectors
 
   @if $grid-init and ( not $at-breakpoint )  {
@@ -240,14 +230,14 @@ $init-gutter-property: $gutter-property;
       } @else {
         @extend %ezy-column-#{ $grid-init-index }-#{ $context };
       }
-
+      
     } @else {
       @extend %ezy-column-#{ $grid-init-index };
     }
 
   }
   @if ( $gutter-property and $gutter-property != $init-gutter-property )
-      or ( not $grid-init )
+      or ( not $grid-init ) 
       or $at-breakpoint {
 
     @if $is-fluid and $context {
@@ -257,7 +247,7 @@ $init-gutter-property: $gutter-property;
       @warn $context-warn;
     } @else {
       @include gutters( $gutter-property: $gutter-property );
-    }
+    } 
 
   }
 }

data/sass/ezy/_media.scss

@@ -36,7 +36,7 @@
   
   // Setting variable for reference 
   // in the content of the mixin call
-  $at-breakpoint: true;
+  $at-breakpoint: true !global;
 
   @media #{ nth( $breakpoint, 1 ) } {
     @content;
@@ -49,7 +49,7 @@
   }
 
   // Reset reference
-  $at-breakpoint: false;
+  $at-breakpoint: false !global;
 }
 
 

data/sass/ezy/_sprites.scss

@@ -238,7 +238,7 @@ $sprite-maps: ();
       );
     }
 
-    $sprite-maps: append( $sprite-maps, ( $name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina ), comma );
+    $sprite-maps: append( $sprite-maps, ( $name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina ), comma ) !global;
 
     %sprite-placeholder-#{ $name } {
       background-image: sprite-url( $sprite );

data/sass/ezy/grid/_debug.scss

@@ -1,25 +1,16 @@
 // ---------------------------------------------------------------------------
-// @mixin
-
-@mixin debug-text {
-  background-color: #EBEBEB;
-  border: 1px solid #7A7A7A;
-  color: #000;
-  display: inline-block;
-  font-family: monospace, serif;
-  font-size: 8px;
-  left: 0;
-  line-height: 11px;
-  padding: 0px 2px;
-  position: absolute;
-  top: 0;
-  z-index: 999;
-}
+// @mixin 
 
 @mixin debug-styles {
   position: relative;
   &:before {
-    @include debug-text;
+    background-color: rgba(0,0,0,.2);
+    display: inline-block;
+    font-family: monospace, serif;
+    font-size: 8px;
+    line-height: 11px;
+    padding: 0px 2px;
+    position: absolute;
   }
 }
 
@@ -29,24 +20,3 @@
     content: "#{ $debug-text }";
   }
 }
-
-@mixin debug-layout-styles {
-  @include debug-styles;
-  &:before {
-    bottom: 0;
-    padding: 1px 4px;
-    top: auto;
-    white-space: pre-wrap;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -o-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-  }
-}
-
-@mixin debug-layout-info( $info ) {
-  &:before {
-    content: "#{ $info }";
-  }
-}

data/sass/ezy/grid/_layout.scss

@@ -33,7 +33,7 @@ $layouts: ();
   $layout: ( $columns ($grid-padding) ($at-breakpoint) $column-width $gutter-width $legacy-support $is-fluid );
 
   // Storing layout
-  $layouts: append( $layouts, $layout, comma );
+  $layouts: append( $layouts, $layout, comma ) !global;
 
   @return $layout;
 
@@ -42,9 +42,9 @@ $layouts: ();
 // ---------------------------------------------------------------------------
 // @mixin at-layout
 
-@mixin at-layout(
-  $layout,
-  $legacy-support : false
+@mixin at-layout( 
+  $layout, 
+  $legacy-support : false 
   ) {
 
   // Storing reference to global variables
@@ -56,22 +56,22 @@ $layouts: ();
   $gutter-width-ref   : $gutter-width;
 
   // Using settings from layout
-  $total-columns  : nth( $layout, 1 );
-  $grid-padding   : nth( $layout, 2 );
-  $at-breakpoint  : nth( $layout, 3 );
-  $column-width   : nth( $layout, 4 );
-  $gutter-width   : nth( $layout, 5 );
-  $is-fluid       : nth( $layout, 7 );
+  $total-columns  : nth( $layout, 1 ) !global;
+  $grid-padding   : nth( $layout, 2 ) !global;
+  $at-breakpoint  : nth( $layout, 3 ) !global;
+  $column-width   : nth( $layout, 4 ) !global;
+  $gutter-width   : nth( $layout, 5 ) !global;
+  $is-fluid       : nth( $layout, 7 ) !global;
 
   // Use general settings if false
   @if not $grid-padding {
-    $grid-padding : $grid-padding-ref;
+    $grid-padding : $grid-padding-ref !global;
   }
   @if not $column-width {
-    $column-width : $column-width-ref;
+    $column-width : $column-width-ref !global;
   }
   @if not $gutter-width {
-    $gutter-width : $gutter-width-ref;
+    $gutter-width : $gutter-width-ref !global;
   }
 
   // Get legacy support setting from layout if not forced
@@ -88,12 +88,12 @@ $layouts: ();
   }
 
   // Resetting references to original values
-  $at-breakpoint  : $at-breakpoint-ref;
-  $is-fluid       : $is-fluid-ref;
-  $total-columns  : $total-columns-ref;
-  $grid-padding   : $grid-padding-ref;
-  $column-width   : $column-width-ref;
-  $gutter-width   : $gutter-width-ref;
+  $at-breakpoint  : $at-breakpoint-ref !global;
+  $is-fluid       : $is-fluid-ref !global;
+  $total-columns  : $total-columns-ref !global;
+  $grid-padding   : $grid-padding-ref !global;
+  $column-width   : $column-width-ref !global;
+  $gutter-width   : $gutter-width-ref !global;
 }
 
 // ---------------------------------------------------------------------------

data/test/css/sprites/layout.css

@@ -1,12 +1,12 @@
 .classic {
-  background-image: url('../../img/test-layout.png?10341392543291');
+  background-image: url('../../img/test-layout.png?17351396798531');
   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?10341392543291');
+    background-image: url('../../img/test-layout@2x.png?17351396798531');
     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?10341392543291');
+  background-image: url('../../img/test-position.png?17351396798536');
   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?10341392543291');
+    background-image: url('../../img/test-position@2x.png?17351396798536');
     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?10341392543291');
+  background-image: url('../../img/test-position-alt.png?17351396798536');
   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?10341392543291');
+    background-image: url('../../img/test-position-alt@2x.png?17351396798536');
     background-size: 421px auto;
   }
 }

data/test/css/sprites/repeat.css

@@ -1,26 +1,26 @@
 .meassure-1, .meassure-2, .meassure-3 {
-  background-image: url('../../img/test-repeat.png?10341392543291');
+  background-image: url('../../img/test-repeat.png?17351396798538');
   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?10341392543291');
+    background-image: url('../../img/test-repeat@2x.png?17351396798538');
     background-size: 378px auto;
     background-repeat: no-repeat;
   }
 }
 
 .meassure-1 {
-  background-position: 0 -100px;
+  background-position: 0 0;
   width: 378px;
   height: 50px;
 }
 @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 {
     /* Retina sprite */
-    background-position: -252px -100px;
+    background-position: -252px 0;
   }
 }
 
@@ -37,13 +37,13 @@
 }
 
 .meassure-3 {
-  background-position: 0 0;
+  background-position: 0 -100px;
   width: 378px;
   height: 50px;
 }
 @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-3 {
     /* Retina sprite */
-    background-position: 0 0;
+    background-position: 0 -100px;
   }
 }

data/test/css/sprites/resolution.css

@@ -2,24 +2,24 @@
  * Min device pixel ratio changed to 1.7
  */
 .classic {
-  background-image: url('../../img/test-retina.png?10341392543291');
+  background-image: url('../../img/test-retina.png?17351396798540');
   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?10341392543291');
+    background-image: url('../../img/test-retina@2x.png?17351396798540');
     background-size: 152px auto;
   }
 }
 
 .classic {
-  background-position: 0 -281px;
+  background-position: 0 -141px;
 }
 @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-position: 0 -140px;
+    background-position: 0 0;
   }
 }