gridle 1.1.0 → 1.2.0

data/stylesheets/gridle/_gridle.scss

@@ -29,147 +29,38 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 // @created 	25.03.13
-// @updated 	06.12.13
-// @author 		Olivier Bossel <olivier.bossel@gmail.com>
-// @version 	1.1.0
+// @updated 	08.05.14
+// @author 	Olivier Bossel <olivier.bossel@gmail.com>
+// @version 	1.2.0
 // |------------------------------------------------------
 // |------------------------------------------------------
 
+$_gridle-version : "1.2.0";
+
 
 
 
 // |------------------------------------------------------
 // |------------------------------------------------------
-// | Settings
+// | Variables
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-// gridle configuration vars :
-$gridle-columns-count 					: 12 !default;
-$gridle-gutter-width 					: 20px !default;
-$gridle-name-multiplicator 				: 1 !default;
-
-$gridle-direction 						: ltr !default;
-
-$gridle-debug 							: false !default;
-$gridle-debug-show-class-names 			: true !default;
-
-$gridle-ie7-support 					: true !default;
-
-$gridle-class-prefix 					: '' !default;
-
-$gridle-html-states-classes 			: false !default;
-
-$gridle-generate-helpers-classes 		: true !default;
-$gridle-generate-push-classes 			: true !default;
-$gridle-generate-pull-classes 			: true !default;
-$gridle-generate-prefix-classes 		: true !default;
-$gridle-generate-suffix-classes 		: true !default;
-
-$gridle-generate-useful-states-classes 	: () !default;// retina | landscape | portrait | print | tv
-
-$gridle-debug-selector : ".gridle-debug &, &.gridle-debug";
+$_gridle_states : ();						// the variable map for each states
+$_gridle_clear_classes :(); 					// store each automatic clear count
+$_gridle_columns : (); 						// store the registered special columns
+$_gridle_states_debug_devices : (); 				// save the debug states devices
 
 
 
 
 // |------------------------------------------------------
 // |------------------------------------------------------
-// | Variables
+// | Settings
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-
-
-$_gridle-state-01-min-width 		: null !default;
-$_gridle-state-01-max-width 		: null !default;
-$_gridle-state-01-name 				: null !default;
-$_gridle-state-01-query 			: null !default;
-$_gridle-state-01-classes 			: true !default;
-
-$_gridle-state-02-min-width 		: null !default;
-$_gridle-state-02-max-width 		: null !default;
-$_gridle-state-02-name 				: null !default;
-$_gridle-state-02-query 			: null !default;
-$_gridle-state-02-classes 			: true !default;
-
-$_gridle-state-03-min-width 		: null !default;
-$_gridle-state-03-max-width 		: null !default;
-$_gridle-state-03-name 				: null !default;
-$_gridle-state-03-query 			: null !default;
-$_gridle-state-03-classes 			: true !default;
-
-$_gridle-state-04-min-width 		: null !default;
-$_gridle-state-04-max-width 		: null !default;
-$_gridle-state-04-name 				: null !default;
-$_gridle-state-04-query 			: null !default;
-$_gridle-state-04-classes 			: true !default;
-
-$_gridle-state-05-min-width 		: null !default;
-$_gridle-state-05-max-width 		: null !default;
-$_gridle-state-05-name 				: null !default;
-$_gridle-state-05-query 			: null !default;
-$_gridle-state-05-classes 			: true !default;
-
-$_gridle-state-06-min-width 		: null !default;
-$_gridle-state-06-max-width 		: null !default;
-$_gridle-state-06-name 				: null !default;
-$_gridle-state-06-query 			: null !default;
-$_gridle-state-06-classes 			: true !default;
-
-$_gridle-state-07-min-width 		: null !default;
-$_gridle-state-07-max-width 		: null !default;
-$_gridle-state-07-name 				: null !default;
-$_gridle-state-07-query 			: null !default;
-$_gridle-state-07-classes 			: true !default;
-
-$_gridle-state-08-min-width 		: null !default;
-$_gridle-state-08-max-width 		: null !default;
-$_gridle-state-08-name 				: null !default;
-$_gridle-state-08-query 			: null !default;
-$_gridle-state-08-classes 			: true !default;
-
-$_gridle-state-09-min-width 		: null !default;
-$_gridle-state-09-max-width 		: null !default;
-$_gridle-state-09-name 				: null !default;
-$_gridle-state-09-query 			: null !default;
-$_gridle-state-09-classes 			: true !default;
-
-$_gridle-state-10-min-width 		: null !default;
-$_gridle-state-10-max-width 		: null !default;
-$_gridle-state-10-name 				: null !default;
-$_gridle-state-10-query 			: null !default;
-$_gridle-state-10-classes 			: true !default;
-
-$_gridle-state-11-min-width 		: null !default;
-$_gridle-state-11-max-width 		: null !default;
-$_gridle-state-11-name 				: null !default;
-$_gridle-state-11-query 			: null !default;
-$_gridle-state-11-classes 			: true !default;
-
-$_gridle-state-12-min-width 		: null !default;
-$_gridle-state-12-max-width 		: null !default;
-$_gridle-state-12-name 				: null !default;
-$_gridle-state-12-query 			: null !default;
-$_gridle-state-12-classes 			: true !default;
-
-$_gridle-state-13-min-width 		: null !default;
-$_gridle-state-13-max-width 		: null !default;
-$_gridle-state-13-name 				: null !default;
-$_gridle-state-13-query 			: null !default;
-$_gridle-state-13-classes 			: true !default;
-
-$_gridle-state-14-min-width 		: null !default;
-$_gridle-state-14-max-width 		: null !default;
-$_gridle-state-14-name 				: null !default;
-$_gridle-state-14-query 			: null !default;
-$_gridle-state-14-classes 			: true !default;
-
-$_gridle-state-15-min-width 		: null !default;
-$_gridle-state-15-max-width 		: null !default;
-$_gridle-state-15-name 				: null !default;
-$_gridle-state-15-query 			: null !default;
-$_gridle-state-15-classes 			: true !default;
+@import 'settings';
 
 
 
