gridle 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c05d9d130c3fe8a79d01a2b17e51179159a6ad38
-  data.tar.gz: 8652a2019bc1adc2cda0baa65ba1567309d9c554
+  metadata.gz: 71e08f9885a041db51b60a914ac2411666b3b0e3
+  data.tar.gz: eb4b7f044f51df465da61dd05d71119da427db38
 SHA512:
-  metadata.gz: dbb43793bba559b0f9e181cf85b8e05394877ea7c1ca2708b30b7ffe6a4388759b3ce8418150a339f303ddab4cbf5281ece2b7d6d777b08e2c28496bf949388e
-  data.tar.gz: 50b879901f506e029bec32692e8351a9fe54dfc8ddb0895c528bbfff4ce096e28b09d876c2cba129b0ed08ab4d8dc238e178c5aa7a12c035012bcbb71c097172
+  metadata.gz: c9dfc7c0a874e48eb2d60ed6ab4c87598c7b520a9b3f08e0d3b872ee708aa80b59bbf222f0e9ef8ee4008b5dbdb3352412c1230ea3139c8ad1415167001f4298
+  data.tar.gz: 6e3d69c5886e0ff4b663a3db1bece9356bfbf342479c9d1f76da24c9ed25826084dc8cf4bd9ed83f2a876e0c3ccf3d85c5006925938a5d51b84fca0886696773

data/lib/gridle.rb

@@ -2,13 +2,12 @@
 # These are the requires you would normally put in your config.rb file
 # By default, you should always included Compass. Do not include your
 #  extension.
-require 'compass'
 
 # This tells Compass what your Compass extension is called, and where to find
 #  its files
 # Replace 'extension' with the name of your extension. Spaces allowed.
-extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('gridle', :path => extension_path)
+# extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+# Compass::Frameworks.register('gridle', :path => extension_path)
 
 # Version and date of version for your Compass extension.
 # Replace Extension with the name of your extension
@@ -17,8 +16,8 @@ Compass::Frameworks.register('gridle', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Extension
-  VERSION = "1.1.0"
-  DATE = "2013-12-06"
+  VERSION = "1.2.0"
+  DATE = "2014-05-13"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/gridle/_common-mixins.scss

@@ -0,0 +1,84 @@
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Common mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@mixin _gridle_container_common() {
+	@extend %gridle-simple-clearfix;
+	@extend %gridle-container-common;
+	// debug part :
+	@if ($gridle-debug == true) {
+		#{$gridle-debug-selector} {
+			@extend %gridle-container-debug-common;
+		}
+	}
+}
+@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;
+	}
+
+	@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;
+		}
+	}
+}

data/stylesheets/gridle/_functions.scss

