ezy 0.2.0 → 0.2.6.alpha

data/sass/ezy/_sprites.scss

@@ -1,3 +1,4 @@
+@import "settings";
 
 // ---------------------------------------------------------------------------
 // Sprites
@@ -8,10 +9,9 @@
 // https://github.com/chriseppstein/compass/issues/897
 
 // ---------------------------------------------------------------------------
-// Setting defaults
+// Global variable for device pixel ratio
 
 $min-device-pixel-ratio: 2 !default;
-$legacy-selector: ".no-media-queries" !default;
 
 // ---------------------------------------------------------------------------
 // Sprite map store
@@ -160,34 +160,18 @@ $sprite-maps: ();
 // 
 // Retina media query mixin
 
-@mixin at-retina( $ratio: 2, $query: false ) {
-  @if $query {
-    // Extending retina media query with breakpoint query
-    @media
-    only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
-    only screen and (   min--moz-device-pixel-ratio: #{ $ratio }) and #{ $query },
-    only screen and (   -moz-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
-    only screen and (    -ms-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
-    only screen and (     -o-min-device-pixel-ratio: #{ $ratio }/1) and #{ $query },
-    only screen and (        min-device-pixel-ratio: #{ $ratio }) and #{ $query },
-    only screen and (                min-resolution: #{ $ratio * 96 }dpi) and #{ $query },
-    only screen and (                min-resolution: #{ $ratio }dppx) and #{ $query } { 
-      @content;
-    }
-  } @else {
-    @media
-    only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }),
-    only screen and (   min--moz-device-pixel-ratio: #{ $ratio }),
-    only screen and (   -moz-min-device-pixel-ratio: #{ $ratio }),
-    only screen and (    -ms-min-device-pixel-ratio: #{ $ratio }),
-    only screen and (     -o-min-device-pixel-ratio: #{ $ratio }/1),
-    only screen and (        min-device-pixel-ratio: #{ $ratio }),
-    only screen and (                min-resolution: #{ $ratio * 96 }dpi),
-    only screen and (                min-resolution: #{ $ratio }dppx) { 
-      @content;
-    }
+@mixin at-retina( $ratio: 2 ) {
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }),
+  only screen and (   min--moz-device-pixel-ratio: #{ $ratio }),
+  only screen and (   -moz-min-device-pixel-ratio: #{ $ratio }),
+  only screen and (    -ms-min-device-pixel-ratio: #{ $ratio }),
+  only screen and (     -o-min-device-pixel-ratio: #{ $ratio }/1),
+  only screen and (        min-device-pixel-ratio: #{ $ratio }),
+  only screen and (                min-resolution: #{ $ratio * 96 }dpi),
+  only screen and (                min-resolution: #{ $ratio }dppx) { 
+    @content;
   }
-  
 }
 
 // ---------------------------------------------------------------------------
@@ -237,15 +221,13 @@ $sprite-maps: ();
         $clean-up:  $clean-up-retina
       );
     }
-    $sprite-settings: $name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina;
-    @if $sprite-maps == () {
-      $sprite-maps: ($sprite-settings);
-    } @else {
-      $sprite-maps: $sprite-maps, ($sprite-settings);
-    }
+
+    $sprite-maps: append( $sprite-maps, ( $name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina ), comma );
+
     %sprite-placeholder-#{ $name } {
       background-image: sprite-url( $sprite );
       background-repeat: $repeat;
+      // background-position-x: $position;
     }
     %sprite-placeholder-#{ $name }-retina {
       @if $sprite-retina {
@@ -256,6 +238,9 @@ $sprite-maps: ();
           @if $repeat-retina != $repeat { 
             background-repeat: $repeat-retina;
           }
+          // @if $position-retina != $position { 
+          //   background-position-x: $position-retina;
+          // }
         }
       }
     }
@@ -274,9 +259,7 @@ $sprite-maps: ();
   $offset-y: 0,           // background offset y (optional)
   $use-retina: true,      // wether to use retina on hi-res screens (optional)
   $offset-x-retina: null, // background offset x on retina (optional)
-  $offset-y-retina: null, // background offset y on retina (optional)
-  $at-breakpoint: false,  // media query
-  $legacy-support: false  // fallback for media query
+  $offset-y-retina: null  // background offset y on retina (optional)
 ) {
 
   @if $offset-x-retina == null { $offset-x-retina: $offset-x; }
@@ -288,63 +271,27 @@ $sprite-maps: ();
     $retina-map: return-sprite-map( $name, $retina: true );
   }
 
-  // Catching media breakpoints from set-breakpoint
-  @if type-of( $at-breakpoint ) == "list" {
-    @if ( not $legacy-support ) and length( $at-breakpoint ) > 1 {
-      // Inheriting legacy support setting from set-breakpoint
-      $legacy-support: nth( $at-breakpoint, 2 );
-    }
-    $at-breakpoint: nth( $at-breakpoint, 1 );
-  }
-
   @if $map and $image {
     $pos: sprite-position($map, $image);
     $pos-x: return-offset( nth( $pos, 1 ), $offset-x, "$offset-x must be a number, a pixel value or a percentage!" );
     $pos-y: return-offset( nth( $pos, 2 ), $offset-y, "$offset-y must be a number, a pixel value or a percentage!" );
-    
-    @if $at-breakpoint {
-      @media #{ $at-breakpoint } {
-        background-position: $pos-x $pos-y;
-        // Settings that would usually be set by extending %sprite-placeholder-#{ $name }
-        // @extend is not possible from within a media query
-        background-image: sprite-url( $map );
-        background-repeat: return-sprite-setting( $name, 6 );
-      }
-    } @else {
-      background-position: $pos-x $pos-y;
-      @extend %sprite-placeholder-#{ $name };
-    }
-
-    @if $legacy-support {
-      #{ $legacy-selector } & {
-        background-position: $pos-x $pos-y;
-        @extend %sprite-placeholder-#{ $name };
-      }
-    }
-    
+    background-position: $pos-x $pos-y;
     @if $retina-map {
-      @include at-retina( $min-device-pixel-ratio, $at-breakpoint ) {
+      @include at-retina( $min-device-pixel-ratio ) {
         /* Retina sprite */
         $pos: sprite-position($retina-map, $image);
         $pos-x: return-offset( nth( $pos, 1 )/2, $offset-x-retina, "$offset-x-retina must be a number, a pixel value or a percentage!" );
         $pos-y: return-offset( nth( $pos, 2 )/2, $offset-y-retina, "$offset-y-retina must be a number, a pixel value or a percentage!" );
         background-position: $pos-x $pos-y;
-        @if $at-breakpoint {
-          // Settings that would usually be set by extending %sprite-placeholder-#{ $name }
-          // @extend is not possible from within a media query
-          background-image: sprite-url( $retina-map );
-          background-size: image-width( sprite-path( $retina-map ) )/2 auto;
-          @if return-sprite-setting( $name, 7 ) != return-sprite-setting( $name, 6 ) { 
-            background-repeat: return-sprite-setting( $name, 7 );
-          }
-        }
-      }
-      @if ( not $at-breakpoint ) {
-        // Set to optional because placeholder only exists if a retina sprite is set
-        @extend %sprite-placeholder-#{ $name }-retina !optional;
       }
     }
   }
+
+  @extend %sprite-placeholder-#{ $name };
+  @if $use-retina {
+    // Set to optional because placeholder only exists if a retina sprite is set
+    @extend %sprite-placeholder-#{ $name }-retina !optional;
+  }
 }
 
 

data/sass/ezy/grid/_debug.scss

@@ -0,0 +1,22 @@
+// ---------------------------------------------------------------------------
+// @mixin 
+
+@mixin debug-styles {
+  position: relative;
+  &:before {
+    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;
+  }
+}
+
+@mixin debug-info( $columns, $context: $total-columns ) {
+  $debug-text: "#{ $columns } of #{ $context }";
+  &:before {
+    content: "#{ $debug-text }";
+  }
+}

data/sass/ezy/grid/_helpers.scss

@@ -0,0 +1,249 @@
+// ---------------------------------------------------------------------------
+// Grid helpers
+// Functions and mixins used in and with ezy grid
+
+// ---------------------------------------------------------------------------
+// @function layout-width
+// 
+// Returns width based on given number of culumns
+// $columns :   Number of columns to calculate width from
+// @return  :   Width in the same unit as $column-width and $gutter-width
+
+@function layout-width( $columns ) {
+  @if comparable( $column-width, $gutter-width ) {
+    @return $columns * ( $column-width + $gutter-width ) - $gutter-width;
+  } @else {
+    @warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @function grid-width
+// 
+// Returns full width of a grid, based on number of columns. 
+// Similar to layout width, but adds grid padding
+// $columns       :   Number of columns to calculate width from
+// $grid-padding  :   Grid padding to add on both sides of layout width. 
+//                :   Defaults to globally set $grid-padding
+// @return        :   Width in the same unit as $column-width, $gutter-width and $grid-padding
+
+@function grid-width( 
+  $columns, 
+  $grid-padding: $grid-padding 
+  ) {
+  @if type-of( $grid-padding ) == "list" {
+    // If grid padding is set as 2 values (in case left 
+    // and right are not the same), add the two
+    $grid-padding: nth( $grid-padding, 1 ) + nth( $grid-padding, 2 );
+  }
+  @if comparable( layout-width( $columns ), $grid-padding ) {
+    @return layout-width( $columns ) + $grid-padding * 2;
+  } @else {
+    @warn "$grid-padding must have the same unit as $column-width and $gutter-width. #{ unit( $grid-padding ) }'s and #{ unit( layout-width( $columns ) ) }'s are not comparable.";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @function context-width
+// 
+// Returns width based on given number of culumns, plus an extra gutter
+// Used for % calculations in the grid
+// $columns :   Number of columns to calculate width from
+// @return  :   Width in the same unit as $column-width and $gutter-width
+
+@function context-width( $columns ) {
+  @return layout-width( $columns ) + $gutter-width;
+}
+
+// ---------------------------------------------------------------------------
+// @function columns
+// 
+// Same as layout-width( $columns ), but renamed for better context awareness
+
+@function span-column-width( $columns ) {
+  @return layout-width( $columns );
+}
+
+// ---------------------------------------------------------------------------
+// @function columns
+// 
+// Returns a span columns width. If the grid is fluid, it will be as a 
+// percentage of the context width
+
+@function columns( 
+  $columns, 
+  $context: $total-columns 
+  ) {
+  @if $is-fluid and $context {
+    @return percentage-round( layout-width( $columns ) / context-width( $context ) );
+  } @else if $is-fluid {
+    @warn $context-warn;
+  } @else {
+    @return layout-width( $columns ); 
+  } 
+}
+
+// ---------------------------------------------------------------------------
+// @function gutter
+// 
+// Returns gutter in the same unit as $gutter-width if grid is static
+// Returns gutter as a percentage of the context if grid is fluid
+// $context :   Number of columns in the current context. 
+//          :   If set to false, the returned value is as in static grid 
+// @return  :   Width as $gutter-width or as a percentage of the context
+
+@function gutter(
+  $context: $total-columns
+  ) {
+  @if $is-fluid and $context {
+    @return ( percentage-round( ( $gutter-width ) / context-width( $context ) ) );
+  } @else if $is-fluid {
+    @warn $context-warn;
+  } @else {
+    @return $gutter-width; 
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin gutters
+// 
+// Sets gutters using the gutter( $context ) function
+// $context           :   Number of columns in the current context. 
+//                    :   Only mandatory if grid is fluid 
+// $gutter-property   :   Set to "margin" or "padding"
+
+@mixin gutters( 
+  $context          : $total-columns,
+  $gutter-property  : $gutter-property
+  ) {
+  @if $gutter-property == "margin" or $gutter-property == "padding" {
+    #{ $gutter-property }: {
+      left: gutter( $context ) / 2;
+      right: gutter( $context ) / 2;
+    }
+  } @else {
+    @warn "$gutter-property must be set to either 'margin' or 'padding'";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin offset
+// 
+// Applies offset to the left/right. The offset is based on
+// a number of columns
+// $direction         :   Which direction to apply the offset
+// $columns           :   Number of columns to offset with 
+// $context           :   Number of columns in the current context
+// $gutter-property   :   Which gutter property the gutter is set with.
+//                    :   Affects the way the offset is applied
+
+@mixin offset(
+  $direction,
+  $columns,
+  $context          : $total-columns,
+  $gutter-property  : $gutter-property
+  ) {
+  /* Offset #{ $direction } by #{ $columns } columns */
+  $offset: columns( $columns, $context ) + gutter( $context ) * 1.5;
+  @if $gutter-property == "padding" {
+    $offset: columns( $columns, $context ) + gutter( $context );
+  }
+  @if $direction == "both" {
+    margin: {
+      left: $offset;
+      right: $offset;
+    }
+  } @else {
+    margin-#{ $direction }: $offset;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin pullout
+// Pulls the column out to the left/right with a negative margin
+// $direction         :   Which direction to apply the pull
+// $columns           :   Number of columns to pull 
+// $context           :   Number of columns in the current context
+// $gutter-property   :   Which gutter property the gutter is set with.
+//                    :   Affects the way the pull is applied
+
+@mixin pullout(
+  $direction,
+  $columns,
+  $context          : $total-columns,
+  $gutter-property  : $gutter-property
+  ) {
+  /* Pull out to the #{ $direction } by #{ $columns } columns */
+  $offset: columns( $columns, $context ) + gutter( $context ) / 2;
+  @if $gutter-property == "padding" {
+    $offset: columns( $columns, $context ) + gutter( $context );
+  }
+  margin-#{ $direction }: -($offset);
+}
+
+// ---------------------------------------------------------------------------
+// @mixin reset
+// Resets a column to its original state from a pullout or offset
+// $direction         :   Which direction to reset.
+//                    :   Defaults to "both"
+// $context           :   Number of columns in the current context
+// $gutter-property   :   Which gutter property the gutter is set with.
+//                    :   Used to re-apply gutter in the right property
+
+@mixin reset(
+  $direction        : "both",
+  $context          : $total-columns,
+  $gutter-property  : $gutter-property
+  ) {
+  @if $gutter-property == "padding" {
+    @if $direction == "both" {
+      margin: {
+        left: 0;
+        right: 0;
+      }
+    } @else {
+      margin-#{ $direction }: 0;
+    }
+  } @else {
+    @if $direction == "both" {
+      @include gutters( $context, $gutter-property );
+    } @else {
+      #{ $gutter-property }-#{ $direction }: gutter( $context ) / 2;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// @mixin remove-offset
+// Mapping @mixin reset()
+
+@mixin remove-offset(
+  $direction        : "both",
+  $context          : $total-columns,
+  $gutter-property  : $gutter-property
+  ) {
+  /* Removing offset #{ $direction } */
+  @include reset( 
+    $direction        : $direction, 
+    $context          : $context, 
+    $gutter-property  : $gutter-property 
+  );
+}
+
+// ---------------------------------------------------------------------------
+// @mixin remove-pullout
+// Mapping @mixin reset()
+
+@mixin remove-pullout(
+  $direction        : "both",
+  $context          : $total-columns,
+  $gutter-property  : $gutter-property
+  ) {
+  /* Removing pullout #{ $direction } */
+  @include reset( 
+    $direction        : $direction, 
+    $context          : $context, 
+    $gutter-property  : $gutter-property 
+  );
+}
+

data/sass/ezy/grid/_layout.scss

@@ -0,0 +1,78 @@
+// ---------------------------------------------------------------------------
+// Importing dependencies
+
+@import "../media";
+
+// ---------------------------------------------------------------------------
+// Layout store, for use in each-layout
+
+$layouts: ();
+
+// ---------------------------------------------------------------------------
+// @function set-layout
+
+@function set-layout(
+  $columns,
+  $grid-padding   : false,
+  $at-breakpoint  : false,
+  $legacy-support : false
+  ) {
+
+  // Catching media breakpoints from set-breakpoint
+  @if type-of( $at-breakpoint ) == "list" {
+    @if ( not $legacy-support ) and length( $at-breakpoint ) > 1 {
+      // Inheriting legacy support setting from set-breakpoint
+      $legacy-support: nth( $at-breakpoint, 2 );
+      $at-breakpoint: nth( $at-breakpoint, 1 );
+    }
+  }
+
+  $layout: ( $columns ($grid-padding) ($at-breakpoint) $legacy-support );
+
+  // Storing layout
+  $layouts: append( $layouts, $layout, comma );
+
+  @return $layout;
+
+}
+
+// ---------------------------------------------------------------------------
+// @mixin at-layout
+
+@mixin at-layout( $layout ) {
+
+  // Storing reference to global variables
+  $at-breakpoint-ref  : $at-breakpoint;
+  $total-columns-ref  : $total-columns;
+  $grid-padding-ref   : $grid-padding;
+
+  $total-columns  : nth( $layout, 1 );
+  $grid-padding   : nth( $layout, 2 );
+  $at-breakpoint  : nth( $layout, 3 );
+  $legacy-support : nth( $layout, 4 );
+
+  @if $at-breakpoint {
+    @include at-breakpoint( $at-breakpoint $legacy-support ) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+
+  // Resetting references to original values
+  $at-breakpoint  : $at-breakpoint-ref;
+  $total-columns  : $total-columns-ref;
+  $grid-padding   : $grid-padding-ref;
+
+}
+
+// ---------------------------------------------------------------------------
+// @mixin each-layout
+
+@mixin each-layout( $layouts: $layouts ) {
+  @each $layout in $layouts {
+    @include at-layout( $layout ) {
+      @content;
+    }
+  }
+}

data/test/css/grid/elastic.css

@@ -1,4 +1,9 @@
-/* -------------------------------------------------------------------- *
+/* ------------------------------------------------- *
+ *  Ezy Grid by Frej Raahede Nielsen
+ *  http://github.com/raahede/ezy
+ * ------------------------------------------------- *
+ */
+/* ------------------------------------------------- *
  *  Micro Clearfix 
  *  http://nicolasgallagher.com/micro-clearfix-hack/
  */
@@ -21,7 +26,7 @@
   *zoom: 1;
 }
 
-/* -------------------------------------------------------------------- */
+/* --- End clearfix --- */
 .page {
   margin-left: auto;
   margin-right: auto;
@@ -29,6 +34,8 @@
 
 .page {
   max-width: 70em;
+  padding-left: 0;
+  padding-right: 0;
   font-size: 14px;
 }
 @media (min-width: 20.1em) {
@@ -55,6 +62,8 @@
   /* Spanning 4 of 12 columns */
   width: 30.55%;
   float: left;
-  margin-left: 1.38%;
-  margin-right: 1.38%;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+  margin-left: 1.385%;
+  margin-right: 1.385%;
 }

data/test/css/grid/fluid.css

@@ -1,4 +1,9 @@
-/* -------------------------------------------------------------------- *
+/* ------------------------------------------------- *
+ *  Ezy Grid by Frej Raahede Nielsen
+ *  http://github.com/raahede/ezy
+ * ------------------------------------------------- *
+ */
+/* ------------------------------------------------- *
  *  Micro Clearfix 
  *  http://nicolasgallagher.com/micro-clearfix-hack/
  */
@@ -21,7 +26,7 @@
   *zoom: 1;
 }
 
-/* -------------------------------------------------------------------- */
+/* --- End clearfix --- */
 .page {
   margin-left: auto;
   margin-right: auto;
@@ -29,6 +34,8 @@
 
 .page {
   max-width: 1050px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .grid {
@@ -43,33 +50,42 @@
   /* Spanning 2 of 12 columns */
   width: 13.88%;
   float: left;
-  margin-left: 1.38%;
-  margin-right: 1.38%;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+  margin-left: 1.385%;
+  margin-right: 1.385%;
 }
 
 .span-columns-4 {
   /* Spanning 4 of 12 columns */
   width: 30.55%;
   float: left;
-  margin-left: 1.38%;
-  margin-right: 1.38%;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+  margin-left: 1.385%;
+  margin-right: 1.385%;
 }
 
 .span-columns-6 {
   /* Spanning 6 of 12 columns */
   width: 47.22%;
   float: left;
-  margin-left: 1.38%;
-  margin-right: 1.38%;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+  margin-left: 1.385%;
+  margin-right: 1.385%;
 }
 
 /* -------------------------------------------------------------------- *
  * Grid columns: using grid-init()
  */
 .span-columns-2, .span-columns-4, .span-columns-6, .span-columns-18 {
+  /* Grid column base at a 12-column context */
+  margin-left: 1.385%;
+  margin-right: 1.385%;
   float: left;
-  margin-left: 1.38%;
-  margin-right: 1.38%;
+  /* Fixing double margin on IE6 */
+  _display: inline;
 }
 
 .span-columns-2 {