gridle 2.0.2 → 2.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2300b51661efacc64ad8f9403968063a2f4d998d
-  data.tar.gz: a86161be4699506fe4613ef08001d96c8a0f16cb
+  metadata.gz: dcfa079cf092ca80ec0dc421cbac37026f7c0f37
+  data.tar.gz: 2ae78f265100dc35593a744bc4588bc96d7d79f2
 SHA512:
-  metadata.gz: 4cdb907f5e605d8ea18d07bb07c43d4c4256058d5c2b15a999aba127d5ef4665459a04b35b1389cd64247a60b04fc7909a9e165b1d52820331cbaa9c2889668e
-  data.tar.gz: f29a6f1616cd658e03f5439d2ac0cb05c3f7ed54b0b5d2b189efb51d1bca69792a973024cce216bba03e37fdc6fbc0e90e99b0d2e4c93fc06c0b35de79093f37
+  metadata.gz: 901acf0fca837f2a181002f21374a345eb7b8f1e80673ed1c6cec632a6147329c43fe6fb6da202b0c0d6a60a91df47733f0e9ef3b491748c5ea7d98006d8996d
+  data.tar.gz: cb01d68152a8ad7242610aebe74f6ab6f2eb4334869cd2b08d2f39219c550d5b5813797359cd2b85d225103bb85861e6951c660dd28718f4a05762a4554142bb

data/lib/gridle.rb

@@ -17,8 +17,8 @@ Compass::Frameworks.register('gridle', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Extension
-  VERSION = "2.0.2"
-  DATE = "2015-10-09"
+  VERSION = "2.0.4"
+  DATE = "2015-10-21"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/gridle/_api.scss

@@ -1,3 +1,20 @@
+//
+// Layout helper
+//
+@mixin gridle_layout(
+	$layout,
+	$context : null
+) {
+	@include gridle_state($context) {
+		@include gridle_row();
+		@each $sel, $l in $layout {
+			> #{$sel} {
+				@include gridle($l);	
+			}
+		}
+	}
+}
+
 //
 // Gridle state
 //
@@ -47,6 +64,8 @@
 		@include _gridle_state($state, $has-parent, true) {
 			@content;
 		}
+	} @else {
+		@content;
 	}
 }
 
@@ -120,12 +139,23 @@
 }
 
 
+//
+// Gridle helper
+//
+@mixin gridle($layout) {
+	$map : _gridle_get_gridle_set_map_from_list($layout);
+	@if type-of($map) == map {
+		@include gridle_set($map);
+	}
+}
+
+
 //
 // Helper to apply multiple config for a certain state with one mixin
 //
 @mixin gridle_set(
 	$settings,
-	$state : default
+	$state : current
 ) {
 	// init if needed
 	@include gridle_init();
@@ -154,9 +184,11 @@
 				}
 			} @else if $sn == grid {
 				@if length($sv) == 2 {
-					@include gridle(nth($sv,1), nth($sv,2));
+					@include gridle_grid(nth($sv,1), nth($sv,2));
+				} @else if type-of($sv) == list and length($sv) == 1 {
+					@include gridle_grid(nth($sv,1));
 				} @else {
-					@include gridle($sv);
+					@include gridle_grid($sv);
 				}
 			} @else if $sn == grid-grow {
 				@if $sv == true {
@@ -195,7 +227,11 @@
 					@include gridle_suffix($sv);
 				}
 			} @else if $sn == clear-each {
-				@include gridle_clear_each(nth($sv,1), nth($sv,2));
+				@if length($sv) == 2 {
+					@include gridle_clear_each(nth($sv,1), nth($sv,2));
+				} @else {
+					@include gridle_clear_each($sv);
+				}
 			} @else if $sn == grid-centered and $sv == true {
 				@include gridle_grid_centered();
 			} @else if $sn == row and $sv == true {
@@ -253,11 +289,23 @@
 			} @else if $sn == float {
 				@include gridle_float($sv);
 			} @else if $sn == clear {
-				@include gridle_clear($sv);
+				@if $sv == true {
+					@include gridle_clear();
+				} @else {
+					@include gridle_clear($sv);
+				}
 			} @else if $sn == no-gutter {
-				@include gridle_no_gutter($sv);
+				@if $sv == true {
+					@include gridle_no_gutter();
+				} @else {
+					@include gridle_no_gutter($sv);
+				}
 			} @else if $sn == gutter or $sn == gutter-width {
-				@include gridle_gutter($sv);
+				@if $sv == true {
+					@include gridle_gutter();
+				} @else {
+					@include gridle_gutter($sv);
+				}
 			} @else {
 				// we do nothing
 			}
