ezy 0.2.9 → 0.3.0.beta

data/templates/project/manifest.rb

@@ -1,18 +1,49 @@
-stylesheet 'screen.scss', :media => "screen, projection"
-stylesheet '_base.scss'
+# Manifest documentation here: http://compass-style.org/help/tutorials/extensions/
+# Install module template: compass create <project name> -r ezy -u ezy
 
+# Description
 description "Ezy Grid: a minimal grid framework with mammoth potential."
 
+# Import all files and folders
+discover :directories
+
+# Skip auto creating a config.rb
+no_configuration_file!
+
+# Skip compiling styles
+# skip_compilation!
+
+# Stylesheet Import
+file 'assets/sass/screen.scss', :to => :css
+
+# Javascript Import
+# file 'scripts.js', :like => :javascript, :to => 'scripts.js'
+
+# General File Import
+# file 'README.md', :to => "README.md"
+file 'index.html', :to => "index.html"
+
+# Compass Extension Help
 help %Q{
-Please see the source repository for all documentation and help:
+All documentation can be found here:
+
+    http://raahede.github.io/ezy/
 
-    http://github.com/raahede/ezy-grid
+Go here for source code:
+
+    http://github.com/raahede/ezy
 }
 
+# Compass Extension Welcome Message
+#  Users will see this when they create a new project using this template.
 welcome_message %Q{
-Please see the source repository for all documentation and help:
+All documentation can be found here:
+
+    http://raahede.github.io/ezy/
+}
+
+
+
+
 
-    http://github.com/raahede/ezy-grid
 
-To get started, set up your grid in the base partial by following the inline instructions.
-}

data/test/css/grid/elastic.css

@@ -56,16 +56,16 @@
 }
 
 .grid {
-  margin-left: -1.425%;
-  margin-right: -1.425%;
+  margin-left: -1.42857%;
+  margin-right: -1.42857%;
 }
 
 .column {
   /* Spanning 4 of 12 columns */
-  width: 30.55%;
+  width: 30.55556%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
-  margin-left: 1.385%;
-  margin-right: 1.385%;
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
 }

data/test/css/grid/fluid.css