@@ -180,86 +71,7 @@ $_gridle-state-15-classes 			: true !default;
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-// Init gridle
-// Creating the silent classes with user configuration :
-%gridle-clearfix {
-	// For modern browser
-	&:before,
-	&:after {
-		content:"";
-		display:table;
-	}
-	&:after {
-		clear:both;
-	}
-	// For IE 6/7 (trigger hasLayout
-	& {
-	   zoom:1;
-	}
-}
-%gridle-push-pull-debug-background-common {
-	background-size:50px 90%;
-	background-position:0 50%;
-	background-repeat:repeat-x;
-}
-%gridle-push-pull-common {
-	position:relative;
-}
-%gridle-container-common {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-%gridle-parent-common {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-%gridle-container-debug-common {
-	background-color:#f5f5f5;
-
-	&:before,
-	&:after {
-		content:"";
-		display:block;
-		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkEzNzVFNTg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkEzNzVFNjg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGQTM3NUUzODU2ODExRTI5QjhGOEQzODhDMzhCNkU4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGQTM3NUU0ODU2ODExRTI5QjhGOEQzODhDMzhCNkU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++5+BhQAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==);
-		height:inherit;
-		text-align:center;
-		color:white;
-		font-size:11px;
-	}
-}
-%gridle-grid-debug-common {
-	&:before,
-	&:after {
-		content:"";
-		display:block;
-		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkEzNzVFNTg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkEzNzVFNjg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGQTM3NUUzODU2ODExRTI5QjhGOEQzODhDMzhCNkU4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGQTM3NUU0ODU2ODExRTI5QjhGOEQzODhDMzhCNkU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++5+BhQAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==);
-		margin:10px 0;
-		padding:5px 0;
-		text-align:center;
-		color:white;
-		font-size:11px;
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-		display:block !important;
-	}
-	background-color:#daeff5;
-}
-%gridle-grid-common {
-	display:inline-block;
-	min-height:1px;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-%gridle-prefix-debug-common {
-	background-color:#dae7e9 !important;
-}
-%gridle-suffix-debug-common {
-	background-color:#dae7e9 !important;
-}
+@import 'silent-classes';
 
 
 
@@ -270,95 +82,7 @@ $_gridle-state-15-classes 			: true !default;
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-
-// Common css that cannot be extended cause of variables :
-@mixin _gridle_container_common() {
-	@extend %gridle-clearfix;
-	@extend %gridle-container-common;
-	// debug part :
-	@if ($gridle-debug == true) {
-		#{$gridle-debug-selector} {
-			@extend %gridle-container-debug-common;
-			&:before {
-				@if $gridle-debug-show-class-names == true {
-					padding:10px $gridle-gutter-width/2;
-					content:"container-#{$gridle-columns-count}" !important;
-				}
-			}
-			&:after {
-				@if $gridle-debug-show-class-names == true {
-					padding:10px $gridle-gutter-width/2;
-					content:"end container-#{$gridle-columns-count}" !important;
-				}
-			}
-		}
-	}
-}
-@mixin _gridle_grid_common() {
-	@extend %gridle-grid-common;
-	@if $gridle-direction == rtl {
-		float:right;
-		direction:rtl;
-	} @else {
-		float:left;
-		direction:ltr;
-	}
-
-	// set padding :
-	padding:0 $gridle-gutter-width/2;
-	@if $gridle-debug == true {
-		#{$gridle-debug-selector} {
-			@extend %gridle-grid-debug-common;
-		}
-	}
-}
-@mixin _gridle_parent_common() {
-	@extend %gridle-clearfix;
-	@extend %gridle-parent-common;
-}
-@mixin _gridle_push_common() {
-	// extend common :
-	@extend %gridle-push-pull-common;
-	@if $gridle-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() {
-	@extend %gridle-push-pull-common;
-	@if $gridle-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 {
-		#{$gridle-debug-selector} {
-			@extend %gridle-prefix-debug-common;
-		}
-	}
-}
-@mixin _gridle_suffix_common() {
-	@if $gridle-debug == true {
-		#{$gridle-debug-selector} {
-			@extend %gridle-suffix-debug-common;
-		}
-	}
-}
+@import 'common-mixins';
 
 
 
