gridle 1.2.1 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 525276bb3719af56f280009b8516afe1ead80cc8
-  data.tar.gz: 9592420a6bc1db61b9f4725027ff5c7f78ef9b1b
+  metadata.gz: 44b94a906c714886ffee185a7f395eadbaca2a70
+  data.tar.gz: 9b77ea15dd0dec3b527ddb4996a3068af41ebdea
 SHA512:
-  metadata.gz: 82fb1550aa6166e1e8c3963c8b6b4f7bdcd840c2c24d0cf798dc622dbfae163bcaec728649648c28e8eaac80c61e73c1481b86b1dbcf81d18af235169f7df4d0
-  data.tar.gz: c2ec98a697d53cc224c7348a12d7b70ce09f0d6f0b98ee5777641d4ca29cbcbf847588b4c2683b0d5376076998623136b3c5e4e593a66526405ac645a2b29f44
+  metadata.gz: f4c36e31eb7124b2c0fc27181ec933a49456f0e727c2c578802a853f0ede75093f07eebbeb5399781fbe33fa38cf4baed7db2b4a792544892516f13709f29280
+  data.tar.gz: 6c955fadb5cad32bfd1f8aa99c1eba1ecaa40f6fd87580e602ce206492d9a49dac4046d18e50f83130fbd1e0024cd7294e438078ef4d78c378340e7be4743ee0

data/lib/gridle.rb

@@ -16,8 +16,8 @@
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Extension
-  VERSION = "1.2.1"
-  DATE = "2014-05-13"
+  VERSION = "1.3.0"
+  DATE = "2014-05-14"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/gridle/_common-mixins.scss