@@ -266,6 +314,236 @@
 }
 
 
+//
+// Push
+//
+@mixin _gridle_common_push(
+	$state : default
+) {
+	// css
+	position:relative;
+	// handle direction attribute
+	@if gridle_get_state_var(dir-attribute, $state) {
+		[dir="rtl"] & {
+			left: auto;
+		}
+		[dir="ltr"] & {
+			right: auto;
+		}
+	}
+}
+@mixin gridle_push(
+	$columns,
+	$context : null
+) {
+	@include _gridle_call(push) {
+		// variables :
+		@if type-of($context) != number {
+			$context : gridle_get_state_var(context);
+		}
+		$direction : gridle_get_state_var(direction);
+		$name-multiplicator : gridle_get_state_var(name-multiplicator);
+		$column-width : gridle_get_state_var(column-width);
+
+		// vars :
+		$width : 0;
+		@if $column-width {
+			$width : $column-width * ($columns / $name-multiplicator);
+		} @else {
+			$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+		}
+		// @if $direction == rtl { $width : $width*-1; }
+		// left:$width;
+		// @if $direction == ltr {
+		// 	[dir="rtl"] & {
+		// 		left: $width * -1;
+		// 	}
+		// }
+
+		// set value :
+		@if $direction == rtl { right:$width; }
+		@else { left:$width; }
+		// handle direction attribute
+		@if gridle_get_state_var(dir-attribute) {
+			[dir="rtl"] & {
+				right: $width; 
+			}
+			[dir="ltr"] & {
+				left: $width;
+			}
+		}
+	}
+}
+
+
+//
+// Pull
+//
+@mixin _gridle_common_pull(
+	$state : default
+) {
+	// css
+	position:relative;
+	// handle direction attribute
+	@if gridle_get_state_var(dir-attribute, $state) {
+		[dir="rtl"] & {
+			right: auto;
+		}
+		[dir="ltr"] & {
+			left: auto;
+		}
+	}
+}
+@mixin gridle_pull(
+	$columns,
+	$context : null
+) {
+	@include _gridle_call(pull) {
+		// variables :
+		@if type-of($context) != number {
+			$context : gridle_get_state_var(context);
+		}
+		$direction : gridle_get_state_var(direction);
+		$name-multiplicator : gridle_get_state_var(name-multiplicator);
+		$column-width : gridle_get_state_var(column-width);
+
+		// vars :
+		$width : 0;
+		@if $column-width {
+			$width : $column-width * ($columns / $name-multiplicator);
+		} @else {
+			$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+		}
+		// @if $direction == rtl { $width : $width*-1; }
+		// right:$width;
+		// @if $direction == ltr {
+		// 	[dir="rtl"] & {
+		// 		left: $width * -1;
+		// 	}
+		// }
+
+		// set value :
+		@if $direction == rtl { left:$width; }
+		@else { right:$width; }
+		// handle direction attribute
+		@if gridle_get_state_var(dir-attribute) {
+			[dir="rtl"] & {
+				left: $width; 
+			}
+			[dir="ltr"] & {
+				right: $width;
+			}
+		}
+	}
+}
+
+
+//
+// Prefix
+//
+@mixin _gridle_common_prefix(
+	$state : default
+) {
+	// handle direction attribute
+	@if gridle_get_state_var(dir-attribute, $state) {
+		[dir="rtl"] & {
+			margin-left: auto;
+		}
+		[dir="ltr"] & {
+			margin-right: auto;
+		}
+	}
+}
+@mixin gridle_prefix(
+	$columns,
+	$context : null
+) {
+	@include _gridle_call(prefix) {
+		// vars :
+		@if type-of($context) != number {
+			$context : gridle_get_state_var(context);
+		}
+		$direction : gridle_get_state_var(direction);
+		$name-multiplicator : gridle_get_state_var(name-multiplicator);
+		$column-width : gridle_get_state_var(column-width);
+
+		// vars :
+		$width : 0;
+		@if $column-width {
+			$width : $column-width * ($columns / $name-multiplicator);
+		} @else {
+			$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+		}
+
+		// set value :
+		@if $direction == rtl { margin-right:$width; }
+		@else { margin-left:$width; }
+		// handle direction attribute
+		@if gridle_get_state_var(dir-attribute) {
+			[dir="rtl"] & {
+				margin-right: $width; 
+			}
+			[dir="ltr"] & {
+				margin-left: $width;
+			}
+		}
+	}
+}
+
+
+//
+// Suffix
+//
+@mixin _gridle_common_suffix(
+	$state : default
+) {
+	@if gridle_get_state_var(dir-attribute, $state) {
+		[dir="rtl"] & {
+			margin-right: auto;
+		}
+		[dir="ltr"] & {
+			margin-left: auto;
+		}
+	}
+}
+@mixin gridle_suffix(
+	$columns,
+	$context : null
+) {
+	@include _gridle_call(suffix) {
+		// vars :
+		@if type-of($context) != number {
+			$context : gridle_get_state_var(context);
+		}
+		$direction : gridle_get_state_var(direction);
+		$name-multiplicator : gridle_get_state_var(name-multiplicator);
+		$column-width : gridle_get_state_var(column-width);
+
+		// vars :
+		$width : 0;
+		@if $column-width {
+			$width : $column-width * ($columns / $name-multiplicator);
+		} @else {
+			$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+		}
+
+		// set value :
+		@if $direction == rtl { margin-left:$width; }
+		@else { margin-right:$width; }
+
+		// handle direction attribute
+		@if gridle_get_state_var(dir-attribute) {
+			[dir="rtl"] & {
+				margin-left: $width; 
+			}
+			[dir="ltr"] & {
+				margin-right: $width;
+			}
+		}
+	}
+}
+
+
 //
 // Row debug
 //