@@ -369,220 +93,18 @@ $_gridle-state-15-classes 			: true !default;
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-
-// Get column width :
-@function gridle_get_columns_width(
-	$columns : 1,
-	$context : $gridle-columns-count
-) {
-	@return percentage(1 / $context * $columns);
-}
-@function gridle_get_column_width(
-	$columns : 1,
-	$context : $gridle-columns-count
-) { 
-	@return gridle_get_columns_width($columns, $context);
-}
-
-// prefix classname :
-@function _gridle_prefixed_class(
-	$name
-) {
-	@return ".#{$gridle-class-prefix}#{$name}";
-}
+@import 'functions';
 
 
-// Get media query by state :
-// @param 	String 	$state 	The state name
-// @return 	String 			The query
-@function _get_media_query_for_state(
-	$state-or-min-width : null,
-	$max-width : null
-) {
-	// get the index of state :
-	$idx : _gridle_get_media_query_index_by_name($state-or-min-width);
 
-	// if there's an idx, the state requested is a registered one :
-	@if $idx {
-		// get vars :
-		$name : _gridle_get_media_query_vars($idx,"name");
-		$min-width : _gridle_get_media_query_vars($idx,"min-width");
-		$max-width : _gridle_get_media_query_vars($idx,"max-width");
-		$classes : _gridle_get_media_query_vars($idx,"classes");
-		$query : _gridle_get_media_query_vars($idx,"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 null;
-				}
-			}
-		}
-	} @else if $state-or-min-width == 'print' or $state-or-min-width == print {
-		@return "only print";
-	} @else if $state-or-min-width == 'tv' or $state-or-min-width == tv {
-		@return "only tv";
-	} @else if $state-or-min-width == 'portrait' or $state-or-min-width == portrait {
-		@return "only screen and (orientation: portrait)";
-	} @else if $state-or-min-width == 'landscape' or $state-or-min-width == landscape {
-		@return "only screen and (orientation: landscape)";
-	} @else if $state-or-min-width == 'retina' or $state-or-min-width == 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;
-		}
-	}
-}
-
-
-// Get the media queries variables :
-// @param 	int 	$index 	 	The media query indes
-// @param 	String 	$var 		The media query variable name
-// @return 	String|int 			The variable value
-@function _gridle_get_media_query_vars(
-	$index 	: 1,
-	$var 	: "name"
-) {
-	@if $index == 1 {
-		@if $var == "name" { @return $_gridle-state-01-name; }
-		@else if $var == "min-width" { @return $_gridle-state-01-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-01-max-width; }
-		@else if $var == "query" { @return $_gridle-state-01-query; }
-		@else if $var == "classes" { @return $_gridle-state-01-classes; }
-	} @else if $index == 2 {
-		@if $var == "name" { @return $_gridle-state-02-name; }
-		@else if $var == "min-width" { @return $_gridle-state-02-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-02-max-width; }
-		@else if $var == "query" { @return $_gridle-state-02-query; }
-		@else if $var == "classes" { @return $_gridle-state-02-classes; }
-	} @else if $index == 3 {
-		@if $var == "name" { @return $_gridle-state-03-name; }
-		@else if $var == "min-width" { @return $_gridle-state-03-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-03-max-width; }
-		@else if $var == "query" { @return $_gridle-state-03-query; }
-		@else if $var == "classes" { @return $_gridle-state-03-classes; }
-	} @else if $index == 4 {
-		@if $var == "name" { @return $_gridle-state-04-name; }
-		@else if $var == "min-width" { @return $_gridle-state-04-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-04-max-width; }
-		@else if $var == "query" { @return $_gridle-state-04-query; }
-		@else if $var == "classes" { @return $_gridle-state-04-classes; }
-	} @else if $index == 5 {
-		@if $var == "name" { @return $_gridle-state-05-name; }
-		@else if $var == "min-width" { @return $_gridle-state-05-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-05-max-width; }
-		@else if $var == "query" { @return $_gridle-state-05-query; }
-		@else if $var == "classes" { @return $_gridle-state-05-classes; }
-	} @else if $index == 6 {
-		@if $var == "name" { @return $_gridle-state-06-name; }
-		@else if $var == "min-width" { @return $_gridle-state-06-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-06-max-width; }
-		@else if $var == "query" { @return $_gridle-state-06-query; }
-		@else if $var == "classes" { @return $_gridle-state-06-classes; }
-	} @else if $index == 7 {
-		@if $var == "name" { @return $_gridle-state-07-name; }
-		@else if $var == "min-width" { @return $_gridle-state-07-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-07-max-width; }
-		@else if $var == "query" { @return $_gridle-state-07-query; }
-		@else if $var == "classes" { @return $_gridle-state-07-classes; }
-	} @else if $index == 8 {
-		@if $var == "name" { @return $_gridle-state-08-name; }
-		@else if $var == "min-width" { @return $_gridle-state-08-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-08-max-width; }
-		@else if $var == "query" { @return $_gridle-state-08-query; }
-		@else if $var == "classes" { @return $_gridle-state-08-classes; }
-	} @else if $index == 9 {
-		@if $var == "name" { @return $_gridle-state-09-name; }
-		@else if $var == "min-width" { @return $_gridle-state-09-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-09-max-width; }
-		@else if $var == "query" { @return $_gridle-state-09-query; }
-		@else if $var == "classes" { @return $_gridle-state-09-classes; }
-	} @else if $index == 10 {
-		@if $var == "name" { @return $_gridle-state-10-name; }
-		@else if $var == "min-width" { @return $_gridle-state-10-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-10-max-width; }
-		@else if $var == "query" { @return $_gridle-state-10-query; }
-		@else if $var == "classes" { @return $_gridle-state-10-classes; }
-	} @else if $index == 11 {
-		@if $var == "name" { @return $_gridle-state-11-name; }
-		@else if $var == "min-width" { @return $_gridle-state-11-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-11-max-width; }
-		@else if $var == "query" { @return $_gridle-state-11-query; }
-		@else if $var == "classes" { @return $_gridle-state-11-classes; }
-	} @else if $index == 12 {
-		@if $var == "name" { @return $_gridle-state-12-name; }
-		@else if $var == "min-width" { @return $_gridle-state-12-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-12-max-width; }
-		@else if $var == "query" { @return $_gridle-state-12-query; }
-		@else if $var == "classes" { @return $_gridle-state-12-classes; }
-	} @else if $index == 13 {
-		@if $var == "name" { @return $_gridle-state-13-name; }
-		@else if $var == "min-width" { @return $_gridle-state-13-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-13-max-width; }
-		@else if $var == "query" { @return $_gridle-state-13-query; }
-		@else if $var == "classes" { @return $_gridle-state-13-classes; }
-	} @else if $index == 14 {
-		@if $var == "name" { @return $_gridle-state-14-name; }
-		@else if $var == "min-width" { @return $_gridle-state-14-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-14-max-width; }
-		@else if $var == "query" { @return $_gridle-state-14-query; }
-		@else if $var == "classes" { @return $_gridle-state-14-classes; }
-	} @else if $index == 15 {
-		@if $var == "name" { @return $_gridle-state-15-name; }
-		@else if $var == "min-width" { @return $_gridle-state-15-min-width; }
-		@else if $var == "max-width" { @return $_gridle-state-15-max-width; }
-		@else if $var == "query" { @return $_gridle-state-15-query; }
-		@else if $var == "classes" { @return $_gridle-state-15-classes; }
-	}
-}
 
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Settings mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
 
-// Get the index of an media query by name
-// @param 	String 	$name 	The nme of the media query
-// @return 	int 			The index of the media query
-@function _gridle_get_media_query_index_by_name(
-	$name
-) {
-	@if $name == null {
-		@return null;
-	}
-	@if $_gridle-state-01-name == $name { @return 1; }
-	@else if $_gridle-state-02-name == $name { @return 2; }
-	@else if $_gridle-state-03-name == $name { @return 3; }
-	@else if $_gridle-state-04-name == $name { @return 4; }
-	@else if $_gridle-state-05-name == $name { @return 5; }
-	@else if $_gridle-state-06-name == $name { @return 6; }
-	@else if $_gridle-state-07-name == $name { @return 7; }
-	@else if $_gridle-state-08-name == $name { @return 8; }
-	@else if $_gridle-state-09-name == $name { @return 9; }
-	@else if $_gridle-state-10-name == $name { @return 10; }
-	@else if $_gridle-state-11-name == $name { @return 11; }
-	@else if $_gridle-state-12-name == $name { @return 12; }
-	@else if $_gridle-state-13-name == $name { @return 13; }
-	@else if $_gridle-state-14-name == $name { @return 14; }
-	@else if $_gridle-state-15-name == $name { @return 15; }
-	@else { @return null; }
-}
+@import 'settings-mixins';
 
 
 