@@ -0,0 +1,291 @@
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Functions
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+/**
+ * Map set
+ *
+ * @param 	Map 	$map 		The map to use
+ * @param 	String 	$key 		The key to update
+ * @param 	Mixed 	$value 		The new value
+ * @return 	Map 			The new map
+ */
+@function map-set($map, $key, $value) {
+	$new: ($key: $value);
+	@return map-merge($map, $new);
+}
+
+
+/**
+ * Get the column width in percent for the global or a specific context
+ *
+ * @param 	int 		$columns 					The number of columns to calculate
+ * @param 	int 		$context : $gridle-columns-count 	 	The context to use
+ * @return 	percentage 							The width in percent
+ */
+@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);
+}
+
+
+/**
+ *  Get a state map
+ */
+@function _gridle_get_state(
+	$name
+) {
+	// 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))
+	{
+		@return map-get($_gridle_states, unquote($name));
+	} 
+
+	@return false;
+}
+
+
+/**
+ * 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_state_var(
+	$stateName,
+	$var 	: "name"
+) {
+
+	// get the state :
+	$state : _gridle_get_state($stateName);
+
+	// check ig state and if has the variable :
+	@if $state
+	      and map-has-key($state,unquote($var))
+	{
+		@return map-get($state,unquote($var));
+	}
+
+	// nothing getted :
+	@return null;
+}
+
+
+/**
+ * Set a variable in a state
+ * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
+ * @param  	String $var                    		Variable name to assign
+ * @param  	Mixed $newValue          		The new value to assign
+ * @return 	List                         			The states list (full)
+ */
+@function _gridle_set_state_var(
+	$stateName,
+	$var,
+	$newValue
+) {
+	// get the state :
+	$state : _gridle_get_state($stateName);
+
+	// check ig state and if has the variable :
+	@if $state
+	      and map-has-key($state,unquote($var))
+	{
+		// set new value in state :
+		$state : map-set($state, unquote($var), $newValue);
+
+		// set states :
+		$_gridle_states : map-set($_gridle_states, unquote($stateName), $state);
+
+		// return new state :
+		@return $state;
+	}
+
+	// nothing getted :
+	@return null;
+}
+
+
+/**
+ * Generate a column
+ *
+ * @param 	String 		$name 			The column name (often count)
+ * @param 	int 		$columns 		The column count that the column will take
+ * @param 	int 		$context 		The context on witch the with will be calculed
+ * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
+ */
+@function _gridle_create_column(
+	$name,
+	$columns,
+	$context,
+	$generateClasses : true
+) {
+	@return (
+		name : $name,
+		columns : $columns,
+		context : $context,
+		generateClasses : $generateClasses
+	);
+}
+
+
+/**
+ * Generate classname
+ *
+ * @param 	List 		$parrern 	The pattern to use to generate classname
+ * @param 	String 		$state 		The state
+ * @param 	int 		$count 		The column count
+ */
+@function _gridle_classname(
+	$pattern,
+	$state : null,
+	$count : null
+) {
+
+	// init selector :
+	$sel : ".";
+
+	// add class prefix :
+	@if $gridle-class-prefix and $gridle-class-prefix != '' {
+		$sel : "#{$sel}#{$gridle-class-prefix}";
+		@if $gridle-class-separator {
+			$sel : "#{$sel}#{$gridle-class-separator}";
+		}
+	}
+
+	// construct class name :
+	$i : 1;
+	@each $var in $pattern {
+		
+		// replace tokens :
+		@if $var == '%state' and $state {
+			$sel : "#{$sel}#{$state}";
+		} 
+		@if $var == '%count' and $count {
+			$sel : "#{$sel}#{$count}";
+		}  
+		@if $var != '%state' and $var != '%count' and $var != '%-' and $var != '%prefix' {
+			$sel : "#{$sel}#{$var}";
+		}
+
+		// handle separators :
+		@if $var == '%-' and $i < length($pattern) {
+			$index : $i + 1;
+			$value : nth($pattern, $index);
+			@if $value != '%state' and $value != '%count' and $value != '%-' and $value != '%prefix' {
+				$sel : "#{$sel}#{$gridle-class-separator}";
+			}
+			@if $value == '%state' and $state {
+				$sel : "#{$sel}#{$gridle-class-separator}";
+			}
+			@if $value == '%count' and $count {
+				$sel : "#{$sel}#{$gridle-class-separator}";
+			}
+		}
+
+		// update i :
+		$i : $i + 1;
+	}
+
+	// return generated class :
+	@return $sel;
+}
+
+
+/**
+ * Get the media query for a particular state, or with, etc...
+ *
+ * @param 	Mixed 		$state-or-min-width 		The state name of the min with
+ * @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
+) {
+
+	// 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 $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";
+		}
+	} @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 states count
+ * 
+ * @return 	int 	The number of states defined
+ */
+@function _gridle_get_states_count() {
+	@return length($_gridle_states) / length($_gridle_states_vars_pattern);
+}

data/stylesheets/gridle/_generate-mixins.scss