@@ -527,7 +805,7 @@
 
 		// check that we have a gutter map
 		@each $side, $value in $gutters {
-			@if $value > 0 {
+			@if $value and $value > 0 {
 				padding-#{$side} : $value;
 			}
 		}

data/stylesheets/gridle/_driver-default.scss

@@ -24,6 +24,22 @@
 	@include _gridle_call(row) {
 		padding-left: 0 !important;
 		padding-right: 0 !important;
+		margin-left: -#{gridle_get_state_var(gutter-left)};
+		margin-right: -#{gridle_get_state_var(gutter-right)};
+		font-size:0; // to avoid problems with inline-block margins
+
+		// do this only when not in generate phase
+		// mean that we use the mixin directly
+		@if _gridle_is_in_generate_phase() == false {
+			@each $stateName, $state in gridle_get_states() {
+				@include gridle_state($state) {	
+					& #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
+						margin-left: -#{gridle_get_state_var(gutter-left, $state)};
+						margin-right: -#{gridle_get_state_var(gutter-right, $state)};
+					}
+				}
+			}
+		}
 	}
 }
 
@@ -41,6 +57,22 @@
 	@include _gridle_call(col) {
 		padding-left: 0 !important;
 		padding-right: 0 !important;
+		margin-left: -#{gridle_get_state_var(gutter-left)};
+		margin-right: -#{gridle_get_state_var(gutter-right)};
+		font-size:0; // to avoid problems with inline-block margins
+
+		// do this only when not in generate phase
+		// mean that we use the mixin directly
+		@if _gridle_is_in_generate_phase() == false {
+			@each $stateName, $state in gridle_get_states() {
+				@include gridle_state($state) {	
+					& #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
+						margin-left: -#{gridle_get_state_var(gutter-left, $state)};
+						margin-right: -#{gridle_get_state_var(gutter-right, $state)};
+					}
+				}
+			}
+		}
 	}
 }
 
