ezy 0.2.0 → 0.2.6.alpha

data/test/css/grid/gutter.css

@@ -1,8 +1,13 @@
-/* -------------------------------------------------------------------- *
+/* ------------------------------------------------- *
+ *  Ezy Grid by Frej Raahede Nielsen
+ *  http://github.com/raahede/ezy
+ * ------------------------------------------------- *
+ */
+/* ------------------------------------------------- *
  *  Micro Clearfix 
  *  http://nicolasgallagher.com/micro-clearfix-hack/
  */
-/* -------------------------------------------------------------------- */
+/* --- End clearfix --- */
 /* -------------------------------------------------------------------- *
  * Static grid
  * -------------------------------------------------------------------- */
@@ -13,6 +18,8 @@
   /* Spanning 1 columns */
   width: 60px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -21,6 +28,8 @@
   /* Spanning 2 columns */
   width: 150px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -32,6 +41,8 @@
   /* Spanning 1 columns */
   width: 60px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -40,6 +51,8 @@
   /* Spanning 2 columns */
   width: 150px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -51,6 +64,8 @@
   /* Spanning 1 columns */
   width: 60px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -59,6 +74,8 @@
   /* Spanning 2 columns */
   width: 150px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -70,6 +87,8 @@
   /* Spanning 1 columns */
   width: 60px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -78,6 +97,8 @@
   /* Spanning 2 columns */
   width: 150px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -85,10 +106,13 @@
 /* -------------------------------------------------------------------- *
  * Trying again, using grid-init()
  * -------------------------------------------------------------------- */
