ezy 0.3.2 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2bdfc0c5bf994a0c27ecfa35665a44c68326a6a9
-  data.tar.gz: 1ef2d1cc226ea69cc8bcb103f7e266278eab513f
+  metadata.gz: ea7c45ea129dca650a63acc44ab043dbc39c2574
+  data.tar.gz: b0da396f0be98e2b8c6f9237e17f5fe22eec0ae7
 SHA512:
-  metadata.gz: e60029d5fe9f7d146f9bdba3f220eb64ffa6d771ff7084842b5daef229cf99a03e7747ab4bc6e7cd263a261f642c90a659bbf03cc3da0016b9e32cfe74513505
-  data.tar.gz: f7ec55cd9a00189d4e6c855b3ebcdff0e7777322b4697308a20ccd760af4435bc3b4c5ba5cc72998344571d3ce5a2234759332d27fd66c3ea41915d3a07f2d14
+  metadata.gz: 2adc99bf0c320be16d0c33754a000d5b3ca4317446bb4bbf905da099d5ebaf9c4f9a582fbb92a7ed0237ddad21c5af6a06f76796e07c582c06172f147576f2b1
+  data.tar.gz: 96b005ac29c7ce246bc10d92c326017fab0ff0c30d73bc427a59bec4971c5d5a8b9723b7acd8484558b550659af37f92ed6882cc373134a784654bb5bfbbf91e

data/VERSION

@@ -1 +1 @@
-0.3.2
+0.3.3

data/ezy.gemspec

@@ -2,8 +2,8 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.3.2"
-  s.date = "2014-04-15"
+  s.version = "0.3.3"
+  s.date = "2014-04-16"
 
   # Gem Details
   s.name = "ezy"

data/sass/ezy/_grid.scss

@@ -13,6 +13,7 @@ $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
@@ -47,10 +48,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,
@@ -77,7 +78,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;
   }
@@ -93,7 +94,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
@@ -119,6 +120,15 @@ $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;
+    }
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -139,9 +149,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
@@ -178,7 +188,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
@@ -211,13 +221,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 )  {
@@ -230,14 +240,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 {
@@ -247,7 +257,7 @@ $init-gutter-property: $gutter-property;
       @warn $context-warn;
     } @else {
       @include gutters( $gutter-property: $gutter-property );
-    } 
+    }
 
   }
 }

data/sass/ezy/grid/_debug.scss

@@ -1,16 +1,25 @@
 // ---------------------------------------------------------------------------
-// @mixin 
+// @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 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;
+    @include debug-text;
   }
 }
 
@@ -20,3 +29,24 @@
     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

@@ -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

data/test/css/grid/layout/debug.css

