ezy 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f56303dd08e2d83f79d822e6b629bb580810dd2c
-  data.tar.gz: 14a17341df94f13dac8ca5f95b0ab5e399a94baa
+  metadata.gz: d2646d76fa14740473e6f2fc6650cb55f81ccda7
+  data.tar.gz: 4a07995eb2a198c4b3f09297045a655f28b21945
 SHA512:
-  metadata.gz: c40dbc90d9e844f620d3026ca2c84a6f9d3c2cfd7f5d2f757234edccca6a49835b81a00ea0d9e87ec110d08ba2dcd42614b4cef15c3e34c8114c593bf6454451
-  data.tar.gz: 42dc596c398a17b1c9516b7623c988f34ed162c263737699145e389180e1d736dff633fc4a08f99119dd0238fa55b690d590aa5c960ae28237a625c45026a0dc
+  metadata.gz: 6ec2d578a84920768fa0e6cedbfe958a7bcf466a207f153e50474347b657ba2188a5f9604ca512cacdc509c4349e672d4cfac289ceeacc9c5947b79d72c565d4
+  data.tar.gz: 71b27587c090b0db51516eb574198daf61b9cc01a6bb3c6dd59afdec5ff03fee27ae94fe54bc8eb18923a5a26370d7277d8f8e940620788bb8a9a069a9ed2a24

data/VERSION

@@ -1 +1 @@
-0.0.3
+0.0.4

data/ezy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |s|
   # Release Specific Information
-  s.version = "0.0.3"
+  s.version = "0.0.4"
   s.date = "2013-11-10"
 
   # Gem Details

data/sass/ezy/_grid.scss