-.gutter-default-a-5, .gutter-default-b-5 {
-  float: left;
+.gutter-default-a-5, .gutter-default-b-5, .gutter-padding-a-6, .gutter-padding-b-6, .gutter-default-a-7, .gutter-default-b-7, .gutter-margin-a-8, .gutter-margin-b-8 {
+  /* Grid column base at a 3-column context */
   margin-left: 15px;
   margin-right: 15px;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
 }
 
 /* -------------------------------------------------------------------- *
@@ -110,7 +134,6 @@
 .gutter-padding-a-6 {
   /* Spanning 1 columns */
   width: 60px;
-  float: left;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -118,7 +141,6 @@
 .gutter-padding-b-6 {
   /* Spanning 2 columns */
   width: 150px;
-  float: left;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -129,7 +151,6 @@
 .gutter-default-a-7 {
   /* Spanning 1 columns */
   width: 60px;
-  float: left;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -137,7 +158,6 @@
 .gutter-default-b-7 {
   /* Spanning 2 columns */
   width: 150px;
-  float: left;
   padding-left: 15px;
   padding-right: 15px;
 }
@@ -148,26 +168,23 @@
 .gutter-margin-a-8 {
   /* Spanning 1 columns */
   width: 60px;
-  float: left;
-  margin-left: 15px;
-  margin-right: 15px;
 }
 
 .gutter-margin-b-8 {
   /* Spanning 2 columns */
   width: 150px;
-  float: left;
-  margin-left: 15px;
-  margin-right: 15px;
 }
 
 /* -------------------------------------------------------------------- *
  * Again, now with a fluid grid
  * -------------------------------------------------------------------- */
-.gutter-default-a-9, .gutter-default-b-9 {
+.gutter-default-a-9, .gutter-default-b-9, .gutter-padding-a-10, .gutter-padding-b-10, .gutter-default-a-11, .gutter-default-b-11, .gutter-margin-a-12, .gutter-margin-b-12 {
+  /* Grid column base at a 6-column context */
+  margin-left: 2.775%;
+  margin-right: 2.775%;
   float: left;
-  margin-left: 2.77%;
-  margin-right: 2.77%;
+  /* Fixing double margin on IE6 */
+  _display: inline;
 }
 
 /* -------------------------------------------------------------------- *
@@ -189,17 +206,15 @@
 .gutter-padding-a-10 {
   /* Spanning 3 of 6 columns */
   width: 44.44%;
-  float: left;
-  padding-left: 2.77%;
-  padding-right: 2.77%;
+  padding-left: 2.775%;
+  padding-right: 2.775%;
 }
 
 .gutter-padding-b-10 {
   /* Spanning 6 of 6 columns */
   width: 94.44%;
-  float: left;
-  padding-left: 2.77%;
-  padding-right: 2.77%;
+  padding-left: 2.775%;
+  padding-right: 2.775%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -208,17 +223,15 @@
 .gutter-default-a-11 {
   /* Spanning 3 of 6 columns */
   width: 44.44%;
-  float: left;
-  padding-left: 2.77%;
-  padding-right: 2.77%;
+  padding-left: 2.775%;
+  padding-right: 2.775%;
 }
 
 .gutter-default-b-11 {
   /* Spanning 6 of 6 columns */
   width: 94.44%;
-  float: left;
-  padding-left: 2.77%;
-  padding-right: 2.77%;
+  padding-left: 2.775%;
+  padding-right: 2.775%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -227,15 +240,9 @@
 .gutter-margin-a-12 {
   /* Spanning 3 of 6 columns */
   width: 44.44%;
-  float: left;
-  margin-left: 2.77%;
-  margin-right: 2.77%;
 }
 
 .gutter-margin-b-12 {
   /* Spanning 6 of 6 columns */
   width: 94.44%;
-  float: left;
-  margin-left: 2.77%;
-  margin-right: 2.77%;
 }

data/test/css/grid/layout.css

@@ -0,0 +1,118 @@
+/* ------------------------------------------------- *
+ *  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;
+}
+
+.column {
+  /* Grid column base at a 4-column context */
+  margin-left: 4.165%;
+  margin-right: 4.165%;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+}
+
+.page {
+  max-width: 330px;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+@media (min-width: 990px) {
+  .page {
+    max-width: 690px;
+    padding-left: 50px;
+    padding-right: 100px;
+  }
+}
+@media (min-width: 1250px) {
+  .page {
+    max-width: 1050px;
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+}
+.no-media-queries .page {
+  /* Fallback for browsers not supporting media queries */
+  max-width: 1050px;
+  padding-left: 100px;
+  padding-right: 100px;
+}
+
+.grid {
+  margin-left: -4.545%;
+  margin-right: -4.545%;
+}
+@media (min-width: 990px) {
+  .grid {
+    margin-left: -2.17%;
+    margin-right: -2.17%;
+  }
+}
+@media (min-width: 1250px) {
+  .grid {
+    margin-left: -1.425%;
+    margin-right: -1.425%;
+  }
+}
+.no-media-queries .grid {
+  /* Fallback for browsers not supporting media queries */
+  margin-left: -1.425%;
+  margin-right: -1.425%;
+}
+
+.column {
+  /* Spanning 4 of 4 columns */
+  width: 91.66%;
+}
+@media (min-width: 990px) {
+  .column {
+    /* Spanning 4 of 8 columns */
+    width: 45.83%;
+    margin-left: 2.08%;
+    margin-right: 2.08%;
+  }
+}
+@media (min-width: 1250px) {
+  .column {
+    /* Spanning 4 of 12 columns */
+    width: 30.55%;
+    margin-left: 1.385%;
+    margin-right: 1.385%;
+  }
+}
+.no-media-queries .column {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 4 of 12 columns */
+  width: 30.55%;
+  margin-left: 1.385%;
+  margin-right: 1.385%;
+}

data/test/css/grid/offset.css

@@ -0,0 +1,51 @@
+/* ------------------------------------------------- *
+ *  Ezy Grid by Frej Raahede Nielsen
+ *  http://github.com/raahede/ezy
+ * ------------------------------------------------- *
+ */
+/* ------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+/* --- End clearfix --- */
+/* -------------------------------------------------------------------- *
+ * Grid columns with offset
+ */
+.span-columns-2 {
+  /* Spanning 2 columns */
+  width: 150px;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+  margin-left: 15px;
+  margin-right: 15px;
+  /* Offset left by 1 columns */
+  margin-left: 105px;
+}
+
+.span-columns-4 {
+  /* Spanning 4 columns */
+  width: 330px;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+  margin-left: 15px;
+  margin-right: 15px;
+  /* Offset right by 2 columns */
+  margin-right: 195px;
+}
+
+.span-columns-6 {
+  /* Spanning 6 columns */
+  width: 510px;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+  margin-left: 15px;
+  margin-right: 15px;
+  /* Offset both by 3 columns */
+  margin-left: 285px;
+  margin-right: 285px;
+  /* Removing offset left */
+  margin-left: 15px;
+}

data/test/css/grid/responsive.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,14 +26,25 @@
   *zoom: 1;
 }
 
-/* -------------------------------------------------------------------- */
+/* --- End clearfix --- */
 .page {
   margin-left: auto;
   margin-right: auto;
 }
 
+.column {
+  /* Grid column base at a 4-column context */
+  margin-left: 4.165%;
+  margin-right: 4.165%;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+}
+
 .page {
   max-width: 1050px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .grid {
@@ -56,15 +72,11 @@
 .column {
   /* Spanning 4 of 4 columns */
   width: 91.66%;
-  float: left;
-  margin-left: 4.16%;
-  margin-right: 4.16%;
 }
 @media (min-width: 361px) {
   .column {
     /* Spanning 4 of 8 columns */
     width: 45.83%;
-    float: left;
     margin-left: 2.08%;
     margin-right: 2.08%;
   }
@@ -73,16 +85,14 @@
   .column {
     /* Spanning 4 of 12 columns */
     width: 30.55%;
-    float: left;
-    margin-left: 1.38%;
-    margin-right: 1.38%;
+    margin-left: 1.385%;
+    margin-right: 1.385%;
   }
 }
 .no-media-queries .column {
   /* Fallback for browsers not supporting media queries */
   /* Spanning 4 of 12 columns */
   width: 30.55%;
-  float: left;
-  margin-left: 1.38%;
-  margin-right: 1.38%;
+  margin-left: 1.385%;
+  margin-right: 1.385%;
 }

data/test/css/grid/static.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 {
   width: 1050px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .grid {
@@ -43,6 +50,8 @@
   /* Spanning 2 columns */
   width: 150px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -51,6 +60,8 @@
   /* Spanning 4 columns */
   width: 330px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -59,6 +70,8 @@
   /* Spanning 6 columns */
   width: 510px;
   float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
   margin-left: 15px;
   margin-right: 15px;
 }
@@ -67,9 +80,12 @@
  * Static columns: using grid-init()
  */
 .span-columns-2, .span-columns-4, .span-columns-6, .span-columns-18 {
-  float: left;
+  /* Grid column base at a 12-column context */
   margin-left: 15px;
   margin-right: 15px;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
 }
 
 .span-columns-2 {

data/test/css/sprites/layout.css

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

data/test/css/sprites/retina.css

@@ -1,12 +1,12 @@
 .classic, .indy, .alien {
-  background-image: url('../../img/test-retina.png?15501385736653');
+  background-image: url('../../img/test-retina.png?22091386277782');
   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?15501385736653');
+    background-image: url('../../img/test-retina@2x.png?22091386277782');
     background-size: 152px auto;
   }
 }

data/test/css/sprites/simple.css

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

data/test/css/sprites/spacing.css

@@ -1,12 +1,12 @@
 .classic {
-  background-image: url('../../img/test-spacing.png?15501385736653');
+  background-image: url('../../img/test-spacing.png?22091386277783');
   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?15501385736653');
+    background-image: url('../../img/test-spacing@2x.png?22091386277783');
     background-size: 159px auto;
   }
 }