@@ -4,11 +4,14 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-@mixin _gridle_container_common() {
+@mixin _gridle_container_common(
+	$state : null
+) {
 	@extend %gridle-simple-clearfix;
 	@extend %gridle-container-common;
 	// debug part :
-	@if ($gridle-debug == true) {
+	$debug : _gridle_get_var_value(debug, $state);
+	@if ($debug == true) {
 		#{$gridle-debug-selector} {
 			@extend %gridle-container-debug-common;
 		}
@@ -16,22 +19,31 @@
 }
 @mixin _gridle_grid_common() {
 	@extend %gridle-grid-common;
-	@if $gridle-direction == rtl {
-		float:right;
-		direction:rtl;
-	} @else {
-		float:left;
-		direction:ltr;
-	}
-
-	@if $gridle-gutter-type == padding {
-		// set padding :
-		padding:0 $gridle-gutter-width/2;
-	}
+	
+	// loop on each states :
+	@each $stateName, $state in $_gridle-states
+	{
+		// vars :
+		$direction : _gridle_get_var_value(direction, $state);
+		$gutter-width : _gridle_get_var_value(gutter-width, $state);
+		$debug : _gridle_get_var_value(debug, $state);
+		
+		@include gridle_state($state) {
+			@if $direction == rtl {
+				float:right;
+				direction:rtl;
+			} @else {
+				float:left;
+				direction:ltr;
+			}
 
-	@if $gridle-debug == true {
-		#{$gridle-debug-selector} {
-			@extend %gridle-grid-debug-common;
+			padding:0 $gutter-width/2;
+		}
+		
+		@if $debug == true {
+			#{$gridle-debug-selector} {
+				@extend %gridle-grid-debug-common;
+			}
 		}
 	}
 }
@@ -39,44 +51,48 @@
 	@extend %gridle-clearfix;
 	@extend %gridle-parent-common;
 }
-@mixin _gridle_push_common() {
+@mixin _gridle_push_common(
+	$state : null
+) {
+	$debug : _gridle_get_var_value(debug, $state);
+
 	// extend common :
 	@extend %gridle-push-pull-common;
-	@if $gridle-debug == true {
+	@if $debug == true {
 		#{$gridle-debug-selector} {
 			@extend %gridle-push-pull-debug-background-common;
 			background-color:#f4efdf !important;
-			@if $gridle-direction == ltr {
-				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
-			} @else {
-				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
-			}
 		}
 	}
 }
-@mixin _gridle_pull_common() {
+@mixin _gridle_pull_common(
+	$state : null
+) {
+	$debug : _gridle_get_var_value(debug, $state);
+
 	@extend %gridle-push-pull-common;
-	@if $gridle-debug == true {
+	@if $debug == true {
 		#{$gridle-debug-selector} {
 			@extend %gridle-push-pull-debug-background-common;
 			background-color:#cfe4d5 !important;
-			@if $gridle-direction == ltr {
-				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
-			} @else {
-				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
-			}
 		}
 	}
 }
-@mixin _gridle_prefix_common() {
-	@if $gridle-debug == true {
+@mixin _gridle_prefix_common(
+	$state : null
+) {
+	$debug : _gridle_get_var_value(debug, $state);
+	@if $debug == true {
 		#{$gridle-debug-selector} {
 			@extend %gridle-prefix-debug-common;
 		}
 	}
 }
-@mixin _gridle_suffix_common() {
-	@if $gridle-debug == true {
+@mixin _gridle_suffix_common(
+	$state : null
+) {
+	$debug : _gridle_get_var_value(debug, $state);
+	@if $debug == true {
 		#{$gridle-debug-selector} {
 			@extend %gridle-suffix-debug-common;
 		}

data/stylesheets/gridle/_functions.scss

@@ -26,39 +26,37 @@
  * @param 	int 		$context : $gridle-columns-count 	 	The context to use
  * @return 	percentage 							The width in percent
  */
-@function gridle_get_columns_width(
+@function gridle_get_column_width(
 	$columns : 1,
-	$context : $gridle-columns-count
+	$stateMap-or-stateName : null
 ) {
 	@return percentage(1 / $context * $columns);
 }
-@function gridle_get_column_width(
-	$columns : 1,
-	$context : $gridle-columns-count
-) { 
-	@return gridle_get_columns_width($columns, $context);
-}
 
 
 /**
  *  Get a state map
+ *
+ * @param 	string 		$name 		The name of the state to get
+ * @return 	map 				A state map object
  */
 @function _gridle_get_state(
-	$name
+	$stateMap-or-stateName
 ) {
-	// if name if not a string, return null :
-	@if type-of($name) != string
-	{
-		@return false;
-	}
-
 	// check if has a state named like this :
-	@if (map-has-key($_gridle_states, $name))
+	@if (map-has-key($_gridle_states, $stateMap-or-stateName))
 	{
-		@return map-get($_gridle_states, unquote($name));
+		@return map-get($_gridle_states, unquote($stateMap-or-stateName));
 	} 
 
-	@return false;
+	// nothing finded, so return the default state :
+	@if $stateMap-or-stateName
+	{
+		@return map-merge($_gridle-settings, $stateMap-or-stateName);
+	}
+
+	// nothing finded, return the default state :
+	@return $_gridle-settings;
 }
 
 
@@ -89,6 +87,35 @@
 }
 
 
+/**
+ * Get a variable
+ *
+ * @param 	String 		$varName 				The variable name
+ * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
+ * @return 	Mixed 							The finded value
+ */
+@function _gridle_get_var_value(
+	$varName,
+	$stateMap-or-stateName : null
+) {
+	// if is a state :
+	$state : null;
+
+	// get the state (if no state find, return the default one) :
+	$state : _gridle_get_state($stateMap-or-stateName);
+
+	// extend default state with given state :
+	$props : map-merge($_gridle-settings, $state);
+	
+	@if map-has-key($props, unquote($varName)) {
+		@return map-get($state, unquote($varName));
+	}
+	
+	// nothing finded :
+	@return null;
+}
+
+
 /**
  * Set a variable in a state
  * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
@@ -134,14 +161,12 @@
 @function _gridle_create_column(
 	$name,
 	$columns,
-	$context,
-	$generateClasses : true
+	$context
 ) {
 	@return (
 		name : $name,
 		columns : $columns,
-		context : $context,
-		generateClasses : $generateClasses
+		context : $context
 	);
 }
 
@@ -162,6 +187,11 @@
 	// init selector :
 	$sel : ".";
 
+	// delete default :
+	@if unquote($state) == default {
+		$state : null;
+	}
+	
 	// add class prefix :
 	@if $gridle-class-prefix and $gridle-class-prefix != '' {
 		$sel : "#{$sel}#{$gridle-class-prefix}";
@@ -216,67 +246,79 @@
  * @param 	Mixed 		$max-width 			The max width if first param is a min width
  * @return 	String 						The media query string without the @media
  */
-@function _get_media_query_for_state(
-	$state-or-min-width : null,
-	$max-width : null
+@function _gridle_get_media_query(
+	$state-or-settings
 ) {
+	// check if is a string :
+	$state : null;
+	@if type-of($state-or-settings) == string
+	{
+		$state : _gridle_get_state($state-or-settings);
+	}
+	@else if $state-or-settings == null
+	{
+		$state : $_gridle-settings;
+	}
+	@else
+	{
+		$state : map-merge($_gridle-settings, $state-or-settings);
+	}
 
-	// get the index of state :
-	$state : _gridle_get_state($state-or-min-width);
-
-	// if there's an idx, the state requested is a registered one :
+	// if it's some settings or a state :
 	@if $state {
 
 		// get vars :
 		$name : map-get($state, name);
 		$min-width : map-get($state, min-width);
 		$max-width : map-get($state, max-width);
-		$classes : map-get($state, classes);
 		$query : map-get($state, query);
 
-		// check if exist :
-		@if $name {
-
-			// check if query exist :
-			@if $query {
-				@return $query;
-			} @else {
-
-				// write media query :
-				@if $min-width and $max-width {
-					@return "screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
-				} @else if $min-width == null and $max-width {
-					@return "screen and (max-width: #{$max-width})";
-				} @else if $min-width and $max-width == null {
-					@return "screen and (min-width: #{$min-width})";
-				} @else {
-					@return false;
-				}
-			}
-		} @else {
-			@return "not working";
+		// direct query :
+		@if $query
+		{
+			@return $query;
+		} 
+		@else if $min-width and $max-width
+		{
+			@return "screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
+		}
+		@else if $min-width
+		{
+			@return "screen and (min-width: #{$min-width})";
 		}
-	} @else if $state-or-min-width == 'print' or $state-or-min-width == print {
+		@else if $max-width
+		{
+			@return "screen and (max-width: #{$max-width})";
+		}
+		@else
+		{
+			@return null;
+		}
+
+	} 
+	@else if unquote($state-or-settings) == print
+	{
 		@return "only print";
-	} @else if $state-or-min-width == 'tv' or $state-or-min-width == tv {
+	} 
+	@else if unquote($state-or-settings) == tv
+	{
 		@return "only tv";
-	} @else if $state-or-min-width == 'portrait' or $state-or-min-width == portrait {
+	}
+	@else if unquote($state-or-settings) == portrait
+	{
 		@return "only screen and (orientation: portrait)";
-	} @else if $state-or-min-width == 'landscape' or $state-or-min-width == landscape {
+	}
+	@else if unquote($state-or-settings) == landscape
+	{
 		@return "only screen and (orientation: landscape)";
-	} @else if $state-or-min-width == 'retina' or $state-or-min-width == retina {
+	}
+	@else if unquote($state-or-settings) == retina
+	{
 		@return "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-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)";
-	} @else {
-		// check for min and max width :
-		@if $state-or-min-width and $max-width {
-			@return "screen and (min-width: #{$state-or-min-width}) and (max-width: #{$max-width})";
-		} @else if $state-or-min-width and $max-width == null {
-			@return "screen and (min-width: #{$state-or-min-width})";
-		} @else if $state-or-min-width == null and $max-width {
-			@return "screen and (max-width: #{$max-width})";
-		} @else {
-			@return null;
-		}
+	}
+	@else
+	{
+		@return null;
 	}
 }
 

data/stylesheets/gridle/_generate-mixins.scss

@@ -113,7 +113,8 @@
 	}
 
 	// debug colors :
-	@if $gridle-debug {
+	$debug : _gridle_get_var_value(debug, $state);
+	@if $debug {
 		// debug color classes :
 		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
 			#{$gridle-debug-selector} {
@@ -168,7 +169,7 @@
 
 			$value : null;
 			@if $varName == "query" {
-				$value : _get_media_query_for_state($stateName);
+				$value : _gridle_get_media_query_for_state($stateName);
 			} @else {
 				$value : map-get($state,$varName);
 				// $value : _gridle_get_state_var($i,$var);
@@ -244,12 +245,6 @@
 	$has-parent
 ) {
  
-	// check if debug is activated :
-	@if $gridle-debug {
-		$gridle-html-states-classes : true !global;
-	}
-
-
 	// | ------------------------
 	// | Windows 8 fix
 	// | ------------------------
@@ -295,75 +290,6 @@
 	$suffix-common-selector : ();
 
 
-	// | ------------------------
-	// | Default classes
-	// | ------------------------
-
-	// get specials columns :
-	$columnsMap : map-merge((), $_gridle_columns);
-
-	// register all default columns :
-	@for $i from 0 through $gridle-columns-count {
-		
-		// name :
-		$columnName : "#{$i*$gridle-name-multiplicator}";
-
-		// create a column :
-		$col : _gridle_create_column($columnName, $i,  $gridle-columns-count);
-
-		// add column in columns map :
-		$columnsMap : map-set($columnsMap, $columnName,  $col);
-	}
-
-	// generate all classes for columns :
-	@each $columnName, $column in $columnsMap {
-
-		// variables :
-		$columnsCount : map-get($column, columns);
-		$context : map-get($column, context);
-
-		// classes :
-		#{_gridle_classname($gridle-grid-name-pattern, null, $columnName)} {
-			@include _gridle($columnsCount, null, $context);
-		}
-		@if $gridle-generate-push-classes == true {
-			#{_gridle_classname($gridle-push-name-pattern, null, $columnName)} {
-				@include _gridle_push($columnsCount, null, $context);
-			}
-		}
-		@if $gridle-generate-pull-classes == true {
-			#{_gridle_classname($gridle-pull-name-pattern, null, $columnName)} {
-				@include _gridle_pull($columnsCount, null, $context);
-			}
-		}
-		@if $gridle-generate-prefix-classes == true {
-			#{_gridle_classname($gridle-prefix-name-pattern, null, $columnName)} {
-				@include _gridle_prefix($columnsCount, null, $context);
-			}
-		}
-		@if $gridle-generate-suffix-classes == true {
-			#{_gridle_classname($gridle-suffix-name-pattern, null, $columnName)} {
-				@include _gridle_suffix($columnsCount, null, $context);
-			}   
-		}
-	}
-
-	// helpers classes :
-	@if $gridle-generate-helpers-classes == true {
-		@include _gridle_generate_helper_classes();
-	}
-
-	// loop on each columns to generate common selector :
-	@each $columnName, $column in $columnsMap {
-
-		// selectors :
-		$common-selector : append( $common-selector, unquote(_gridle_classname($gridle-grid-name-pattern, null, $columnName)), comma );
-		$push-common-selector : append( $push-common-selector, unquote(_gridle_classname($gridle-push-name-pattern, null, $columnName)), comma );
-		$pull-common-selector : append( $pull-common-selector, unquote(_gridle_classname($gridle-pull-name-pattern, null, $columnName)), comma );
-		$prefix-common-selector : append( $prefix-common-selector, unquote(_gridle_classname($gridle-prefix-name-pattern, null, $columnName)), comma );
-		$suffix-common-selector : append( $suffix-common-selector, unquote(_gridle_classname($gridle-suffix-name-pattern, null, $columnName)), comma );
-	}
-
 	// | ------------------------
 	// | Media queries classes common selectors
 	// | ------------------------
@@ -373,11 +299,16 @@
 	
 		// setup vars :
 		$media : $stateName;
-		$classes : map-get($state, "classes");
-		$context : map-get($state, "context");
+		$classes : map-get($state, classes);
+		$context : map-get($state, context);
+		$name-multiplicator : map-get($state, name-multiplicator);
+		$generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
+		$generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
+		$generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
+		$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
 
 		// generate classes :   
-		@if $media and $classes == true and $context {
+		@if $classes == true and $context {
 
 			// get specials columns :
 			$columnsMap : map-merge((), $_gridle_columns);
@@ -386,7 +317,7 @@
 			@for $j from 0 through $context {
 				
 				// name :
-				$columnName : "#{$j*$gridle-name-multiplicator}";
+				$columnName : "#{$j*$name-multiplicator}";
 
 				// // create a column :
 				$col : _gridle_create_column($columnName, $j,  $context);
@@ -400,10 +331,18 @@
 		 	
 				// add selector :
 				$common-selector : append( $common-selector, unquote(_gridle_classname($gridle-grid-name-pattern, $media, $columnName)), comma );
-				$push-common-selector : append( $push-common-selector, unquote(_gridle_classname($gridle-push-name-pattern, $media, $columnName)), comma );
-				$pull-common-selector : append( $pull-common-selector, unquote(_gridle_classname($gridle-pull-name-pattern, $media, $columnName)), comma );
-				$prefix-common-selector : append( $prefix-common-selector, unquote(_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)), comma );
-				$suffix-common-selector : append( $suffix-common-selector, unquote(_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)), comma );
+				@if $generate-push-classes {
+					$push-common-selector : append( $push-common-selector, unquote(_gridle_classname($gridle-push-name-pattern, $media, $columnName)), comma );
+				}
+				@if $generate-pull-classes {
+					$pull-common-selector : append( $pull-common-selector, unquote(_gridle_classname($gridle-pull-name-pattern, $media, $columnName)), comma );
+				}
+				@if $generate-prefix-classes {
+					$prefix-common-selector : append( $prefix-common-selector, unquote(_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)), comma );
+				}
+				@if $generate-suffix-classes {
+					$suffix-common-selector : append( $suffix-common-selector, unquote(_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)), comma );
+				}
 			}
 		}
 	}
@@ -434,25 +373,27 @@
 	@each $stateName, $state in $_gridle_states {
 		
 		// setup vars :
-		$media : $stateName;
-		$classes : map-get($state, "classes");
-		$min-width : map-get($state, "min-width");
-		$max-width : map-get($state, "max-width");
-		$query : map-get($state, "query");
-		$context : map-get($state, "context");
+		$classes : _gridle_get_var_value(classes, $state);
+		$context : _gridle_get_var_value(context, $state);
+		$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
+		$generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
+		$generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
+		$generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
+		$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
+		$generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
 
 		// parent common css :
-		$parentSelector : _gridle_classname($gridle-parent-name-pattern,$media,null);
+		$parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
 		#{$parentSelector} {
 			@extend %gridle-clearfix;
 			@extend %gridle-parent-common;
 		}
 
 		// generate all media queries grid classes :
-		@if $media and $classes == true {
+		@if $classes == true {
 
 			// generate all the classes :
-			@include gridle_state($media, null, $has-parent) {
+			@include gridle_state($stateName, $has-parent) {
 		 
 				// get specials columns :
 				$columnsMap : map-merge((), $_gridle_columns);
@@ -461,7 +402,7 @@
 				@for $j from 0 through $context {
 					
 					// name :
-					$columnName : "#{$j*$gridle-name-multiplicator}";
+					$columnName : "#{$j*$name-multiplicator}";
 
 					// // create a column :
 					$col : _gridle_create_column($columnName, $j,  $context);
@@ -475,47 +416,52 @@
 
 					// variables :
 					$columnsCount : map-get($column, columns);
-					$context : map-get($column, context);
+					$columnsContext : map-get($column, context);
+
+					// extend context in state (for columns) :
+					$extendedState : map-merge($state, (
+						context : $columnsContext
+					));
 
 					// classes :
-					#{_gridle_classname($gridle-grid-name-pattern, $media, $columnName)} {
-						@include _gridle($columnsCount, $media, $context);
+					#{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
+						@include _gridle($columnsCount, $extendedState);
 					}
-					@if $gridle-generate-push-classes == true {
-						#{_gridle_classname($gridle-push-name-pattern, $media, $columnName)} {
-							@include _gridle_push($columnsCount, $media, $context);
+					@if $generate-push-classes == true {
+						#{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
+							@include _gridle_push($columnsCount, $extendedState);
 						}
 					}
-					@if $gridle-generate-pull-classes == true {
-						#{_gridle_classname($gridle-pull-name-pattern, $media, $columnName)} {
-							@include _gridle_pull($columnsCount, $media, $context);
+					@if $generate-pull-classes == true {
+						#{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
+							@include _gridle_pull($columnsCount, $extendedState);
 						}
 					}
-					@if $gridle-generate-prefix-classes == true {
-						#{_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)} {
-							@include _gridle_prefix($columnsCount, $media, $context);
+					@if $generate-prefix-classes == true {
+						#{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
+							@include _gridle_prefix($columnsCount, $extendedState);
 						}
 					}
-					@if $gridle-generate-suffix-classes == true {
-						#{_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)} {
-							@include _gridle_suffix($columnsCount, $media, $context);
+					@if $generate-suffix-classes == true {
+						#{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
+							@include _gridle_suffix($columnsCount, $extendedState);
 						}   
 					}
 				}
  
 				// media queries helpers classes :
-				@if $gridle-generate-helpers-classes == true and $media {
-					@include _gridle_generate_helper_classes($media);
+				@if $generate-helpers-classes == true {
+					@include _gridle_generate_helper_classes($stateName);
 				}
 			}
 		}
 	}
 
 
-	// | ------------------------
-	// | JSON Settings
-	// | ------------------------
+	// // | ------------------------
+	// // | JSON Settings
+	// // | ------------------------
  
-	// generate json settings :
-	@include gridle_generate_json_settings();
+	// // generate json settings :
+	// @include gridle_generate_json_settings();
 }