@@ -84,34 +116,37 @@
 	$state : default
 ) {
 	// vars
-	$direction : gridle_get_state_var(direction, $state);
+	// $direction : gridle_get_state_var(direction, $state);
 	
 	// css
 	display:inline-block;
 	min-height:1px;
-	@if $direction == rtl {
-		float:right;
-		// direction:rtl;
-	} @else {
-		float:left;
-		// direction:ltr;
-	}
+	// @if $direction == rtl {
+	// 	float:right;
+	// 	// direction:rtl;
+	// } @else {
+	// 	float:left;
+	// 	// direction:ltr;
+	// }
+	// float:left;
 	@if $gridle-vendor-prefix {
 		-webkit-box-sizing: border-box;
 		-moz-box-sizing: border-box;
 	}
+	font-size:1rem; // reset the font size
 	box-sizing: border-box;
+	vertical-align: top;
 	@include gridle_gutter();
 	
 }
-@mixin gridle(
+@mixin gridle_grid(
 	$columns,
 	$context : null
 ) {
 	@if $columns == grow {
 		@include gridle_grid_grow();
 	} @else if $columns == adapt {
-		@include gridle_grow_adapt();
+		@include gridle_grid_adapt();
 	} @else {
 		
 		@include _gridle_call(grid) {
@@ -124,9 +159,10 @@
 			$name-multiplicator : gridle_get_state_var(name-multiplicator);
 			$gutter-left : gridle_get_state_var(gutter-left);
 			$gutter-right : gridle_get_state_var(gutter-right);
+			$column-width : gridle_get_state_var(column-width);
 
 			// manage columns
-			@if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
+			@if type-of($columns) != number and gridle_has_column($columns) {
 				// the columns is a saved one, get the context and column value
 				$column : map-get($_gridle_columns, $columns);
 				$context : map-get($column, context);
@@ -138,24 +174,18 @@
 			}
 
 			// width :
-			$width : percentage(1 / $context * $columns);
+			$width : 0;
+			@if $column-width {
+				$width : $column-width * $columns;
+			} @else {
+				$width : percentage(1 / $context * $columns);
+			}
 
 			// set value :
 			width:$width;
-
-			@if $columns == $context {
-				display: inline-block;
-			}
 		}
 	}
 }
-// alias to gridle
-@mixin gridle_grid(
-	$columns,
-	$context : null
-) {
-	@include gridle($columns, $context);
-}
 
 
 //
@@ -187,7 +217,17 @@
 	@include _gridle_call(row-full) {
 		$direction : gridle_get_state_var(direction);
 		width: 100vw;
-		@if $direction == rtl {
+		@if $direction == ltr {
+			margin-left:50% !important;
+			margin-right:0 !important;
+			@if $gridle-vendor-prefix {
+				-webkit-transform: translateX(-50%);
+				-moz-transition: translateX(-50%);
+				-ms-transform: translateX(-50%);
+				-o-transform: translateX(-50%);
+			}
+			transform: translateX(-50%);
+		} @else {
 			margin-right:50% !important;
 			margin-left:0 !important;
 			@if $gridle-vendor-prefix {
@@ -197,16 +237,30 @@
 				-o-transform: translateX(50%);
 			}
 			transform: translateX(50%);
-		} @else {
-			margin-left:50% !important;
-			margin-right:0 !important;
-			@if $gridle-vendor-prefix {
-				-webkit-transform: translateX(-50%);
-				-moz-transition: translateX(-50%);
-				-ms-transform: translateX(-50%);
-				-o-transform: translateX(-50%);
+		}
+		@if gridle_get_state_var(dir-attribute) {
+			[dir="ltr"] & {
+				margin-left:50% !important;
+				margin-right:0 !important;
+				@if $gridle-vendor-prefix {
+					-webkit-transform: translateX(-50%);
+					-moz-transition: translateX(-50%);
+					-ms-transform: translateX(-50%);
+					-o-transform: translateX(-50%);
+				}
+				transform: translateX(-50%);
+			}
+			[dir="rtl"] & {
+				margin-right:50% !important;
+				margin-left:0 !important;
+				@if $gridle-vendor-prefix {
+					-webkit-transform: translateX(50%);
+					-moz-transition: translateX(50%);
+					-ms-transform: translateX(50%);
+					-o-transform: translateX(50%);
+				}
+				transform: translateX(50%);
 			}
-			transform: translateX(-50%);
 		}
 	}
 }
@@ -226,6 +280,7 @@
 		-moz-box-sizing: border-box;
 	}
 	box-sizing: border-box;
+	font-size: 1rem;
 	@include gridle_gutter();
 }
 @mixin gridle_grid_adapt(
@@ -249,6 +304,7 @@
 		-moz-box-sizing: border-box;
 	}
 	box-sizing: border-box;
