ezy 0.2.9 → 0.3.0.beta

data/test/css/grid/layout.css

@@ -34,8 +34,8 @@
 
 .column {
   /* Grid column base at a 4-column context */
-  margin-left: 4.165%;
-  margin-right: 4.165%;
+  margin-left: 4.16667%;
+  margin-right: 4.16667%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
@@ -76,51 +76,51 @@
 }
 
 .grid {
-  margin-left: -4.545%;
-  margin-right: -4.545%;
+  margin-left: -4.54545%;
+  margin-right: -4.54545%;
 }
 @media (min-width: 990px) {
   .grid {
-    margin-left: -2.17%;
-    margin-right: -2.17%;
+    margin-left: -2.17391%;
+    margin-right: -2.17391%;
   }
 }
 @media (min-width: 1250px) {
   .grid {
-    margin-left: -1.425%;
-    margin-right: -1.425%;
+    margin-left: -1.42857%;
+    margin-right: -1.42857%;
   }
 }
 .no-media-queries .grid {
   /* Fallback for browsers not supporting media queries */
-  margin-left: -1.425%;
-  margin-right: -1.425%;
+  margin-left: -1.42857%;
+  margin-right: -1.42857%;
 }
 
 .column {
   /* Spanning 4 of 4 columns */
-  width: 91.66%;
+  width: 91.66667%;
 }
 @media (min-width: 990px) {
   .column {
     /* Spanning 4 of 8 columns */
-    width: 45.83%;
-    margin-left: 2.08%;
-    margin-right: 2.08%;
+    width: 45.83333%;
+    margin-left: 2.08333%;
+    margin-right: 2.08333%;
   }
 }
 @media (min-width: 1250px) {
   .column {
     /* Spanning 4 of 12 columns */
-    width: 30.55%;
-    margin-left: 1.385%;
-    margin-right: 1.385%;
+    width: 30.55556%;
+    margin-left: 1.38889%;
+    margin-right: 1.38889%;
   }
 }
 .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%;
+  width: 30.55556%;
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
 }

data/test/css/grid/responsive.css

@@ -34,8 +34,8 @@
 
 .column {
   /* Grid column base at a 4-column context */
-  margin-left: 4.165%;
-  margin-right: 4.165%;
+  margin-left: 4.16667%;
+  margin-right: 4.16667%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
@@ -50,51 +50,51 @@
 }
 
 .grid {
-  margin-left: -4.545%;
-  margin-right: -4.545%;
+  margin-left: -4.54545%;
+  margin-right: -4.54545%;
 }
 @media (min-width: 361px) {
   .grid {
-    margin-left: -2.17%;
-    margin-right: -2.17%;
+    margin-left: -2.17391%;
+    margin-right: -2.17391%;
   }
 }
 @media (min-width: 721px) {
   .grid {
-    margin-left: -1.425%;
-    margin-right: -1.425%;
+    margin-left: -1.42857%;
+    margin-right: -1.42857%;
   }
 }
 .no-media-queries .grid {
   /* Fallback for browsers not supporting media queries */
-  margin-left: -1.425%;
-  margin-right: -1.425%;
+  margin-left: -1.42857%;
+  margin-right: -1.42857%;
 }
 
 .column {
   /* Spanning 4 of 4 columns */
-  width: 91.66%;
+  width: 91.66667%;
 }
 @media (min-width: 361px) {
   .column {
     /* Spanning 4 of 8 columns */
-    width: 45.83%;
-    margin-left: 2.08%;
-    margin-right: 2.08%;
+    width: 45.83333%;
+    margin-left: 2.08333%;
+    margin-right: 2.08333%;
   }
 }
 @media (min-width: 721px) {
   .column {
     /* Spanning 4 of 12 columns */
-    width: 30.55%;
-    margin-left: 1.385%;
-    margin-right: 1.385%;
+    width: 30.55556%;
+    margin-left: 1.38889%;
+    margin-right: 1.38889%;
   }
 }
 .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%;
+  width: 30.55556%;
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
 }

data/test/css/sprites/layout.css

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

data/test/css/sprites/responsive.css

@@ -1,12 +1,12 @@
 .classic, .no-media-queries .indy {
-  background-image: url('../../img/test-retina.png?18321386783131');
+  background-image: url('../../img/test-retina.png?19071391537241');
   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-retina@2x.png?18321386783131');
+    background-image: url('../../img/test-retina@2x.png?19071391537241');
     background-size: 152px auto;
   }
 }
