ezy 0.0.4 → 0.0.5

data/test/css/sprites/retina.css

@@ -0,0 +1,43 @@
+.classic, .indy, .alien {
+  background-image: url('../../img/test-retina.png?23071384207639');
+  background-repeat: no-repeat;
+  background-position-x: 0%;
+}
+
+@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 (-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?23071384207639');
+    background-size: 152px auto;
+  }
+}
+
+.classic {
+  background-position: 0px -281px;
+  width: 152px;
+  height: 135px;
+}
+@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 (-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-position: 0px -140px;
+  }
+}
+
+.indy {
+  background-position: 0px -141px;
+  width: 128px;
+  height: 140px;
+}
+@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 (-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) {
+  .indy {
+    /* Retina sprite */
+    background-position: 0px 0px;
+  }
+}
+
+.alien {
+  background-position: 0px 0px;
+  width: 159px;
+  height: 141px;
+}

data/test/css/sprites/simple.css

@@ -0,0 +1,17 @@
+.classic, .indy {
+  background-image: url('../../img/test-simple.png?23071384207639');
+  background-repeat: no-repeat;
+  background-position-x: 0%;
+}
+
+.classic {
+  background-position: 0px -281px;
+  width: 152px;
+  height: 135px;
+}
+
+.indy {
+  background-position: 0px -141px;
+  width: 128px;
+  height: 140px;
+}

data/test/css/sprites/size.css