@@ -593,1162 +115,15 @@ $_gridle-state-15-classes 			: true !default;
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-
-// Register an state :
-@mixin gridle_register_state(
-	$name,
-	$min-width-or-query : null,
-	$max-width-or-classes-generation : null,
-	$classes-generation : true
-) {
-
-	// register new state :
-	@if $_gridle-state-01-name == null {
-		$_gridle-state-01-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-01-min-width : $min-width-or-query;
-			$_gridle-state-01-max-width : $max-width-or-classes-generation;
-			$_gridle-state-01-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-01-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-01-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-02-name == null {
-		$_gridle-state-02-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-02-min-width : $min-width-or-query;
-			$_gridle-state-02-max-width : $max-width-or-classes-generation;
-			$_gridle-state-02-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-02-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-02-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-03-name == null {
-		$_gridle-state-03-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-03-min-width : $min-width-or-query;
-			$_gridle-state-03-max-width : $max-width-or-classes-generation;
-			$_gridle-state-03-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-03-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-03-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-04-name == null {
-		$_gridle-state-04-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-04-min-width : $min-width-or-query;
-			$_gridle-state-04-max-width : $max-width-or-classes-generation;
-			$_gridle-state-04-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-04-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-04-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-05-name == null {
-		$_gridle-state-05-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-05-min-width : $min-width-or-query;
-			$_gridle-state-05-max-width : $max-width-or-classes-generation;
-			$_gridle-state-05-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-05-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-05-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-06-name == null {
-		$_gridle-state-06-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-06-min-width : $min-width-or-query;
-			$_gridle-state-06-max-width : $max-width-or-classes-generation;
-			$_gridle-state-06-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-06-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-06-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-07-name == null {
-		$_gridle-state-07-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-07-min-width : $min-width-or-query;
-			$_gridle-state-07-max-width : $max-width-or-classes-generation;
-			$_gridle-state-07-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-07-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-07-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-08-name == null {
-		$_gridle-state-08-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-08-min-width : $min-width-or-query;
-			$_gridle-state-08-max-width : $max-width-or-classes-generation;
-			$_gridle-state-08-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-08-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-08-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-09-name == null {
-		$_gridle-state-09-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-09-min-width : $min-width-or-query;
-			$_gridle-state-09-max-width : $max-width-or-classes-generation;
-			$_gridle-state-09-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-09-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-09-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-10-name == null {
-		$_gridle-state-10-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-10-min-width : $min-width-or-query;
-			$_gridle-state-10-max-width : $max-width-or-classes-generation;
-			$_gridle-state-10-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-10-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-10-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-11-name == null {
-		$_gridle-state-11-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-11-min-width : $min-width-or-query;
-			$_gridle-state-11-max-width : $max-width-or-classes-generation;
-			$_gridle-state-11-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-11-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-11-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-12-name == null {
-		$_gridle-state-12-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-12-min-width : $min-width-or-query;
-			$_gridle-state-12-max-width : $max-width-or-classes-generation;
-			$_gridle-state-12-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-12-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-12-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-13-name == null {
-		$_gridle-state-13-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-13-min-width : $min-width-or-query;
-			$_gridle-state-13-max-width : $max-width-or-classes-generation;
-			$_gridle-state-13-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-13-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-13-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-14-name == null {
-		$_gridle-state-14-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-14-min-width : $min-width-or-query;
-			$_gridle-state-14-max-width : $max-width-or-classes-generation;
-			$_gridle-state-14-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-14-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-14-classes : $max-width-or-classes-generation;
-			}
-		}
-	} @else if $_gridle-state-15-name == null {
-		$_gridle-state-15-name : $name;
-		@if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
-			$_gridle-state-15-min-width : $min-width-or-query;
-			$_gridle-state-15-max-width : $max-width-or-classes-generation;
-			$_gridle-state-15-classes : $classes-generation;
-		} @else if type-of($min-width-or-query) == string {
-			$_gridle-state-15-query : $min-width-or-query;
-			@if type-of($max-width-or-classes-generation) == bool {
-				$_gridle-state-15-classes : $max-width-or-classes-generation;
-			}
-		}
-	}
-}
-
-
-// Register default states :
-@mixin gridle_register_default_states() {
-	// register mobile and tablet states :
-	@include gridle_register_state("mobile",null,480px);
-	@include gridle_register_state("tablet",481px,1024px);
-}
-
-
-// Responsive helpers mixins :
-@mixin gridle_state(
-	$state-or-min-width,
-	$max-width : null,
-	$has-parent : true
-) {
-
-	// query list :
-	$query : ();
-
-	// loop on each states :
-	@each $_state-or-min-width in $state-or-min-width {
-
-		// check if is a state :
-		@if type-of($_state-or-min-width) == string and $gridle-html-states-classes {
-			// html class :
-			@if $has-parent {
-				html#{_gridle_prefixed_class("#{$_state-or-min-width}")} & { @content; }
-			} @else {
-				html#{_gridle_prefixed_class("#{$_state-or-min-width}")} { @content; }
-			}
-		}
-
-		// get the media query :
-		$q : _get_media_query_for_state($_state-or-min-width, $max-width);
-		@if $q {
-			$query : append($query, unquote("#{$q}"), comma);
-		}
-	}
-
-	// check and print media query :
-	@if length($query) {
-		@media #{$query} {
-			@content;
-		}
-	}
-}
-
+@import 'mixins';
 
 
-// Container mixin :
-@mixin gridle_container(
-) {
-	@include _gridle_container_common();
-}
 
 
-// Grid mixin :
-// Set the width of the specified grid column :
-@mixin gridle(
-	$columns : $gridle-columns-count,
-	$state-context : null,
-	$state : null
-) {
-	// common :
-	@include _gridle_grid_common();
-	// variables :
-	$context : $gridle-columns-count;
-	@if type-of($state-context) == number {
-		$state : $state;
-		$context : $state-context;
-	} @else {
-		$state : $state-context;
-	}
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle($columns, $state, $context);
-		}
-	} @else {
-		@include _gridle($columns,$state,$context);
-	}
-}
-@mixin _gridle(
-	$columns : $gridle-columns-count,
-	$state : null,
-	$context : $gridle-columns-count
-) {
-	// vars :
-	$width : percentage(1 / $context * $columns);
-	width:$width;
-	
-	// ie7 support :
-	@if $gridle-ie7-support == true {
-		*width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
-	}
-	
-	// debug :
-	@if $gridle-debug == true and $gridle-debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:before {
-				content:"grid-#{$state}-#{$columns * $gridle-name-multiplicator}";
-			}
-			&.parent:before {
-				content:"grid-parent-#{$state}-#{$columns * $gridle-name-multiplicator}";
-			}
-		}
-	}
-}
-
-
-// push :
-// Push the element of the count of column wanted
-@mixin gridle_push(
-	$columns : $gridle-columns-count,
-	$state-context : null,
-	$state : null
-) {
-	// common :
-	@include _gridle_push_common();
-	// variables :
-	$context : $gridle-columns-count;
-	@if type-of($state-context) == number {
-		$state : $state;
-		$context : $state-context;
-	} @else {
-		$state : $state-context;
-	}
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_push($columns,$state,$context);
-		}
-	} @else {
-		@include _gridle_push($columns,$state,$context);
-	}
-}
-@mixin _gridle_push(
-	$columns : $gridle-columns-count,
-	$state : null,
-	$context : $gridle-columns-count
-) {
-	// vars :
-	$width : percentage(1 / $context) * $columns;
-	@if $gridle-direction == rtl { $width : $width*-1; }
-	left:$width;
-
-	// debug css :
-	@if $gridle-debug == true and $gridle-debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				content:"push-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
-			}
-		}
-	}
-}
-
-
-// pull :
-// Pull the element of the count of column wanted
-@mixin gridle_pull(
-	$columns : $gridle-columns-count,
-	$state-context : null,
-	$state : null
-) {
-	// common :
-	@include _gridle_pull_common();
-	// variables :
-	$context : $gridle-columns-count;
-	@if type-of($state-context) == number {
-		$state : $state;
-		$context : $state-context;
-	} @else {
-		$state : $state-context;
-	}
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_pull($columns,$state,$context);
-		}
-	} @else {
-		@include _gridle_pull($columns,$state,$context);
-	}
-}
-@mixin _gridle_pull(
-	$columns : $gridle-columns-count,
-	$state : null,
-	$context : $gridle-columns-count
-) {
-	// vars :
-	$width : percentage(1 / $context) * $columns;
-	@if $gridle-direction == rtl { $width : $width*-1; }
-	right:$width;
-
-	// debug css :
-	@if $gridle-debug == true and $gridle-debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				content:"pull-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
-			}
-		}
-	}
-}
-
-
-// push :
-// Push the element of the count of column wanted
-@mixin gridle_prefix(
-	$columns : $gridle-columns-count,
-	$state-context : null,
-	$state : null
-) {
-	// common :
-	@include _gridle_prefix_common();
-	// variables :
-	$context : $gridle-columns-count;
-	@if type-of($state-context) == number {
-		$state : $state;
-		$context : $state-context;
-	} @else {
-		$state : $state-context;
-	}
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_prefix($columns,$state,$context);
-		}
-	} @else {
-		@include _gridle_prefix($columns,$state,$context);
-	}
-}
-@mixin _gridle_prefix(
-	$columns : $gridle-columns-count,
-	$state : null,
-	$context : $gridle-columns-count
-) {
-	// vars :
-	$width : percentage(1 / $context) * $columns;
-	@if $gridle-direction == rtl { margin-right:$width; }
-	@else { margin-left:$width; }
-
-	// debug css :
-	@if $gridle-debug == true and $gridle-debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				content:"prefix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
-			}
-		}
-	}
-}
-
-
-// pull :
-// Pull the element of the count of column wanted
-@mixin gridle_suffix(
-	$columns : $gridle-columns-count,
-	$state-context : null,
-	$state : null
-) {
-	// common :
-	@include _gridle_suffix_common();
-	// variables :
-	$context : $gridle-columns-count;
-	@if type-of($state-context) == number {
-		$state : $state;
-		$context : $state-context;
-	} @else {
-		$state : $state-context;
-	}
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_suffix($columns,$state,$context);
-		}
-	} @else {
-		@include _gridle_suffix($columns,$state,$context);
-	}
-}
-@mixin _gridle_suffix(
-	$columns : $gridle-columns-count,
-	$state : null,
-	$context : $gridle-columns-count
-) {
-	// vars :
-	$width : percentage(1 / $context) * $columns;
-	@if $gridle-direction == rtl { margin-left:$width; }
-	@else { margin-right:$width; }
-
-	// debug css :
-	@if $gridle-debug == true and $gridle-debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				content:"suffix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
-			}
-		}
-	}
-}
-
-
-// Grid centered :
-@mixin gridle_centered(
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_centered();
-		}
-	} @else {
-		@include _gridle_centered();
-	}
-}
-@mixin _gridle_centered() {
-	display:block !important;
-	float:none !important;
-	margin-left:auto !important;
-	margin-right:auto !important;
-	clear:both !important;
-}
-
-
-// Grid parent :
-@mixin gridle_parent(
-	$state : null
-) {
-	// common :
-	@include _gridle_parent_common();
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_parent();
-		}
-	} @else {
-		@include _gridle_parent();
-	}
-}
-@mixin _gridle_parent() {
-	@include gridle_no_gutter();
-}
-
-
-// Hide on :
-// @param 	String 	$media  On what state
-@mixin gridle_hide(
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_hide();
-		}
-	} @else {
-		@include _gridle_hide();
-	}
-}
-@mixin _gridle_hide() {
-	display:none;
-}
-
-
-// Not visible on :
-// @param 	String 	$media 	What to hide (one of the 3 state classes name)
-@mixin gridle_not_visible(
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_not_visible();
-		}
-	} @else {
-		@include _gridle_not_visible();
-	}
-}
-@mixin _gridle_not_visible() {
-	visibility:hidden;
-}
-
-
-// Show on
-// @param 	String 	$media 	What to hide (one of the 3 state classes name)
-@mixin gridle_show(
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_show();
-		}
-	} @else {
-		@include _gridle_show();
-	}
-}
-@mixin _gridle_show() {
-	display:block;
-}
-
-
-// Visible on :
-// @param 	String 	$media 	On what state
-@mixin gridle_visible(
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_visible();
-		}
-	} @else {
-		@include _gridle_visible();
-	}
-}
-@mixin _gridle_visible() {
-	visibility:visible;
-}
-
-
-// Gridle Right :
-@mixin gridle_float(
-	$float-direction : left,
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include gridle_float($float-direction);
-		}
-	} @else {
-		@include gridle_float($float-direction);
-	}
-}
-@mixin gridle_float(
-	$float-direction : left
-) {
-	float:#{$float-direction};
-}
-
-
-// Gridle clear :
-// @param 	String 	$clear-direction 	The direction to clear
-// @param 	String 	$state 				The state
-@mixin gridle_clear(
-	$clear-direction : both,
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_clear($clear-direction);
-		}
-	} @else {
-		@include _gridle_clear($clear-direction);
-	}
-}
-@mixin _gridle_clear(
-	$clear-direction : both
-) {
-	clear:#{$clear-direction};
-}
-
-
-// Gridle no gutter :
-// @param 	String 	$side 				The side to clear
-// @param 	String 	$state 				The state
-@mixin gridle_no_gutter(
-	$side : left right,
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_no_gutter($side);
-		}
-	} @else {
-		@include _gridle_no_gutter($side);
-	}
-}
-@mixin gridle_no_margin(
-	$side : left right,
-	$state : null
-) {
-	@include gridle_no_gutter($side, $state);
-}
-@mixin _gridle_no_gutter(
-	$side : left right
-) {
-	@each $s in $side {
-		padding-#{$s} : 0 !important;
-	}
-}
-
-
-// Gridle gutter :
-// @param 	String 	$side 				The side to clear
-// @param 	String 	$state 				The state
-@mixin gridle_gutter(
-	$side : left right,
-	$state : null
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_gutter($side);
-		}
-	} @else {
-		@include _gridle_gutter($side);
-	}
-}
-// shortcut :
-@mixin gridle_margin(
-	$side : left right,
-	$state : null
-) {
-	@include gridle_gutter($side, $state);
-}
-@mixin _gridle_gutter(
-	$side : left right
-) {
-	@each $s in $side {
-		padding-#{$s} : $gridle-gutter-width / 2;
-	}
-}
-
-
-// Generate all helpers classes
-// All the classes generated are not wrapper in gridle_state
-// in this mixin... Just the names are generated accordingly to the
-// requested state
-@mixin _gridle_generate_helper_classes (
-	$state : null
-) {
-	// variables :
-	$media : '';
-	@if $state { $media : -#{$state}; }
-	@else { $media : ''; }
-
-	// helpers :
-	#{_gridle_prefixed_class("hide#{$media}")} {
-		@include gridle_hide(null);
-	}
-	#{_gridle_prefixed_class("not-visible#{$media}")} {
-		@include gridle_not_visible(null);
-	}
-	#{_gridle_prefixed_class("show#{$media}")} {
-		@include gridle_show(null);
-	}
-	#{_gridle_prefixed_class("visible#{$media}")} {
-		@include gridle_visible(null);
-	}
-	#{_gridle_prefixed_class("float#{$media}-left")} {
-		@include gridle_float(left);
-	}
-	#{_gridle_prefixed_class("float#{$media}-right")} {
-		@include gridle_float(right);
-	}
-	#{_gridle_prefixed_class("clear#{$media}")} {
-		@include gridle_clear(both);
-	}
-	#{_gridle_prefixed_class("clear#{$media}-left")} {
-		@include gridle_clear(left);
-	}
-	#{_gridle_prefixed_class("clear#{$media}-right")} {
-		@include gridle_clear(right);
-	}
-	#{_gridle_prefixed_class("no-gutter#{$media}")},
-	#{_gridle_prefixed_class("no-margin#{$media}")} {
-		@include gridle_no_margin();
-	}
-	#{_gridle_prefixed_class("no-gutter#{$media}-left")},
-	#{_gridle_prefixed_class("no-margin#{$media}-left")} {
-		@include gridle_no_margin(left);
-	}
-	#{_gridle_prefixed_class("no-gutter#{$media}-right")},
-	#{_gridle_prefixed_class("no-margin#{$media}-right")} {
-		@include gridle_no_margin(right);
-	}
-	#{_gridle_prefixed_class("no-gutter#{$media}-top")},
-	#{_gridle_prefixed_class("no-margin#{$media}-top")} {
-		@include gridle_no_margin(top);
-	}
-	#{_gridle_prefixed_class("no-gutter#{$media}-bottom")},
-	#{_gridle_prefixed_class("no-margin#{$media}-bottom")} {
-		@include gridle_no_margin(bottom);
-	}
-	#{_gridle_prefixed_class("gutter#{$media}")},
-	#{_gridle_prefixed_class("margin#{$media}")} {
-		@include gridle_margin();
-	}
-	#{_gridle_prefixed_class("gutter#{$media}-left")},
-	#{_gridle_prefixed_class("margin#{$media}-left")} {
-		@include gridle_margin(left);
-	}
-	#{_gridle_prefixed_class("gutter#{$media}-right")},
-	#{_gridle_prefixed_class("margin#{$media}-right")} {
-		@include gridle_margin(right);
-	}
-	#{_gridle_prefixed_class("gutter#{$media}-top")},
-	#{_gridle_prefixed_class("margin#{$media}-top")} {
-		@include gridle_margin(top);
-	}
-	#{_gridle_prefixed_class("gutter#{$media}-bottom")},
-	#{_gridle_prefixed_class("margin#{$media}-bottom")} {
-		@include gridle_margin(bottom);
-	}
-	#{_gridle_prefixed_class("auto-height#{$media}")} {
-		height:inherit;
-	}
-	#{_gridle_prefixed_class("centered#{$media}")} {
-		@include gridle_centered(null);
-	}
-	#{_gridle_prefixed_class("parent#{$media}")} {
-		@include _gridle_parent(); // gridle_parent contain extend so can not be here in a media query
-	}
-
-	// debug colors :
-	@if $gridle-debug {
-		// debug color classes :
-		#{_gridle_prefixed_class("debug-color#{$media}-1")} {
-			#{$gridle-debug-selector} {
-				background-color : #edeeb2;
-			}
-		}
-		#{_gridle_prefixed_class("debug-color#{$media}-2")} {
-			#{$gridle-debug-selector} {
-				background-color : #fae4a7;
-			}
-		}
-		#{_gridle_prefixed_class("debug-color#{$media}-3")} {
-			#{$gridle-debug-selector} {
-				background-color : #f5eacc;
-			}
-		}
-		#{_gridle_prefixed_class("debug-color#{$media}-4")} {
-			#{$gridle-debug-selector} {
-				background-color : #eebdb2;
-			}
-		}
-		#{_gridle_prefixed_class("debug-color#{$media}-5")} {
-			#{$gridle-debug-selector} {
-				background-color : #d4b2ee;
-			}
-		}
-		#{_gridle_prefixed_class("debug-color#{$media}-6")} {
-			#{$gridle-debug-selector} {
-				background-color : #b2d8ee;
-			}
-		}
-	}
-}
-
-
-// generate settings json :
-@mixin gridle_generate_json_settings(
-	$scope : default
-) {
-
-	// settings content :
-	$gridle-settings-states : "{";
-
-	// generate all classes for differents media queries :
-	@for $i from 1 through 15 {
-		// setup vars :
-		$media : _gridle_get_media_query_vars($i,"name");
-		$classes : _gridle_get_media_query_vars($i,"classes");
- 
-		// generate all media queries grid classes :
-		@if $media and $classes == true {
- 
-			// manage body query :
-			$body-query : _get_media_query_for_state($media);
-			@if $body-query {
-				@if $i == 1 {
-					$gridle-settings-states : "#{$gridle-settings-states}\"#{$media}\":\"#{$body-query}\"";
-				} @else {
-					$gridle-settings-states : "#{$gridle-settings-states},\"#{$media}\":\"#{$body-query}\"";
-				}
-			}
-
-		}
-	}
-
-	// usefull states :
-	@if $gridle-generate-useful-states-classes != null {
-		@each $state in $gridle-generate-useful-states-classes { 
- 
-			// manage body query :
-			$body-query : _get_media_query_for_state($state);
-			@if $body-query {
-				$gridle-settings-states : "#{$gridle-settings-states},\"#{$state}\":\"#{$body-query}\"";
-			}
-		}
-	}
-
-	 // generate settings json :
-	$gridle-settings-states : "#{$gridle-settings-states}}";
-	$gridle-settings : "{";
-	$gridle-settings : "#{$gridle-settings} \"states\" : #{$gridle-settings-states}";
-	$gridle-settings : "#{$gridle-settings}, \"columnsCount\" : #{$gridle-columns-count}";
-	$gridle-settings : "#{$gridle-settings}, \"gutterWidth\" : \"#{$gridle-gutter-width}\"";
-	$gridle-settings : "#{$gridle-settings}, \"nameMultiplicator\" : #{$gridle-name-multiplicator}";
-	$gridle-settings : "#{$gridle-settings}, \"direction\" : \"#{$gridle-direction}\"";
-	$gridle-settings : "#{$gridle-settings}, \"ie7Support\" : #{$gridle-ie7-support}";
-	$gridle-settings : "#{$gridle-settings}, \"debug\" : #{$gridle-debug}";
-	$gridle-settings : "#{$gridle-settings}, \"debugShowClassNames\" : #{$gridle-debug-show-class-names}";
-	$gridle-settings : "#{$gridle-settings}, \"htmlStatesClasses\" : #{$gridle-html-states-classes}";
-	$gridle-settings : "#{$gridle-settings}, \"generateHelpersClasses\" : #{$gridle-generate-helpers-classes}";
-	$gridle-settings : "#{$gridle-settings}, \"generatePushClasses\" : #{$gridle-generate-push-classes}";
-	$gridle-settings : "#{$gridle-settings}, \"generatePullClasses\" : #{$gridle-generate-pull-classes}";
-	$gridle-settings : "#{$gridle-settings}, \"generatePrefixClasses\" : #{$gridle-generate-prefix-classes}";
-	$gridle-settings : "#{$gridle-settings}, \"generateSuffixClasses\" : #{$gridle-generate-suffix-classes}";
-	$gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
-	$useful-states-classes : "[";
-	@for $i from 1 through length($gridle-generate-useful-states-classes) {
-		@if $i > 1 {
-			$useful-states-classes : "#{$useful-states-classes},";
-		}
-		$useful-states-classes : "#{$useful-states-classes}\"#{nth($gridle-generate-useful-states-classes,$i)}\"";
-	}
-	$useful-states-classes : "#{$useful-states-classes}]";
-	$gridle-settings : "#{$gridle-settings}, \"generateUsefulStatesClasses\" : #{$useful-states-classes}";
-	$gridle-settings : "#{$gridle-settings}}";
-	#gridle-settings-#{$scope} {
-		content : $gridle-settings;
-	}
-}
-
-
-// gridle mixin :
-// Generate all the classes needed for a grid
-@mixin gridle_generate_classes(
-	$scope : null
-) {
-	// check if a scope exist :
-	@if $scope {
-		// wrapp grid into scope :
-		.#{$scope} {
-			@include _gridle_generate_classes(true);
-		}
-	} @else {
-		// generate classes :
-		@include _gridle_generate_classes(false);
-	}
-}
-@mixin _gridle_generate_classes(
-	$has-parent
-) {
- 
-	// Windows 8 fix for snap mode :
-	@media screen and (max-width: 400px) {
-		@-ms-viewport { width: device-width; }
-	}
- 
-	// generate container class :
-	$container-selector : ();
-	$container-selector : $container-selector, unquote("#{_gridle_prefixed_class("container")}, #{_gridle_prefixed_class("container-#{$gridle-columns-count}")}");
-	#{$container-selector} {
-		@include gridle_container();
-	}
-
-	// parent common css :
-	$parentSelector : "#{"#{$gridle-class-prefix}parent"}";
-	$gridSelector : "#{"#{$gridle-class-prefix}grid-"}";
-	[class*="#{$gridSelector}"][class*="#{$parentSelector}"] {
-		@extend %gridle-clearfix;
-		@extend %gridle-parent-common;
-	}
- 
-	// generate all grid-x classes :
-	@for $i from 0 through $gridle-columns-count {
- 
-		// variables :
-		$calculatedSelector : "#{$i*$gridle-name-multiplicator}";
-
-		// classes :
-		#{_gridle_prefixed_class("grid-#{$calculatedSelector}")} {
-			@include _gridle($i);
-		}
-		@if $gridle-generate-push-classes == true {
-			#{_gridle_prefixed_class("push-#{$calculatedSelector}")} {
-				@include _gridle_push($i);
-			}
-		}
-		@if $gridle-generate-pull-classes == true {
-			#{_gridle_prefixed_class("pull-#{$calculatedSelector}")} {
-				@include _gridle_pull($i);
-			}
-		}
-		@if $gridle-generate-prefix-classes == true {
-			#{_gridle_prefixed_class("prefix-#{$calculatedSelector}")} {
-				@include _gridle_prefix($i);
-			}
-		}
-		@if $gridle-generate-suffix-classes == true {
-			#{_gridle_prefixed_class("suffix-#{$calculatedSelector}")} {
-				@include _gridle_suffix($i);
-			}
-		}
-	}
- 
-	// helpers classes :
-	@if $gridle-generate-helpers-classes == true {
-		@include _gridle_generate_helper_classes();
-	}
- 
-	// generate all selector for extends :
-	$push-common-selector : ();
-	$pull-common-selector : ();
-	$prefix-common-selector : ();
-	$suffix-common-selector : ();
-	$common-selector : ();
-	@for $i from 0 through $gridle-columns-count {
-
-		// variables :
-		$calculatedSelector : "#{$i*$gridle-name-multiplicator}";
-
-		// selectors :
-		$push-common-selector : append( $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$calculatedSelector}")}"), comma );
-		$pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$calculatedSelector}")}"), comma );
-		$prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$calculatedSelector}")}"), comma );
-		$suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$calculatedSelector}")}"), comma );
-		$common-selector : append( $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$calculatedSelector}")}"), comma );
- 
-		// generate all classes for media queries :
-		@for $j from 1 through 15 {
-			// setup vars :
-			$media : _gridle_get_media_query_vars($j,"name");
-			$classes : _gridle_get_media_query_vars($j,"classes");
- 
-			// generate classes :   
-			@if $media and $classes == true {
-				 
-				$push-common-selector : append( $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$media}-#{$calculatedSelector}")}"), comma );
-				$pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$media}-#{$calculatedSelector}")}"), comma );
-				$prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$media}-#{$calculatedSelector}")}"), comma );
-				$suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$media}-#{$calculatedSelector}")}"), comma );
-				$common-selector : append( $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$media}-#{$calculatedSelector}")}"), comma );
-			}
-		}
- 
-		// generate all classes for usefull states :
-		@if $gridle-generate-useful-states-classes != null {
-			@each $state in $gridle-generate-useful-states-classes {
-				$push-common-selector : append( $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$state}-#{$calculatedSelector}")}"), comma );
-				$pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$state}-#{$calculatedSelector}")}"), comma );
-				$prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$state}-#{$calculatedSelector}")}"), comma );
-				$suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$state}-#{$calculatedSelector}")}"), comma );
-				$common-selector : append( $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$state}-#{$calculatedSelector}")}"), comma );
-			}
-		}
-	}
- 
-	// common css :
-	#{$push-common-selector} {
-		@include _gridle_push_common();
-	}
-	#{$pull-common-selector} {
-		@include _gridle_pull_common();
-	}
-	#{$prefix-common-selector} {
-		@include _gridle_prefix_common();
-	}
-	#{$suffix-common-selector} {
-		@include _gridle_suffix_common();
-	}
-	#{$common-selector} {
-		@include _gridle_grid_common();
-	}
- 
-	// generate all classes for differents media queries :
-	@for $i from 1 through 15 {
-		// setup vars :
-		$media : _gridle_get_media_query_vars($i,"name");
-		$classes : _gridle_get_media_query_vars($i,"classes");
- 
-		// generate all media queries grid classes :
-		@if $media and $classes == true {
- 
-			// generate all the classes :
-			@include gridle_state($media, null, $has-parent) {
-		 
-				@for $j from 0 through $gridle-columns-count {
-		 
-					// variables :
-					$calculatedSelector : "#{$j*$gridle-name-multiplicator}";
-
-					// classes :
-					#{_gridle_prefixed_class("grid-#{$media}-#{$calculatedSelector}")} {
-						@include _gridle($j,$media);
-					}
-					@if $gridle-generate-push-classes == true {
-						#{_gridle_prefixed_class("push-#{$media}-#{$calculatedSelector}")} {
-							@include _gridle_push($j,$media);
-						}
-					}
-					@if $gridle-generate-pull-classes == true {
-						#{_gridle_prefixed_class("pull-#{$media}-#{$calculatedSelector}")} {
-							@include _gridle_pull($j,$media);
-						}
-					}
-					@if $gridle-generate-prefix-classes == true {
-						#{_gridle_prefixed_class("prefix-#{$media}-#{$calculatedSelector}")} {
-							@include _gridle_prefix($j,$media);
-						}
-					}
-					@if $gridle-generate-suffix-classes == true {
-						#{_gridle_prefixed_class("suffix-#{$media}-#{$calculatedSelector}")} {
-							@include _gridle_suffix($j,$media);
-						}   
-					}
-				}
- 
-				// media queries helpers classes :
-				@if $gridle-generate-helpers-classes == true and $media {
-					@include _gridle_generate_helper_classes($media);
-				}
-			}
-		}
-	}
- 
-	// usefull states :
-	@if $gridle-generate-useful-states-classes != null {
-		@each $state in $gridle-generate-useful-states-classes { 
- 
-			// creating classes :
-			@include gridle_state($state, null, $has-parent) {
- 
-				@for $k from 0 through $gridle-columns-count {
-			 
-					// variables :
-					$calculatedSelector : "#{$k*$gridle-name-multiplicator}";
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Generate mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
 
-					// classes :
-					#{_gridle_prefixed_class("grid-#{$state}-#{$calculatedSelector}")} {
-						@include _gridle($k,$state);
-					}
-					@if $gridle-generate-push-classes == true {
-						#{_gridle_prefixed_class("push-#{$state}-#{$calculatedSelector}")} {
-							@include _gridle_push($k,$state);
-						}
-					}
-					@if $gridle-generate-pull-classes == true {
-						#{_gridle_prefixed_class("pull-#{$state}-#{$calculatedSelector}")} {
-							@include _gridle_pull($k,$state);
-						}
-					}
-					@if $gridle-generate-prefix-classes == true {
-						#{_gridle_prefixed_class("prefix-#{$state}-#{$calculatedSelector}")} {
-							@include _gridle_prefix($k,$state);
-						}
-					}
-					@if $gridle-generate-suffix-classes == true {
-						#{_gridle_prefixed_class("suffix-#{$state}-#{$calculatedSelector}")} {
-							@include _gridle_suffix($k,$state);
-						}   
-					}
-				}
-				 
-				@if $gridle-generate-helpers-classes == true {
-					@include _gridle_generate_helper_classes($state);   
-				}
-			}
-		}
-	}
- 
-	// generate json settings :
-	@include gridle_generate_json_settings();
-}
+@import 'generate-mixins';