@@ -0,0 +1,393 @@
+/* ------------------------------------------------- *
+ *  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;
+}
+
+.grid:before, .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;
+  position: relative;
+}
+.grid:before, .small:before, .medium:before, .large:before {
+  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;
+}
+
+.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;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+@media (min-width: 641px) {
+  .page {
+    max-width: 940px;
+    /* Forcing static grid on IE6 and IE7 */
+    *width: 940px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+.no-media-queries .page {
+  /* Fallback for browsers not supporting media queries */
+  max-width: 940px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 940px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.grid {
+  margin-left: -3.33333%;
+  margin-right: -3.33333%;
+  position: relative;
+}
+.grid:before {
+  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;
+}
+.grid: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;
+}
+.grid:before {
+  content: "CONTEXT :: columns: 4 | column-width: 60px | gutter-width: 20px | at-breakpoint: false";
+}
+.grid:before {
+  /* Spanning 4 of 4 columns */
+  width: 93.75%;
+  width: auto;
+}
+.grid:before:before {
+  content: "4 of 4";
+}
+@media (min-width: 321px) {
+  .grid {
+    margin-left: -1.6129%;
+    margin-right: -1.6129%;
+    position: relative;
+  }
+  .grid:before {
+    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;
+  }
+  .grid: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;
+  }
+  .grid:before {
+    content: "CONTEXT :: columns: 8 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
+  }
+  .grid:before {
+    /* Spanning 8 of 8 columns */
+    width: 96.875%;
+    margin-left: 1.5625%;
+    margin-right: 1.5625%;
+    width: auto;
+  }
+  .grid:before:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 641px) {
+  .grid {
+    margin-left: -1.06383%;
+    margin-right: -1.06383%;
+    position: relative;
+  }
+  .grid:before {
+    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;
+  }
+  .grid: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;
+  }
+  .grid:before {
+    content: "CONTEXT :: columns: 12 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
+  }
+  .grid:before {
+    /* Spanning 12 of 12 columns */
+    width: 97.91667%;
+    margin-left: 1.04167%;
+    margin-right: 1.04167%;
+    width: auto;
+  }
+  .grid:before:before {
+    content: "12 of 12";
+  }
+}
+.no-media-queries .grid {
+  /* Fallback for browsers not supporting media queries */
+  margin-left: -1.06383%;
+  margin-right: -1.06383%;
+  position: relative;
+}
+.no-media-queries .grid:before {
+  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;
+}
+.no-media-queries .grid: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;
+}
+.no-media-queries .grid:before {
+  content: "CONTEXT :: columns: 12 | column-width: 60px | gutter-width: 20px | at-breakpoint: true";
+}
+.no-media-queries .grid:before {
+  /* Spanning 12 of 12 columns */
+  width: 97.91667%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
+  width: auto;
+}
+.no-media-queries .grid:before:before {
+  content: "12 of 12";
+}
+
+.small, .medium, .large {
+  background: hotpink;
+  text-align: center;
+  zoom: 1;
+}
+
+.small {
+  /* Spanning 2 of 4 columns */
+  width: 43.75%;
+}
+.small:before {
+  content: "2 of 4";
+}
+@media (min-width: 321px) {
+  .small {
+    /* Spanning 2 of 8 columns */
+    width: 21.875%;
+    margin-left: 1.5625%;
+    margin-right: 1.5625%;
+  }
+  .small:before {
+    content: "2 of 8";
+  }
+}
+@media (min-width: 641px) {
+  .small {
+    /* Spanning 3 of 12 columns */
+    width: 22.91667%;
+    margin-left: 1.04167%;
+    margin-right: 1.04167%;
+  }
+  .small:before {
+    content: "3 of 12";
+  }
+}
+.no-media-queries .small {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 3 of 12 columns */
+  width: 22.91667%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
+}
+.no-media-queries .small:before {
+  content: "3 of 12";
+}
+
+.medium {
+  /* Spanning 4 of 4 columns */
+  width: 93.75%;
+}
+.medium:before {
+  content: "4 of 4";
+}
+@media (min-width: 321px) {
+  .medium {
+    /* Spanning 4 of 8 columns */
+    width: 46.875%;
+    margin-left: 1.5625%;
+    margin-right: 1.5625%;
+  }
+  .medium:before {
+    content: "4 of 8";
+  }
+}
+@media (min-width: 641px) {
+  .medium {
+    /* Spanning 6 of 12 columns */
+    width: 47.91667%;
+    margin-left: 1.04167%;
+    margin-right: 1.04167%;
+  }
+  .medium:before {
+    content: "6 of 12";
+  }
+}
+.no-media-queries .medium {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 6 of 12 columns */
+  width: 47.91667%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
+}
+.no-media-queries .medium:before {
+  content: "6 of 12";
+}
+
+.large {
+  /* Spanning 4 of 4 columns */
+  width: 93.75%;
+}
+.large:before {
+  content: "4 of 4";
+}
+@media (min-width: 321px) {
+  .large {
+    /* Spanning 8 of 8 columns */
+    width: 96.875%;
+    margin-left: 1.5625%;
+    margin-right: 1.5625%;
+  }
+  .large:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 641px) {
+  .large {
+    /* Spanning 12 of 12 columns */
+    width: 97.91667%;
+    margin-left: 1.04167%;
+    margin-right: 1.04167%;
+  }
+  .large:before {
+    content: "12 of 12";
+  }
+}
+.no-media-queries .large {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 12 of 12 columns */
+  width: 97.91667%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
+}
+.no-media-queries .large:before {
+  content: "12 of 12";
+}

data/test/html/grid/debug.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>Grid: debug</title>
+
+    <meta name="description" content="Ezy Grid Demo">
+    <meta name="viewport" content="width=device-width">
+
+    <link href="../../css/grid/layout/debug.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/html/grid/fluid.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
 
-    <title>Sprite: repeat</title>
+    <title>Grid: fluid</title>
 
     <meta name="description" content="Ezy Grid Demo">
     <meta name="viewport" content="width=device-width">

data/test/html/grid/responsive.html

@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8">
 
-    <title>Sprite: repeat</title>
+    <title>Grid: responsive</title>
 
     <meta name="description" content="Ezy Grid Demo">
     <meta name="viewport" content="width=device-width">

data/test/scss/grid/layout/debug.scss

@@ -0,0 +1,102 @@
+// ------------------------------------
+// Imports
+
+@import "../../../../sass/ezy/grid";
+
+$debug: true;
+
+// ------------------------------------
+// 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.3.2
+  version: 0.3.3
 platform: ruby
 authors:
 - Frej Raahede Nielsen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-04-15 00:00:00.000000000 Z
+date: 2014-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -81,6 +81,7 @@ files:
 - test/css/grid/elastic.css
 - test/css/grid/fluid.css
 - test/css/grid/gutter.css
+- test/css/grid/layout/debug.css
 - test/css/grid/layout/fluid.css
 - test/css/grid/layout/grid-settings.css
 - test/css/grid/layout/responsive.css
@@ -101,6 +102,7 @@ files:
 - test/scss/grid/elastic.scss
 - test/scss/grid/fluid.scss
 - test/scss/grid/gutter.scss
+- test/scss/grid/layout/debug.scss
 - test/scss/grid/layout/fluid.scss
 - test/scss/grid/layout/grid-settings.scss
 - test/scss/grid/layout/responsive.scss
@@ -118,6 +120,7 @@ files:
 - test/scss/sprites/simple.scss
 - test/scss/sprites/size.scss
 - test/scss/sprites/spacing.scss
+- test/html/grid/debug.html
 - test/html/grid/fluid.html
 - test/html/grid/grid-settings.html
 - test/html/grid/responsive.html