@@ -41,8 +41,8 @@
 }
 
 .grid {
-  margin-left: -1.425%;
-  margin-right: -1.425%;
+  margin-left: -1.42857%;
+  margin-right: -1.42857%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -50,32 +50,32 @@
  */
 .span-columns-2 {
   /* Spanning 2 of 12 columns */
-  width: 13.88%;
+  width: 13.88889%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
-  margin-left: 1.385%;
-  margin-right: 1.385%;
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
 }
 
 .span-columns-4 {
   /* Spanning 4 of 12 columns */
-  width: 30.55%;
+  width: 30.55556%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
-  margin-left: 1.385%;
-  margin-right: 1.385%;
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
 }
 
 .span-columns-6 {
   /* Spanning 6 of 12 columns */
-  width: 47.22%;
+  width: 47.22222%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
-  margin-left: 1.385%;
-  margin-right: 1.385%;
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -83,8 +83,8 @@
  */
 .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%;
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
@@ -92,17 +92,17 @@
 
 .span-columns-2 {
   /* Spanning 2 of 12 columns */
-  width: 13.88%;
+  width: 13.88889%;
 }
 
 .span-columns-4 {
   /* Spanning 4 of 12 columns */
-  width: 30.55%;
+  width: 30.55556%;
 }
 
 .span-columns-6 {
   /* Spanning 6 of 12 columns */
-  width: 47.22%;
+  width: 47.22222%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -110,5 +110,5 @@
  */
 .span-columns-18 {
   /* Spanning 18 of 12 columns */
-  width: 147.22%;
+  width: 147.22222%;
 }

data/test/css/grid/gutter.css

@@ -180,8 +180,8 @@
  * -------------------------------------------------------------------- */
 .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%;
+  margin-left: 2.77778%;
+  margin-right: 2.77778%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
@@ -192,12 +192,12 @@
  */
 .gutter-default-a-9 {
   /* Spanning 3 of 6 columns */
-  width: 44.44%;
+  width: 44.44444%;
 }
 
 .gutter-default-b-9 {
   /* Spanning 6 of 6 columns */
-  width: 94.44%;
+  width: 94.44444%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -205,16 +205,16 @@
  */
 .gutter-padding-a-10 {
   /* Spanning 3 of 6 columns */
-  width: 44.44%;
-  padding-left: 2.775%;
-  padding-right: 2.775%;
+  width: 44.44444%;
+  padding-left: 2.77778%;
+  padding-right: 2.77778%;
 }
 
 .gutter-padding-b-10 {
   /* Spanning 6 of 6 columns */
-  width: 94.44%;
-  padding-left: 2.775%;
-  padding-right: 2.775%;
+  width: 94.44444%;
+  padding-left: 2.77778%;
+  padding-right: 2.77778%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -222,16 +222,16 @@
  */
 .gutter-default-a-11 {
   /* Spanning 3 of 6 columns */
-  width: 44.44%;
-  padding-left: 2.775%;
-  padding-right: 2.775%;
+  width: 44.44444%;
+  padding-left: 2.77778%;
+  padding-right: 2.77778%;
 }
 
 .gutter-default-b-11 {
   /* Spanning 6 of 6 columns */
-  width: 94.44%;
-  padding-left: 2.775%;
-  padding-right: 2.775%;
+  width: 94.44444%;
+  padding-left: 2.77778%;
+  padding-right: 2.77778%;
 }
 
 /* -------------------------------------------------------------------- *
@@ -239,10 +239,10 @@
  */
 .gutter-margin-a-12 {
   /* Spanning 3 of 6 columns */
-  width: 44.44%;
+  width: 44.44444%;
 }
 
 .gutter-margin-b-12 {
   /* Spanning 6 of 6 columns */
-  width: 94.44%;
+  width: 94.44444%;
 }

data/test/css/grid/layout/fluid.css

@@ -34,8 +34,8 @@
 
 .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
   /* Grid column base at a 12-column context */
-  margin-left: 1.04%;
-  margin-right: 1.04%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
   float: left;
   /* Fixing double margin on IE6 */
   _display: inline;
@@ -50,8 +50,8 @@
 }
 
 .grid {
-  margin-left: -1.06%;
-  margin-right: -1.06%;
+  margin-left: -1.06383%;
+  margin-right: -1.06383%;
 }
 
 .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
@@ -67,12 +67,12 @@
 
 .span-2 {
   /* Spanning 2 of 12 columns */
-  width: 14.58%;
+  width: 14.58333%;
 }
 
 .span-3 {
   /* Spanning 3 of 12 columns */
-  width: 22.91%;
+  width: 22.91667%;
 }
 
 .span-4 {
@@ -82,12 +82,12 @@
 
 .span-5 {
   /* Spanning 5 of 12 columns */
-  width: 39.58%;
+  width: 39.58333%;
 }
 
 .span-6 {
   /* Spanning 6 of 12 columns */
-  width: 47.91%;
+  width: 47.91667%;
 }
 
 .span-7 {
@@ -97,12 +97,12 @@
 
 .span-8 {
   /* Spanning 8 of 12 columns */
-  width: 64.58%;
+  width: 64.58333%;
 }
 
 .span-9 {
   /* Spanning 9 of 12 columns */
-  width: 72.91%;
+  width: 72.91667%;
 }
 
 .span-10 {
@@ -112,10 +112,10 @@
 
 .span-11 {
   /* Spanning 11 of 12 columns */
-  width: 89.58%;
+  width: 89.58333%;
 }
 
 .span-12 {
   /* Spanning 12 of 12 columns */
-  width: 97.91%;
+  width: 97.91667%;
 }

data/test/css/grid/layout/grid-settings.css

@@ -0,0 +1,149 @@
+/* ------------------------------------------------- *
+ *  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;
+}
+
+.small, .medium, .large {
+  /* Grid column base at a 12-column context */
+  margin-left: 1.38889%;
+  margin-right: 1.38889%;
+  float: left;
+  /* Fixing double margin on IE6 */
+  _display: inline;
+}
+
+.page {
+  max-width: 700px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 700px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+@media (min-width: 720px) {
+  .page {
+    max-width: 1390px;
+    /* Forcing static grid on IE6 and IE7 */
+    *width: 1390px;
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+}
+.no-media-queries .page {
+  /* Fallback for browsers not supporting media queries */
+  max-width: 1390px;
+  /* Forcing static grid on IE6 and IE7 */
+  *width: 1390px;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.grid {
+  margin-left: -1.42857%;
+  margin-right: -1.42857%;
+}
+@media (min-width: 720px) {
+  .grid {
+    margin-left: -1.79856%;
+    margin-right: -1.79856%;
+  }
+}
+.no-media-queries .grid {
+  /* Fallback for browsers not supporting media queries */
+  margin-left: -1.79856%;
+  margin-right: -1.79856%;
+}
+
+.small, .medium, .large {
+  background: hotpink;
+  text-align: center;
+  zoom: 1;
+}
+
+.small {
+  /* Spanning 3 of 12 columns */
+  width: 22.22222%;
+}
+@media (min-width: 720px) {
+  .small {
+    /* Spanning 6 of 18 columns */
+    width: 29.86111%;
+    margin-left: 1.73611%;
+    margin-right: 1.73611%;
+  }
+}
+.no-media-queries .small {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 6 of 18 columns */
+  width: 29.86111%;
+  margin-left: 1.73611%;
+  margin-right: 1.73611%;
+}
+
+.medium {
+  /* Spanning 6 of 12 columns */
+  width: 47.22222%;
+}
+@media (min-width: 720px) {
+  .medium {
+    /* Spanning 9 of 18 columns */
+    width: 46.52778%;
+    margin-left: 1.73611%;
+    margin-right: 1.73611%;
+  }
+}
+.no-media-queries .medium {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 9 of 18 columns */
+  width: 46.52778%;
+  margin-left: 1.73611%;
+  margin-right: 1.73611%;
+}
+
+.large {
+  /* Spanning 12 of 12 columns */
+  width: 97.22222%;
+}
+@media (min-width: 720px) {
+  .large {
+    /* Spanning 18 of 18 columns */
+    width: 96.52778%;
+    margin-left: 1.73611%;
+    margin-right: 1.73611%;
+  }
+}
+.no-media-queries .large {
+  /* Fallback for browsers not supporting media queries */
+  /* Spanning 18 of 18 columns */
+  width: 96.52778%;
+  margin-left: 1.73611%;
+  margin-right: 1.73611%;
+}

data/test/css/grid/layout/responsive.css

@@ -53,6 +53,8 @@
     max-width: 620px;
     /* Forcing static grid on IE6 and IE7 */
     *width: 620px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 }
 @media (min-width: 641px) {
@@ -60,6 +62,8 @@
     max-width: 940px;
     /* Forcing static grid on IE6 and IE7 */
     *width: 940px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 }
 .no-media-queries .page {
@@ -67,28 +71,30 @@
   max-width: 940px;
   /* Forcing static grid on IE6 and IE7 */
   *width: 940px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .grid {
-  margin-left: -3.33%;
-  margin-right: -3.33%;
+  margin-left: -3.33333%;
+  margin-right: -3.33333%;
 }
 @media (min-width: 321px) {
   .grid {
-    margin-left: -1.61%;
-    margin-right: -1.61%;
+    margin-left: -1.6129%;
+    margin-right: -1.6129%;
   }
 }
 @media (min-width: 641px) {
   .grid {
-    margin-left: -1.06%;
-    margin-right: -1.06%;
+    margin-left: -1.06383%;
+    margin-right: -1.06383%;
   }
 }
 .no-media-queries .grid {
   /* Fallback for browsers not supporting media queries */
-  margin-left: -1.06%;
-  margin-right: -1.06%;
+  margin-left: -1.06383%;
+  margin-right: -1.06383%;
 }
 
 .small, .medium, .large {
@@ -104,25 +110,25 @@
 @media (min-width: 321px) {
   .small {
     /* Spanning 2 of 8 columns */
-    width: 21.87%;
-    margin-left: 1.56%;
-    margin-right: 1.56%;
+    width: 21.875%;
+    margin-left: 1.5625%;
+    margin-right: 1.5625%;
   }
 }
 @media (min-width: 641px) {
   .small {
     /* Spanning 3 of 12 columns */
-    width: 22.91%;
-    margin-left: 1.04%;
-    margin-right: 1.04%;
+    width: 22.91667%;
+    margin-left: 1.04167%;
+    margin-right: 1.04167%;
   }
 }
 .no-media-queries .small {
   /* Fallback for browsers not supporting media queries */
   /* Spanning 3 of 12 columns */
-  width: 22.91%;
-  margin-left: 1.04%;
-  margin-right: 1.04%;
+  width: 22.91667%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
 }
 
 .medium {
@@ -132,25 +138,25 @@
 @media (min-width: 321px) {
   .medium {
     /* Spanning 4 of 8 columns */
-    width: 46.87%;
-    margin-left: 1.56%;
-    margin-right: 1.56%;
+    width: 46.875%;
+    margin-left: 1.5625%;
+    margin-right: 1.5625%;
   }
 }
 @media (min-width: 641px) {
   .medium {
     /* Spanning 6 of 12 columns */
-    width: 47.91%;
-    margin-left: 1.04%;
-    margin-right: 1.04%;
+    width: 47.91667%;
+    margin-left: 1.04167%;
+    margin-right: 1.04167%;
   }
 }
 .no-media-queries .medium {
   /* Fallback for browsers not supporting media queries */
   /* Spanning 6 of 12 columns */
-  width: 47.91%;
-  margin-left: 1.04%;
-  margin-right: 1.04%;
+  width: 47.91667%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
 }
 
 .large {
@@ -160,23 +166,23 @@
 @media (min-width: 321px) {
   .large {
     /* Spanning 8 of 8 columns */
-    width: 96.87%;
-    margin-left: 1.56%;
-    margin-right: 1.56%;
+    width: 96.875%;
+    margin-left: 1.5625%;
+    margin-right: 1.5625%;
   }
 }
 @media (min-width: 641px) {
   .large {
     /* Spanning 12 of 12 columns */
-    width: 97.91%;
-    margin-left: 1.04%;
-    margin-right: 1.04%;
+    width: 97.91667%;
+    margin-left: 1.04167%;
+    margin-right: 1.04167%;
   }
 }
 .no-media-queries .large {
   /* Fallback for browsers not supporting media queries */
   /* Spanning 12 of 12 columns */
-  width: 97.91%;
-  margin-left: 1.04%;
-  margin-right: 1.04%;
+  width: 97.91667%;
+  margin-left: 1.04167%;
+  margin-right: 1.04167%;
 }