@@ -81,10 +81,13 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
 
 @mixin gutters( 
   $context: false,
-  $gutter-property: $gutter-property
+  $property: false
   ) {
-  @if $gutter-property == "margin" or $gutter-property == "padding" {
-    #{ $gutter-property }: {
+  @if (not $property) {
+    $property: $gutter-property;
+  }
+  @if $property == "margin" or $property == "padding" {
+    #{ $property }: {
       left: gutter( $context );
       right: gutter( $context );
     }
@@ -208,42 +211,77 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
   $columns,
   $context: false,
   $at-breakpoint: false,
-  $gutter-property: $gutter-property
+  $gutter-property: false
   ) {
   $width: span-column-width( $columns );
-  /* Spanning #{ $columns } of #{ $context } columns */
   @if $is-fluid and $context {
+  /* Spanning #{ $columns } of #{ $context } columns */
     $context-width: context-width( $context );
     $pct-width: percentage-round( $width / $context-width );
     width: $pct-width;
   } @else {
+  /* Spanning #{ $columns } columns */
     width: $width;
   }
-  @if $is-fluid {
-    @if (not $at-breakpoint) {
-      @if $total-columns < $context {
-        @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
-        @include gutters( $context, $gutter-property );
-      } @else if (not $grid-init) {
-        @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
-        @include gutters( $context, $gutter-property );
-      } @else {
-        @extend %ezy-column-#{ $context };
-      }
-    } @else {
-      @include gutters( $context, $gutter-property );
-    }
-    @if $columns > $context {
-      @warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
-    }
-    @if (not $context) {
-      @warn $context-warn;
-    }
-  } @else if (not $grid-init) {
-    @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
+  @if $gutter-property and $is-fluid and $context {
     @include gutters( $context, $gutter-property );
+
+  } @else if $gutter-property and $is-fluid and ( not $context ) {
+    @warn $context-warn;
+
+  } @else if $gutter-property and ( not $is-fluid ) {
+    @include gutters( $gutter-property );
+
+  } @else if $is-fluid and $context and $at-breakpoint {
+    @include gutters( $context );
+
+  } @else if $is-fluid and $context and ( $total-columns < $context ) {
+    @include gutters( $context );
+    @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
+
+  } @else if $is-fluid and $context and ( not $grid-init ) {
+    @include gutters( $context );
+    @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
+    
+  } @else if $is-fluid and $context {
+    @extend %ezy-column-#{ $context };
+
+  } @else if $is-fluid { // $context not set
+    @warn $context-warn;
+
+  } @else if $grid-init { // Grid is static
+      @extend %ezy-column;
+
   } @else {
-    @extend %ezy-column;
+    @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
+    @include gutters( $context );
   }
+
+  //   @if $is-fluid {
+  //     @if (not $at-breakpoint) {
+  //       @if $total-columns < $context {
+  //         @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
+  //         @include gutters( $context );
+  //       } @else if (not $grid-init) {
+  //         @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
+  //         @include gutters( $context );
+  //       } @else {
+  //         @extend %ezy-column-#{ $context };
+  //       }
+  //     } @else {
+  //       @include gutters( $context );
+  //     }
+  //     @if $columns > $context {
+  //       @warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
+  //     }
+  //     @if (not $context) {
+  //       @warn $context-warn;
+  //     }
+  //   } @else if (not $grid-init) {
+  //     @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
+  //     @include gutters( $context );
+  //   } @else {
+  //     @extend %ezy-column;
+  //   }
 }
 

data/test/css/grid/gutter.css

@@ -0,0 +1,170 @@
+/* -------------------------------------------------------------------- *
+ *  Micro Clearfix 
+ *  http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+/* -------------------------------------------------------------------- */
+/* -------------------------------------------------------------------- *
+ * Static grid
+ * -------------------------------------------------------------------- */
+/* -------------------------------------------------------------------- *
+ * Default gutter property
+ */
+.gutter-default-2 {
+  /* Spanning 2 columns */
+  width: 150px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.gutter-default-3 {
+  /* Spanning 3 columns */
+  width: 240px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: padding
+ */
+.gutter-padding-2 {
+  /* Spanning 2 columns */
+  width: 150px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.gutter-padding-3 {
+  /* Spanning 3 columns */
+  width: 240px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: margin
+ */
+.gutter-margin-2 {
+  /* Spanning 2 columns */
+  width: 150px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.gutter-margin-3 {
+  /* Spanning 3 columns */
+  width: 240px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Trying again, using grid-init()
+ * -------------------------------------------------------------------- */
+.gutter-default-2, .gutter-default-3 {
+  float: left;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Default gutter property after grid-init()
+ */
+.gutter-default-2 {
+  /* Spanning 2 columns */
+  width: 150px;
+}
+
+.gutter-default-3 {
+  /* Spanning 3 columns */
+  width: 240px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: padding after grid-init()
+ */
+.gutter-padding-2 {
+  /* Spanning 2 columns */
+  width: 150px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.gutter-padding-3 {
+  /* Spanning 3 columns */
+  width: 240px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: margin after grid-init()
+ */
+.gutter-margin-2 {
+  /* Spanning 2 columns */
+  width: 150px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.gutter-margin-3 {
+  /* Spanning 3 columns */
+  width: 240px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+/* -------------------------------------------------------------------- *
+ * Again, now with a fluid grid
+ * -------------------------------------------------------------------- */
+.gutter-default-2, .gutter-default-3 {
+  float: left;
+  margin-left: 2.77%;
+  margin-right: 2.77%;
+}
+
+/* -------------------------------------------------------------------- *
+ * Default gutter property after grid-init()
+ */
+.gutter-default-2 {
+  /* Spanning 2 of 6 columns */
+  width: 27.77%;
+}
+
+.gutter-default-3 {
+  /* Spanning 3 of 6 columns */
+  width: 44.44%;
+}
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: padding after grid-init()
+ */
+.gutter-padding-2 {
+  /* Spanning 2 of 6 columns */
+  width: 27.77%;
+  padding-left: 2.77%;
+  padding-right: 2.77%;
+}
+
+.gutter-padding-3 {
+  /* Spanning 3 of 6 columns */
+  width: 44.44%;
+  padding-left: 2.77%;
+  padding-right: 2.77%;
+}
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: margin after grid-init()
+ */
+.gutter-margin-2 {
+  /* Spanning 2 of 6 columns */
+  width: 27.77%;
+  margin-left: 2.77%;
+  margin-right: 2.77%;
+}
+
+.gutter-margin-3 {
+  /* Spanning 3 of 6 columns */
+  width: 44.44%;
+  margin-left: 2.77%;
+  margin-right: 2.77%;
+}

data/test/css/grid/static.css

@@ -40,21 +40,21 @@
  * Static columns: not using grid-init()
  */
 .span-columns-2 {
-  /* Spanning 2 of false columns */
+  /* Spanning 2 columns */
   width: 150px;
   margin-left: 15px;
   margin-right: 15px;
 }
 
 .span-columns-4 {
-  /* Spanning 4 of false columns */
+  /* Spanning 4 columns */
   width: 330px;
   margin-left: 15px;
   margin-right: 15px;
 }
 
 .span-columns-6 {
-  /* Spanning 6 of false columns */
+  /* Spanning 6 columns */
   width: 510px;
   margin-left: 15px;
   margin-right: 15px;
@@ -70,17 +70,17 @@
 }
 
 .span-columns-2 {
-  /* Spanning 2 of false columns */
+  /* Spanning 2 columns */
   width: 150px;
 }
 
 .span-columns-4 {
-  /* Spanning 4 of false columns */
+  /* Spanning 4 columns */
   width: 330px;
 }
 
 .span-columns-6 {
-  /* Spanning 6 of false columns */
+  /* Spanning 6 columns */
   width: 510px;
 }
 
@@ -88,6 +88,6 @@
  * Grid colum spanning more columns than layout
  */
 .span-columns-18 {
-  /* Spanning 18 of false columns */
+  /* Spanning 18 columns */
   width: 1590px;
 }

data/test/scss/grid/gutter.scss

@@ -0,0 +1,146 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "../../../sass/ezy";
+
+/* -------------------------------------------------------------------- *
+ * Static grid
+ * -------------------------------------------------------------------- */
+
+$column-width: 60px;
+$gutter-width: 30px;
+$total-columns: 6;
+$is-fluid: false;
+
+/* -------------------------------------------------------------------- *
+ * Default gutter property
+ */
+
+.gutter-default-2 {
+  @include span-columns( 2 );
+}
+
+.gutter-default-3 {
+  @include span-columns( 3 );
+}
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: padding
+ */
+
+.gutter-padding-2 {
+  @include span-columns( 2, $gutter-property: "padding" );
+}
+
+.gutter-padding-3 {
+  @include span-columns( 3, $gutter-property: "padding" );
+}
+
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: margin
+ */
+
+.gutter-margin-2 {
+  @include span-columns( 2, $gutter-property: "margin" );
+}
+
+.gutter-margin-3 {
+  @include span-columns( 3, $gutter-property: "margin" );
+}
+
+
+/* -------------------------------------------------------------------- *
+ * Trying again, using grid-init()
+ * -------------------------------------------------------------------- */
+
+@include grid-init();
+
+/* -------------------------------------------------------------------- *
+ * Default gutter property after grid-init()
+ */
+
+.gutter-default-2 {
+  @include span-columns( 2 );
+}
+
+.gutter-default-3 {
+  @include span-columns( 3 );
+}
+
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: padding after grid-init()
+ */
+
+.gutter-padding-2 {
+  @include span-columns( 2, $gutter-property: "padding" );
+}
+
+.gutter-padding-3 {
+  @include span-columns( 3, $gutter-property: "padding" );
+}
+
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: margin after grid-init()
+ */
+
+.gutter-margin-2 {
+  @include span-columns( 2, $gutter-property: "margin" );
+}
+
+.gutter-margin-3 {
+  @include span-columns( 3, $gutter-property: "margin" );
+}
+
+
+
+/* -------------------------------------------------------------------- *
+ * Again, now with a fluid grid
+ * -------------------------------------------------------------------- */
+
+$is-fluid: true;
+@include grid-init();
+
+/* -------------------------------------------------------------------- *
+ * Default gutter property after grid-init()
+ */
+
+.gutter-default-2 {
+  @include span-columns( 2, $total-columns );
+}
+
+.gutter-default-3 {
+  @include span-columns( 3, $total-columns );
+}
+
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: padding after grid-init()
+ */
+
+.gutter-padding-2 {
+  @include span-columns( 2, $total-columns, $gutter-property: "padding" );
+}
+
+.gutter-padding-3 {
+  @include span-columns( 3, $total-columns, $gutter-property: "padding" );
+}
+
+
+/* -------------------------------------------------------------------- *
+ * Forcing gutter property: margin after grid-init()
+ */
+
+.gutter-margin-2 {
+  @include span-columns( 2, $total-columns, $gutter-property: "margin" );
+}
+
+.gutter-margin-3 {
+  @include span-columns( 3, $total-columns, $gutter-property: "margin" );
+}
+
+
+
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ezy
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Frej Raahede Nielsen
@@ -61,11 +61,13 @@ files:
 - test/config.rb
 - test/css/grid/elastic.css
 - test/css/grid/fluid.css
+- test/css/grid/gutter.css
 - test/css/grid/responsive.css
 - test/css/grid/static.css
 - test/css/media.css
 - test/scss/grid/elastic.scss
 - test/scss/grid/fluid.scss
+- test/scss/grid/gutter.scss
 - test/scss/grid/responsive.scss
 - test/scss/grid/static.scss
 - test/scss/media.scss