@@ -30,7 +30,7 @@
 @media (min-width: 400px) {
   .indy {
     background-position: 0 -141px;
-    background-image: url('../../img/test-retina.png?18321386783131');
+    background-image: url('../../img/test-retina.png?19071391537241');
     background-repeat: no-repeat;
   }
 }
@@ -38,14 +38,14 @@
   .indy {
     /* Retina sprite */
     background-position: 0 0;
-    background-image: url('../../img/test-retina@2x.png?18321386783131');
+    background-image: url('../../img/test-retina@2x.png?19071391537241');
     background-size: 152px auto;
   }
 }
 @media (min-width: 960px) {
   .indy {
     background-position: 0 -281px;
-    background-image: url('../../img/test-retina.png?18321386783131');
+    background-image: url('../../img/test-retina.png?19071391537241');
     background-repeat: no-repeat;
   }
 }
@@ -53,14 +53,14 @@
   .indy {
     /* Retina sprite */
     background-position: 0 -140px;
-    background-image: url('../../img/test-retina@2x.png?18321386783131');
+    background-image: url('../../img/test-retina@2x.png?19071391537241');
     background-size: 152px auto;
   }
 }
 @media (min-width: 1024px) {
   .indy {
     background-position: 0 0;
-    background-image: url('../../img/test-retina.png?18321386783131');
+    background-image: url('../../img/test-retina.png?19071391537241');
     background-repeat: no-repeat;
   }
 }

data/test/css/sprites/retina.css

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

data/test/css/sprites/simple.css

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

data/test/css/sprites/spacing.css

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

data/test/html/grid/grid-settings.html

@@ -0,0 +1,75 @@
+<!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/grid-settings.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="medium">
+          <p>Medium</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="small">
+          <p>Small</p>
+        </div>
+        <div class="large">
+          <p>Large</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/grid-settings.scss

@@ -0,0 +1,101 @@
+// ------------------------------------
+// Imports
+
+@import "../../../../sass/ezy/grid";
+
+// ------------------------------------
+// General grid settings
+
+$is-fluid       : true;
+
+// ------------------------------------
+// Grid settings small (default)
+
+$column-width   : 40px;
+$gutter-width   : 20px;
+$grid-padding   : 10px;
+$total-columns  : 12;
+
+// ------------------------------------
+// Grid settings large (breapoint)
+
+$column-width-large   : 30px;
+$gutter-width-large   : 50px;
+$grid-padding-large   : 30px;
+$total-columns-large  : 18;
+
+// ------------------------------------
+// Breakpoint settings
+
+// Selector for browsers not supporting media queries
+// (IE8 and down)
+$legacy-selector: ".no-media-queries";
+
+// ------------------------------------
+// Defining media query breakpoints
+
+$breakpoint-large : set-breakpoint( $min: grid-width( $total-columns ), $legacy-support: true ); // Default for old IE
+
+// ------------------------------------
+// Defining grid layouts
+
+$layout-large : set-layout( 
+  $total-columns-large,
+  $grid-padding   : $grid-padding-large,
+  $column-width   : $column-width-large,
+  $gutter-width   : $gutter-width-large,
+  $at-breakpoint  : $breakpoint-large 
+);
+
+// ------------------------------------
+// Initializing grid for cleaner output
+
+@include grid-init();
+
+// ------------------------------------
+// Grid layouts
+
+.page {
+  @include master;
+  @include each-layout {
+    @include master;
+  }
+}
+
+.grid {
+  @include container;
+  @include each-layout {
+    @include container;
+  }
+}
+
+%column {
+  background: hotpink;
+  text-align: center;
+  zoom: 1;
+}
+
+.small {
+  @extend %column;
+  @include span-columns( 3 );       // 3 of 12 columns
+  @include at-layout( $layout-large ) {
+    @include span-columns( 6 );     // 6 of 18 columns
+  }
+}
+
+.medium {
+  @extend %column;
+  @include span-columns( 6 );       // 9 of 12 columns
+  @include at-layout( $layout-large ) {
+    @include span-columns( 9 );     // 9 of 18 columns
+  }
+}
+
+.large {
+  @extend %column;
+  @include span-columns( 12 );       // 9 of 12 columns
+  @include at-layout( $layout-large ) {
+    @include span-columns( 18 );    // 18 of 18 columns
+  }
+}
+

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ezy
 version: !ruby/object:Gem::Version
-  version: 0.2.9
+  version: 0.3.0.beta
 platform: ruby
 authors:
 - Frej Raahede Nielsen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-12-18 00:00:00.000000000 Z