+	font-size: 1rem;
 	@include gridle_gutter();
 	
 }
@@ -259,122 +315,6 @@
 }
 
 
-//
-// Push
-//
-@mixin _gridle_common_push(
-	$state : default
-) {
-	// css
-	position:relative;
-}
-@mixin gridle_push(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(push) {
-		// variables :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-		@if $direction == rtl { $width : $width*-1; }
-		left:$width;
-	}
-}
-
-
-//
-// Pull
-//
-@mixin _gridle_common_pull(
-	$state : default
-) {
-	// css
-	position:relative;
-}
-@mixin gridle_pull(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(pull) {
-		// variables :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-		
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-		@if $direction == rtl { $width : $width*-1; }
-		right:$width;
-	}
-}
-
-
-//
-// Prefix
-//
-@mixin _gridle_common_prefix(
-	$state : default
-) {
-}
-@mixin gridle_prefix(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(prefix) {
-		// vars :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-		
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-
-		// set value :
-		@if $direction == rtl { margin-right:$width; }
-		@else { margin-left:$width; }
-	}
-}
-
-
-//
-// Suffix
-//
-@mixin _gridle_common_suffix(
-	$state : default
-) {
-}
-@mixin gridle_suffix(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(suffix) {
-		// vars :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-		
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-		
-		// set value :
-		@if $direction == rtl { margin-left:$width; }
-		@else { margin-right:$width; }
-	}
-}
-
-
 //
 // Order
 //
@@ -428,24 +368,29 @@
 
 			> * {
 				float:none !important;
-				vertical-align:$align;
+				@if in-map($align, top) {
+					vertical-align:top;
+				} @elseif in-map($align, middle) {
+					vertical-align:middle;
+				} @else {
+					vertical-align:bottom;
+				}
 				font-size:1rem;
 			}
-
 		} 
 
 		@each $a in $align {
-			@if $align == left {
+			@if $a == left {
 				text-align: left;
-			} @else if $align == center {
+			} @else if $a == center {
 				text-align: center;
-			} @else if $align == right {
+			} @else if $a == right {
 				text-align: right;
-			} @else if $align == top {
+			} @else if $a == top {
 				vertical-align: top;
-			} @else if $align == middle {
+			} @else if $a == middle {
 				vertical-align: middle;
-			} @else if $align == bottom {
+			} @else if $a == bottom {
 				vertical-align: bottom;
 			}
 		}