@@ -0,0 +1,65 @@
+/* -------------------------------------------------------------------- *
+ * Sprite image width and height
+ */
+.classic {
+  width: 152px;
+  height: 135px;
+}
+
+/* Getting dimensons from mixin */
+.classic-2 {
+  width: 152px;
+  height: 135px;
+}
+
+.indy {
+  width: 128px;
+  height: 140px;
+}
+
+/* Getting dimensons from mixin */
+.indy-2 {
+  width: 128px;
+  height: 140px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Retina sprite image width and height
+ */
+.classic {
+  width: 304px;
+  height: 270px;
+}
+
+/* Getting dimensons from mixin */
+.classic-2 {
+  width: 304px;
+  height: 270px;
+}
+
+.indy {
+  width: 256px;
+  height: 280px;
+}
+
+/* Getting dimensons from mixin */
+.indy-2 {
+  width: 256px;
+  height: 280px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Full sprite width / height
+ */
+.sprite {
+  width: 159px;
+  height: 416px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Full retina sprite width / height
+ */
+.sprite-retina {
+  width: 304px;
+  height: 550px;
+}

data/test/css/sprites/spacing.css

@@ -0,0 +1,23 @@
+.classic {
+  background-image: url('../../img/test-spacing.png?23071384207640');
+  background-repeat: no-repeat;
+  background-position-x: 0%;
+}
+
+@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 (-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?23071384207640');
+    background-size: 159px auto;
+  }
+}
+
+.classic {
+  background-position: 0px -381px;
+}
+@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 (-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-position: 0px -481px;
+  }
+}

data/test/html/sprites/repeat.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <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/sprites/repeat.css" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="meassure-1">&nbsp;</div>
+    <div class="meassure-2">&nbsp;</div>
+    <div class="meassure-3">&nbsp;</div>
+  </body>
+</html>

data/test/html/sprites/retina.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Sprite: retina</title>
+
+    <meta name="description" content="Ezy Grid Demo">
+    <meta name="viewport" content="width=device-width">
+
+    <link href="../../css/sprites/retina.css" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="classic">&nbsp;</div>
+    <div class="indy">&nbsp;</div>
+    <div class="alien">&nbsp;</div>
+  </body>
+</html>

data/test/html/sprites/simple.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Sprite: simple</title>
+
+    <meta name="description" content="Ezy Grid Demo">
+    <meta name="viewport" content="width=device-width">
+
+    <link href="../../css/sprites/simple.css" rel="stylesheet">
+
+  </head>
+  <body>
+    <div class="classic">&nbsp;</div>
+    <div class="indy">&nbsp;</div>
+  </body>
+</html>

data/test/scss/grid/elastic.scss

@@ -1,7 +1,8 @@
 // ---------------------------------------------------------------------------
 // Imports
 
-@import "../../../sass/ezy";
+@import "../../../sass/ezy/grid";
+@import "../../../sass/ezy/media";
 
 $column-width: 4em;
 $gutter-width: 2em;

data/test/scss/grid/fluid.scss

@@ -1,7 +1,7 @@
 // ---------------------------------------------------------------------------
 // Imports
 
-@import "../../../sass/ezy";
+@import "../../../sass/ezy/grid";
 
 $column-width: 60px;
 $gutter-width: 30px;

data/test/scss/grid/gutter.scss

@@ -1,7 +1,7 @@
 // ---------------------------------------------------------------------------
 // Imports
 
-@import "../../../sass/ezy";
+@import "../../../sass/ezy/grid";
 
 /* -------------------------------------------------------------------- *
  * Static grid

data/test/scss/grid/responsive.scss

@@ -1,7 +1,8 @@
 // ---------------------------------------------------------------------------
 // Imports
 
-@import "../../../sass/ezy";
+@import "../../../sass/ezy/grid";
+@import "../../../sass/ezy/media";
 
 $column-width: 60px;
 $gutter-width: 30px;

data/test/scss/grid/static.scss

@@ -1,7 +1,7 @@
 // ---------------------------------------------------------------------------
 // Imports
 
-@import "../../../sass/ezy";
+@import "../../../sass/ezy/grid";
 
 $column-width: 60px;
 $gutter-width: 30px;

data/test/scss/media.scss

@@ -1,7 +1,7 @@
 // ---------------------------------------------------------------------------
 // Imports
 
-@import "../../sass/ezy";
+@import "../../sass/ezy/media";
 
 // ---------------------------------------------------------------------------
 // Media

data/test/scss/sprites/layout.scss

@@ -0,0 +1,23 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy/sprites";
+
+// ---------------------------------------------------------------------------
+// Create sprite
+
+@include make-sprite(
+  $name: "base",
+  $folder: "test-layout",
+  $folder-retina: "test-layout@2x", 
+  $spacing: 50px,
+  $layout: diagonal,
+  $layout-retina: horizontal
+);
+
+// ---------------------------------------------------------------------------
+// Calling sprite so it will compile
+
+.classic {
+  @include background-sprite( "base", "goat" );
+}

data/test/scss/sprites/position.scss

@@ -0,0 +1,23 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy/sprites";
+
+// ---------------------------------------------------------------------------
+// Create sprite
+
+@include make-sprite(
+  $name: "base",
+  $folder: "test-position",
+  $folder-retina: "test-position@2x", 
+  $position: 50%,
+  $position-retina: 100%,
+  $clean-up: false
+);
+
+// ---------------------------------------------------------------------------
+// Calling sprite so it will compile
+
+.classic {
+  @include background-sprite( "base", "icon-coffee" );
+}

data/test/scss/sprites/repeat.scss

@@ -0,0 +1,34 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy/sprites";
+
+// ---------------------------------------------------------------------------
+// Create sprite
+
+@include make-sprite(
+  $name: "base",
+  $folder: "test-repeat",
+  $folder-retina: "test-repeat@2x", 
+  $repeat: repeat-x,
+  $repeat-retina: no-repeat,
+  $position-retina: 100%
+);
+
+// ---------------------------------------------------------------------------
+// Calling sprite so it will compile
+
+.meassure-1 {
+  @include background-sprite( "base", "meassure-1" );
+  @include sprite-image-dimensions( "base", "meassure-3" );
+}
+
+.meassure-2 {
+  @include background-sprite( "base", "meassure-2" );
+  @include sprite-image-dimensions( "base", "meassure-3" );
+}
+
+.meassure-3 {
+  @include background-sprite( "base", "meassure-3" );
+  @include sprite-image-dimensions( "base", "meassure-3" );
+}