+date: 2014-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -59,15 +59,30 @@ files:
 - sass/ezy/grid/_debug.scss
 - sass/ezy/grid/_helpers.scss
 - sass/ezy/grid/_layout.scss
-- templates/project/_settings.scss
+- templates/project/assets/config.rb
+- templates/project/assets/css/screen.css
+- templates/project/assets/img/test-sprite/alien.png
+- templates/project/assets/img/test-sprite/classic.png
+- templates/project/assets/img/test-sprite/indy.png
+- templates/project/assets/img/test-sprite.png
+- templates/project/assets/img/test-sprite@2x/classic.png
+- templates/project/assets/img/test-sprite@2x/indy.png
+- templates/project/assets/img/test-sprite@2x.png
+- templates/project/assets/js/html5shiv-3.6.2.js
+- templates/project/assets/sass/core/_base.scss
+- templates/project/assets/sass/core/_layouts.scss
+- templates/project/assets/sass/core/_settings.scss
+- templates/project/assets/sass/lib/_normalize.scss
+- templates/project/assets/sass/partials/_sprite-examples.scss
+- templates/project/assets/sass/screen.scss
 - templates/project/index.html
 - templates/project/manifest.rb
-- templates/project/screen.scss
 - test/config.rb
 - 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/grid-settings.css
 - test/css/grid/layout/responsive.css
 - test/css/grid/layout.css
 - test/css/grid/offset.css
@@ -87,6 +102,7 @@ files:
 - test/scss/grid/fluid.scss
 - test/scss/grid/gutter.scss
 - test/scss/grid/layout/fluid.scss
+- test/scss/grid/layout/grid-settings.scss
 - test/scss/grid/layout/responsive.scss
 - test/scss/grid/layout.scss
 - test/scss/grid/offset.scss
@@ -103,6 +119,7 @@ files:
 - test/scss/sprites/size.scss
 - test/scss/sprites/spacing.scss
 - test/html/grid/fluid.html
+- test/html/grid/grid-settings.html
 - test/html/grid/responsive.html
 - test/html/sprites/repeat.html
 - test/html/sprites/responsive.html
@@ -161,12 +178,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - '>'
     - !ruby/object:Gem::Version
-      version: '0'
+      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/templates/project/_settings.scss

@@ -1,32 +0,0 @@
-// ---------------------------------------------------------------------------
-// Imports
-
-@import "ezy";
-
-// -----------------------------------------------------------
-// Required grid settings
-
-$column-width: 40px;  // column width
-$gutter-width: 30px;  // space between columns
-$total-columns: 12;   // max number of columns occuring
-@include grid-init; // doing some background magic for you
-
-// -----------------------------------------------------------
-// Grid layouts (column count)
-
-$columns-small:   4;
-$columns-medium:  8;
-$columns-large:   12;
-
-// -----------------------------------------------------------
-// Responsive settings
-
-// Widths for use in media queries
-$width-small:   context-width( $columns-small );
-$width-medium:  context-width( $columns-medium );
-$width-large:   context-width( $columns-large );
-
-// Defining media query breakpoints
-$breakpoint-small:  set-breakpoint( $max: $width-small );
-$breakpoint-medium: set-breakpoint( $min: $width-small+1 );
-$breakpoint-large:  set-breakpoint( $min: $width-medium+1, $legacy-support: true ); // Support for legacy browsers

data/templates/project/screen.scss

@@ -1,40 +0,0 @@
-// ---------------------------------------------------------------------------
-// Imports
-
-@import "layout";
-
-/* -------------------------------------------------------------------------*/
-/* Layout: mobile first */
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-.page {
-  @include master( $columns-large ); // Sets max-width
-  padding: {
-    left: $gutter-width / 2;
-    right: $gutter-width / 2;
-  }
-}
-
-.grid {
-  @include container( $columns-small );
-  @include at-breakpoint( $breakpoint-medium ) {
-    @include container( $columns-medium, $at-breakpoint: true );
-  }
-  @include at-breakpoint( $breakpoint-large ) {
-    @include container( $columns-large, $at-breakpoint: true );
-  }
-}
-
-.column {
-  @include span-columns( 4, $context: $columns-small);
-  @include at-breakpoint( $breakpoint-medium ) {
-    @include span-columns( 4, $context: $columns-medium, $at-breakpoint: true);
-  }
-  @include at-breakpoint( $breakpoint-large ) {
-    @include span-columns( 4, $context: $columns-large, $at-breakpoint: true);
-  }
-}