@@ -0,0 +1,515 @@
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Generate mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+// 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
+) {
+	// helpers :
+	#{_gridle_classname($gridle-hide-name-pattern, $state)} {
+		@include gridle_hide(null);
+	}
+	#{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
+		@include gridle_not_visible(null);
+	}
+	#{_gridle_classname($gridle-show-name-pattern, $state)} {
+		@include gridle_show(null);
+	}
+	#{_gridle_classname($gridle-visible-name-pattern, $state)} {
+		@include gridle_visible(null);
+	}
+	#{_gridle_classname($gridle-float-left-name-pattern, $state)} {
+		@include gridle_float(left);
+	}
+	#{_gridle_classname($gridle-float-right-name-pattern, $state)} {
+		@include gridle_float(right);
+	}
+	#{_gridle_classname($gridle-clear-name-pattern, $state)} {
+		@include gridle_clear(both);
+	}
+	#{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
+		@include gridle_clear(left);
+	}
+	#{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
+		@include gridle_clear(right);
+	}
+	#{_gridle_classname($gridle-no-gutters-name-pattern, $state)},
+	#{_gridle_classname($gridle-no-margins-name-pattern, $state)} {
+		@include gridle_no_margin();
+	}
+	#{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
+	#{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
+		@include gridle_no_margin(left);
+	}
+	#{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
+	#{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
+		@include gridle_no_margin(right);
+	}
+	#{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
+	#{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
+		@include gridle_no_margin(top);
+	}
+	#{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
+	#{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
+		@include gridle_no_margin(bottom);
+	}
+	#{_gridle_classname($gridle-gutters-name-pattern, $state)},
+	#{_gridle_classname($gridle-margins-name-pattern, $state)} {
+		@include gridle_margin(left right);
+	}
+	#{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
+	#{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
+		@include gridle_margin(left);
+	}
+	#{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
+	#{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
+		@include gridle_margin(right);
+	}
+	#{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
+	#{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
+		@include gridle_margin(top);
+	}
+	#{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
+	#{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
+		@include gridle_margin(bottom);
+	}
+	#{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
+		height:inherit;
+	}
+	#{_gridle_classname($gridle-centered-name-pattern, $state)} {
+		@include gridle_centered(null);
+	}
+	#{_gridle_classname($gridle-parent-name-pattern, $state)} {
+		@include _gridle_parent();
+	}
+	#{_gridle_classname($gridle-parent-vertical-align-name-pattern, $state)} {
+		@include _gridle_parent_vertical_align();
+	}
+
+	/**
+	 * Clear each class :
+	 */
+	@each $clearName, $clearMap in $_gridle_clear_classes {
+		// get count :
+		$clearCount : map-get($clearMap, clearEach);
+		// what to clear :
+		$clearWhat : map-get($clearMap, clearWhat);
+		// generate the class :
+		#{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
+			@include _gridle_clear_each($clearCount, $clearWhat, $state);
+		}
+	}
+
+	// debug colors :
+	@if $gridle-debug {
+		// debug color classes :
+		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
+			#{$gridle-debug-selector} {
+				background-color : #edeeb2;
+			}
+		}
+		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 2)} {
+			#{$gridle-debug-selector} {
+				background-color : #fae4a7;
+			}
+		}
+		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 3)} {
+			#{$gridle-debug-selector} {
+				background-color : #f5eacc;
+			}
+		}
+		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 4)} {
+			#{$gridle-debug-selector} {
+				background-color : #eebdb2;
+			}
+		}
+		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 5)} {
+			#{$gridle-debug-selector} {
+				background-color : #d4b2ee;
+			}
+		}
+		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 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 :
+	@each $stateName, $state in $_gridle_states {
+	
+		$name : $stateName;
+
+		$gridle-settings-states : "#{$gridle-settings-states} \"#{$name}\":{";
+	
+		@each $varName, $var in $state {
+
+			$value : null;
+			@if $varName == "query" {
+				$value : _get_media_query_for_state($stateName);
+			} @else {
+				$value : map-get($state,$varName);
+				// $value : _gridle_get_state_var($i,$var);
+			}
+
+			@if $value == null {
+				$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : null,";
+			} @elseif $var == 'context' or $var == 'classes' {
+				$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : #{$value},";
+			} @else {
+				$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : \"#{$value}\",";		
+			}
+		}
+
+		$gridle-settings-states : "#{$gridle-settings-states} },";
+
+	}
+
+	 // generate settings json :
+	$gridle-settings-states : "#{$gridle-settings-states}}";
+	$gridle-settings : "{";
+	$gridle-settings : "#{$gridle-settings} \"version\" : \"#{$_gridle-version}\"";
+	
+	// states :
+	$gridle-settings : "#{$gridle-settings}, \"states\" : #{$gridle-settings-states}";
+	
+	// debug devices :
+	$debug_devices : $_gridle_states_debug_devices;
+	@if length($_gridle_states_debug_devices) <= 0 {
+		$debug_devices : null;
+	}
+	$gridle-settings : "#{$gridle-settings}, \"debugDevices\" : { #{$debug_devices} }";
+
+	// settings :
+	$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}\"";
+	$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
+) {
+ 
+	// check if debug is activated :
+	@if $gridle-debug {
+		$gridle-html-states-classes : true !global;
+	}
+
+
+	// | ------------------------
+	// | Windows 8 fix
+	// | ------------------------
+	
+	// Windows 8 fix for snap mode :
+	@media screen and (max-width: 400px) {
+		@-ms-viewport { width: device-width; }
+	}
+
+
+	// | ------------------------
+	// | Container
+	// | ------------------------
+ 
+	// generate container class :
+	$container-selector : ();
+	$container-selector : append( $container-selector, unquote(_gridle_classname($gridle-container-name-pattern)), comma);
+	#{$container-selector} {
+		@include gridle_container();
+	}
+
+
+	// | ------------------------
+	// | Parent selector
+	// | ------------------------
+
+	// parent common css :
+	$parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
+	#{$parentSelector} {
+		@extend %gridle-clearfix;
+		@extend %gridle-parent-common;
+	}
+
+	// | ------------------------
+	// | Store all the generated common selectors
+	// | ------------------------
+
+	// generate all selector for extends :
+	$common-selector : ();
+	$push-common-selector : ();
+	$pull-common-selector : ();
+	$prefix-common-selector : ();
+	$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
+	// | ------------------------
+
+	// generate all classes for media queries :
+	@each $stateName, $state in $_gridle_states {
+	
+		// setup vars :
+		$media : $stateName;
+		$classes : map-get($state, "classes");
+		$context : map-get($state, "context");
+
+		// generate classes :   
+		@if $media and $classes == true and $context {
+
+			// get specials columns :
+			$columnsMap : map-merge((), $_gridle_columns);
+
+			// register each default columns :
+			@for $j from 0 through $context {
+				
+				// name :
+				$columnName : "#{$j*$gridle-name-multiplicator}";
+
+				// // create a column :
+				$col : _gridle_create_column($columnName, $j,  $context);
+
+				// // add column in columns map :
+				$columnsMap : map-set($columnsMap, $columnName,  $col);
+			}
+
+			// loop on each columns to generate common selector :
+			@each $columnName, $column in $columnsMap {
+		 	
+				// 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 );
+			}
+		}
+	}
+ 
+	// 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();
+	}
+
+
+	// | ------------------------
+	// | Media queries classes
+	// | ------------------------
+ 
+	// generate all classes for differents media queries :
+	@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");
+
+		// parent common css :
+		$parentSelector : _gridle_classname($gridle-parent-name-pattern,$media,null);
+		#{$parentSelector} {
+			@extend %gridle-clearfix;
+			@extend %gridle-parent-common;
+		}
+
+		// generate all media queries grid classes :
+		@if $media and $classes == true {
+
+			// generate all the classes :
+			@include gridle_state($media, null, $has-parent) {
+		 
+				// get specials columns :
+				$columnsMap : map-merge((), $_gridle_columns);
+
+				// register each default columns :
+				@for $j from 0 through $context {
+					
+					// name :
+					$columnName : "#{$j*$gridle-name-multiplicator}";
+
+					// // create a column :
+					$col : _gridle_create_column($columnName, $j,  $context);
+
+					// // 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, $media, $columnName)} {
+						@include _gridle($columnsCount, $media, $context);
+					}
+					@if $gridle-generate-push-classes == true {
+						#{_gridle_classname($gridle-push-name-pattern, $media, $columnName)} {
+							@include _gridle_push($columnsCount, $media, $context);
+						}
+					}
+					@if $gridle-generate-pull-classes == true {
+						#{_gridle_classname($gridle-pull-name-pattern, $media, $columnName)} {
+							@include _gridle_pull($columnsCount, $media, $context);
+						}
+					}
+					@if $gridle-generate-prefix-classes == true {
+						#{_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)} {
+							@include _gridle_prefix($columnsCount, $media, $context);
+						}
+					}
+					@if $gridle-generate-suffix-classes == true {
+						#{_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)} {
+							@include _gridle_suffix($columnsCount, $media, $context);
+						}   
+					}
+				}
+ 
+				// media queries helpers classes :
+				@if $gridle-generate-helpers-classes == true and $media {
+					@include _gridle_generate_helper_classes($media);
+				}
+			}
+		}
+	}
+
+
+	// | ------------------------
+	// | JSON Settings
+	// | ------------------------
+ 
+	// generate json settings :
+	@include gridle_generate_json_settings();
+}