gridle 1.0.6

checksums.yaml

@@ -0,0 +1,7 @@
+--- 
+SHA512: 
+  metadata.gz: 3e7f3698cd72415c66b25135e1a15fbf4c8ac8a35f94ebaae088c175f631ecd8529516e498b82ee8ccbf430eb35387e99034bd68f5aea28f819373919c637c2c
+  data.tar.gz: 1ca273584a19d04f0cd6e4729b9108cf50a129044f885b77f569b3775d16db5ace934ae33061a4de3c294ded3e25a9ebecc696dcbd014b7869289d3ab7c85526
+SHA1: 
+  metadata.gz: 00c4f50a3e1c5d897c9abe07fc5145c739ce99b0
+  data.tar.gz: ece8b4f437257d1aa38bb3f35d7872e19c5d12be

data/lib/gridle.rb

@@ -0,0 +1,30 @@
+# All gems that are required for this extension to work should go here.
+# 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)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module Extension
+  VERSION = "1.0.6"
+  DATE = "2013-11-06"
+end
+
+# This is where any custom SassScript should be placed. The functions will be  
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+# 
+# end

data/stylesheets/_gridle.scss

@@ -0,0 +1,4 @@
+/**
+ * Imports :
+ */
+@import 'gridle/gridle';

data/stylesheets/gridle/_12-columns-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '12-columns';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_12-columns-responsive-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '12-columns-responsive';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_12-columns-responsive.scss

@@ -0,0 +1,14 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 12;
+
+/**
+ * Register states :
+ */
+@include gridle_register_default_states();

data/stylesheets/gridle/_12-columns.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 12;

data/stylesheets/gridle/_16-columns-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '16-columns';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_16-columns-responsive-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '16-columns-responsive';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_16-columns-responsive.scss

@@ -0,0 +1,14 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 16;
+
+/**
+ * Register states :
+ */
+@include gridle_register_default_states();

data/stylesheets/gridle/_16-columns.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 16;

data/stylesheets/gridle/_24-columns-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '24-columns';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_24-columns-responsive-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '24-columns-responsive';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_24-columns-responsive.scss

@@ -0,0 +1,14 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 24;
+
+/**
+ * Register states :
+ */
+@include gridle_register_default_states();

data/stylesheets/gridle/_24-columns.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 24;

data/stylesheets/gridle/_960gs-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '960gs';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_960gs-responsive-classes.scss

@@ -0,0 +1,9 @@
+/**
+ * Imports :
+ */
+@import '960gs-responsive';
+
+/**
+ * Generate classes :
+ */
+@include gridle_generate_classes();

data/stylesheets/gridle/_960gs-responsive.scss

@@ -0,0 +1,23 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 12;
+$gridle-gutter-width  : 20px;
+
+/**
+ * Register states :
+ */
+@include gridle_register_default_states();
+
+/**
+ * Fix width of container :
+ */
+.container, .grid-container, .container-12, .c-12 {
+	max-width:960px;
+	margin:0 auto;
+}

data/stylesheets/gridle/_960gs.scss

@@ -0,0 +1,18 @@
+/**
+ * Imports
+ */
+@import 'gridle';
+
+/**
+ * Configuration :
+ */
+$gridle-columns-count : 12;
+$gridle-gutter-width  : 20px;
+
+/**
+ * Fix width of container :
+ */
+.container, .grid-container, .container-12, .c-12 {
+	max-width:960px;
+	margin:0 auto;
+}

data/stylesheets/gridle/_gridle.scss

@@ -0,0 +1,1583 @@
+// |------------------------------------------------------
+// |------------------------------------------------------
+// Gridle (.scss)
+// Gridle is an one and unique grid system file that allows you to generate almost all
+// grid you've ever dreamt about.
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// Copyright (c) 2013 Olivier Bossel
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+// and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions
+// of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+// TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+// CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+// IN THE SOFTWARE.
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// @created 	25.03.13
+// @updated 	06.11.13
+// @author 		Olivier Bossel <olivier.bossel@gmail.com>
+// @version 	1.0.5
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Settings
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+// 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-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 	: (retina, landscape) !default;// retina | landscape | portrait | print | tv
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Variables
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+
+$_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;
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Silent classes
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+// Init gridle
+// Creating the silent classes with user configuration :
+%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 {
+	width:100%;
+
+	// For modern browser
+	&:before,
+	&:after {
+	    content:"";
+	    display:table;
+	}
+	&:after {
+	    clear:both;
+	}
+	// For IE 6/7 (trigger hasLayout
+	& {
+	   zoom:1;
+	}
+}
+%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;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+}
+%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;
+	}
+	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;
+}
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Common mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+// Common css that cannot be extended cause of variables :
+@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 !important;
+	@if $gridle-debug == true {
+		@extend %gridle-grid-debug-common;
+	}
+}
+@mixin _gridle_container_common() {
+	@extend %gridle-container-common;
+	// debug part :
+	@if ($gridle-debug == true) {
+		@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_push_common() {
+	// extend common :
+	@extend %gridle-push-pull-common;
+	@if $gridle-debug == true {
+		@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 {
+		@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 {
+		@extend %gridle-prefix-debug-common;
+	}
+}
+@mixin _gridle_suffix_common() {
+	@if $gridle-debug == true {
+		@extend %gridle-suffix-debug-common;
+	}
+}
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Functions
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+// Get column width :
+@function gridle_get_columns_width(
+    $columns : 1
+) {
+    @return percentage(1 / $gridle-columns-count * $columns);
+}
+@function gridle_get_column_width(
+    $columns : 1
+) { 
+    @return gridle_get_columns_width($columns);
+}
+
+
+// Get media query by state :
+// @param 	String 	$state 	The state name
+// @return 	String 			The query
+@function _get_media_query_for_state(
+	$state
+) {
+	// get the index of state :
+	$idx : _gridle_get_media_query_index_by_name($state);
+
+	// check if media_min-width is null :
+	@if $state != null {
+
+		@if $idx != null {
+			// get vars :
+			$m : _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 $m != null {
+				// check if query exist :
+				@if $query != null {
+					@return $query;
+				} @else {
+					// process max and min width :
+					@if $min-width == null { $min-width : 0; }
+					@if $max-width == null { $max-width : 99999px; }
+					// write media query :
+					@return "screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
+				}
+			}
+		} @else if $state == 'print' or $state == print {
+			@return "only print";
+		} @else if $state == 'tv' or $state == tv {
+			@return "only tv";
+		} @else if $state == 'portrait' or $state == portrait {
+			@return "only screen and (orientation: portrait)";
+		} @else if $state == 'landscape' or $state == landscape {
+			@return "only screen and (orientation: landscape)";
+		} @else if $state == 'retina' or $state == 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 {
+		@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; }
+	}
+}
+
+
+// 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 $_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; }
+}
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+// Register an state :
+// @param 	String 	$name 		The state name
+// @param 	int 	$min-width 	The min width
+// @param 	int 	$max-width 	The max width
+@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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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) == number and type-of($max-width-or-classes-generation) == number {
+			$_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",0,480px);
+	@include gridle_register_state("tablet",481px,1024px);
+}
+
+
+// Responsive helpers mixins :
+// @param 	String 	$media 	The media name to response for
+@mixin gridle_responseTo(
+	$state-or-min-width,
+	$max-width : null,
+	$has-parent : true
+) {
+
+	// get the index of state :
+	$idx : _gridle_get_media_query_index_by_name($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.#{$state-or-min-width} & { @content; }
+		} @else {
+			html.#{$state-or-min-width} { @content; }
+		}
+	}
+
+	// check if media_min-width is null :
+	@if $state-or-min-width != null {
+
+		@if $idx != null {
+			// get vars :
+			$m : _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 $m != null {
+				// check if query exist :
+				@if $query != null {
+					@media #{$query} {
+						@content;
+					}
+				} @else {
+					// process max and min width :
+					@if $min-width == null { $min-width : 0; }
+					@if $max-width == null { $max-width : 99999px; }
+					// write media query :
+					@media screen and (min-width: $min-width) and (max-width: $max-width) { @content; }
+				}
+			}
+		} @else if $state-or-min-width == 'print' or $state-or-min-width == print {
+			@media only print {
+				@content;
+			}
+		} @else if $state-or-min-width == 'tv' or $state-or-min-width == tv {
+			@media only tv {
+				@content;
+			}
+		} @else if $state-or-min-width == 'portrait' or $state-or-min-width == portrait {
+			@media only screen and (orientation: portrait) {
+				@content;
+			}
+		} @else if $state-or-min-width == 'landscape' or $state-or-min-width == landscape {
+			@media only screen and (orientation: landscape) {
+				@content;
+			}
+		} @else if $state-or-min-width == 'retina' or $state-or-min-width == retina {
+			@media 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)
+			{
+				@content;
+			}
+		} @else {
+			// check for min and max width :
+			@if $state-or-min-width != null and $max-width != null {
+				@media screen and (min-width: $state-or-min-width) and (max-width: $max-width) { @content; }
+			} @else if $state-or-min-width != null and $max-width == null {
+				@media screen and (min-width: $state-or-min-width) { @content; }
+			} @else if $state-or-min-width == null and $max-width != null {
+				@media screen and (max-width: $max-width) { @content; }
+			}
+		}
+	} @else {
+		@content;
+	}
+}
+
+
+// Container mixin :
+@mixin gridle_container(
+) {
+	@include _gridle_container_common();
+}
+
+
+// Grid mixin :
+// Set the width of the specified grid column :
+// @param 	int 		$columns 				The columns to generate	
+@mixin gridle(
+	$columns : 12,
+	$state : null,
+	$debug-state : null
+) {
+	@include _gridle_grid_common();
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle($columns, $state, $debug-state);
+		}
+	} @else {
+		@include _gridle($columns,$state,$debug-state);
+	}
+}
+@mixin _gridle(
+	$columns : 12,
+	$state : null,
+	$debug-state : null
+) {
+	// vars :
+	@if $debug-state == null { $debug-state : $state; }
+	$width : percentage(1 / $gridle-columns-count) * $columns;
+	width:$width;
+
+	// ie7 support :
+	@if $gridle-ie7-support == true {
+		*width: expression((this.parentNode.clientWidth/#{$gridle-columns-count}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
+	}
+	
+	// debug :
+	@if $gridle-debug == true and $gridle-debug-show-class-names == true {
+		&:before {
+			@if $debug-state != null {
+				content:"grid-#{$debug-state}-#{$columns * $gridle-name-multiplicator}";
+			} @else {
+				content:"grid-#{$columns * $gridle-name-multiplicator}";
+			}
+		}
+		&.grid-parent:before {
+			@if $debug-state != null {
+				content:"grid-parent-#{$debug-state}-#{$columns * $gridle-name-multiplicator}";
+			} @else {
+				content:"grid-parent-#{$columns * $gridle-name-multiplicator}";
+			}
+		}
+	}
+}
+
+
+// push :
+// Push the element of the count of column wanted
+// @param 	int 		$columns 				The columns to generate	
+// @param 	boolean 	$important 			Define if need to add !important at the end of the properties
+@mixin gridle_push(
+	$columns : 12,
+	$state : null,
+	$debug-state : null
+) {
+	@include _gridle_push_common();
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_push($columns,$debug-state);
+		}
+	} @else {
+		@include _gridle_push($columns,$debug-state);
+	}
+}
+@mixin _gridle_push(
+	$columns : 12,
+	$debug-state : null
+) {
+	// vars :
+	$width : percentage(1 / $gridle-columns-count) * $columns;
+	@if $gridle-direction == rtl { $width : $width*-1; }
+	left:$width;
+
+	// debug css :
+	@if $gridle-debug == true {	
+		@if $gridle-debug-show-class-names == true {
+			&:after {
+				@if $debug-state != null {
+					content:"push-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
+				} @else {
+					content:"push-#{$columns * $gridle-name-multiplicator}" !important;
+				}
+			}
+		}
+	}
+}
+
+
+// pull :
+// Pull the element of the count of column wanted
+// @param 	int 		$columns 				The columns to generate	
+// @param 	boolean 	$important 			Define if need to add !important at the end of the properties
+@mixin gridle_pull(
+	$columns : 12,
+	$state : null,
+	$debug-state : null
+) {
+	@include _gridle_pull_common();
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_pull($columns,$debug-state);
+		}
+	} @else {
+		@include _gridle_pull($columns,$debug-state);
+	}
+}
+@mixin _gridle_pull(
+	$columns : 12,
+	$debug-state : null
+) {
+	// vars :
+	$width : percentage(1 / $gridle-columns-count) * $columns;
+	@if $gridle-direction == rtl { $width : $width*-1; }
+	right:$width;
+
+	// debug css :
+	@if $gridle-debug == true {
+		@if $gridle-debug-show-class-names == true {
+			&:after {
+				@if $debug-state != null {
+					content:"pull-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
+				} @else {
+					content:"pull-#{$columns * $gridle-name-multiplicator}" !important;
+				}
+			}
+		}
+	}
+}
+
+
+// push :
+// Push the element of the count of column wanted
+// @param 	int 		$columns 				The columns to generate	
+// @param 	boolean 	$important 			Define if need to add !important at the end of the properties
+@mixin gridle_prefix(
+	$columns : 12,
+	$state : null,
+	$debug-state : null
+) {
+	@include _gridle_prefix_common();
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_prefix($columns,$debug-state);
+		}
+	} @else {
+		@include _gridle_prefix($columns,$debug-state);
+	}
+}
+@mixin _gridle_prefix(
+	$columns : 12,
+	$debug-state : null
+) {
+	// vars :
+	$width : percentage(1 / $gridle-columns-count) * $columns;
+	@if $gridle-direction == rtl { margin-right:$width; }
+	@else { margin-left:$width; }
+
+	// debug css :
+	@if $gridle-debug == true {
+		@if $gridle-debug-show-class-names == true {
+			&:after {
+				@if $debug-state != null {
+					content:"prefix-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
+				} @else {
+					content:"prefix-#{$columns * $gridle-name-multiplicator}" !important;
+				}
+			}
+		}
+	}
+}
+
+
+// pull :
+// Pull the element of the count of column wanted
+// @param 	int 		$columns 				The columns to generate	
+// @param 	boolean 	$important 			Define if need to add !important at the end of the properties
+@mixin gridle_suffix(
+	$columns : 12,
+	$state : null
+) {
+	@include _gridle_suffix_common();
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_suffix($columns,$state);
+		}
+	} @else {
+		@include _gridle_suffix($columns,$state);
+	}
+}
+@mixin _gridle_suffix(
+	$columns : 12,
+	$debug-state : null
+) {
+	// vars :
+	$width : percentage(1 / $gridle-columns-count) * $columns;
+	@if $gridle-direction == rtl { margin-left:$width; }
+	@else { margin-right:$width; }
+
+	// debug css :
+	@if $gridle-debug == true {
+		@if $gridle-debug-show-class-names == true {
+			&:after {
+				@if $debug-state != null {
+					content:"suffix-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
+				} @else {
+					content:"suffix-#{$columns * $gridle-name-multiplicator}" !important;
+				}
+			}
+		}
+	}
+}
+
+
+// Grid centered :
+@mixin gridle_centered(
+	$state : null
+) {
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_centered();
+		}
+	} @else {
+		@include _gridle_centered();
+	}
+}
+@mixin _gridle_centered() {
+	display:block;
+	float:none;
+	margin-left:auto;
+	margin-right:auto;
+	clear:both;
+}
+
+
+// Grid parent :
+@mixin gridle_parent(
+	$state : null
+) {
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_parent();
+		}
+	} @else {
+		@include _gridle_parent();
+	}
+}
+@mixin _gridle_parent() {
+	padding-left:0 !important;
+	padding-right:0 !important;
+}
+
+
+// Hide on :
+// @param 	String 	$media  On what state
+@mixin gridle_hide(
+	$state : null
+) {
+	@if $state {
+		@include gridle_responseTo($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
+) {
+	@if $state {
+		@include gridle_responseTo($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
+) {
+	@if $state {
+		@include gridle_responseTo($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
+) {
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_visible();
+		}
+	} @else {
+		@include _gridle_visible();
+	}
+}
+@mixin _gridle_visible() {
+	visibility:visible;
+}
+
+
+// Gridle Right :
+@mixin gridle_float(
+	$float-direction : left,
+	$state : null
+) {
+	@if $state {
+		@include gridle_responseTo($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
+) {
+	@if $state {
+		@include gridle_responseTo($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 : null,
+	$state : null
+) {
+	@if $state {
+		@include gridle_responseTo($state) {
+			@include _gridle_no_gutter($side);
+		}
+	} @else {
+		@include _gridle_no_gutter($side);
+	}
+}
+@mixin _gridle_no_gutter(
+	$side : null
+) {
+
+	@if $side == 'left' or $side == left {
+		padding-left:0 !important;
+	} @else if $side == 'right' or $side == right {
+		padding-right:0 !important;
+	} @else {
+		padding-left:0 !important;
+		padding-right:0 !important;
+	}
+}
+@mixin gridle_no_margin(
+	$side : null,
+	$state : null
+) {
+	@include gridle_no_gutter($side, $state);
+}
+
+
+// Generate all helpers classes
+// All the classes generated are not wrapper in gridle_responseTo
+// in this mixin... Just the names are generated accordingly to the
+// requested state
+@mixin _gridle_generate_helper_classes (
+	$state : null
+) {
+	$media : '';
+	@if ($state != null) { $media : -#{$state}; }
+	@else { $media : ''; }
+
+	.hide#{$media} {
+		@include gridle_hide(null);
+	}
+	.not-visible#{$media} {
+		@include gridle_not_visible(null);
+	}
+	.show#{$media} {
+		@include gridle_show(null);
+	}
+	.visible#{$media} {
+		@include gridle_visible(null);
+	}
+	.float#{$media}-left {
+		@include gridle_float(left);
+	}
+	.float#{$media}-right {
+		@include gridle_float(right);
+	}
+	.clear#{$media} {
+		@include gridle_clear(both);
+	}
+	.clear#{$media}-left {
+		@include gridle_clear(left);
+	}
+	.clear#{$media}-right {
+		@include gridle_clear(right);
+	}
+	.no-gutter#{$media},
+	.no-margin#{$media} {
+		@include gridle_no_margin();
+	}
+	.no-gutter#{$media}-left,
+	.no-margin#{$media}-left {
+		@include gridle_no_margin(left);
+	}
+	.no-gutter#{$media}-right,
+	.no-margin#{$media}-right {
+		@include gridle_no_margin(right);
+	}
+	.auto-height#{$media} {
+		height:inherit;
+	}
+	.centered#{$media} {
+		@include gridle_centered(null);
+	}
+	[class*="grid-"].grid-parent#{$media} {
+		@include gridle_parent(null);
+	}
+}
+
+
+// gridle mixin :
+// Generate all the classes needed for a grid
+@mixin gridle_generate_classes(
+	$scope : null
+) {
+	// check if a scope exist :
+	@if $scope != null {
+		// 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; }
+	}
+	
+	// body media query content :
+	$gridle-settings-states : "{";
+
+	// generate container class :
+	$container-selector : ();
+	$container-selector : $container-selector, unquote(".container, .grid-container, .container-#{$gridle-columns-count}");
+	#{$container-selector} {
+		@include gridle_container();
+	}
+
+	// generate all grid-x classes :
+	@for $i from 0 through $gridle-columns-count {
+
+		.grid-#{$i*$gridle-name-multiplicator} {
+			@include _gridle($i);
+		}
+		@if $gridle-generate-push-classes == true {
+			.push-#{$i*$gridle-name-multiplicator} {
+				@include _gridle_push($i);
+			}
+		}
+		@if $gridle-generate-pull-classes == true {
+			.pull-#{$i*$gridle-name-multiplicator} {
+				@include _gridle_pull($i);
+			}
+		}
+		@if $gridle-generate-prefix-classes == true {
+			.prefix-#{$i*$gridle-name-multiplicator} {
+				@include _gridle_prefix($i);
+			}
+		}
+		@if $gridle-generate-suffix-classes == true {
+			.suffix-#{$i*$gridle-name-multiplicator} {
+				@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 {
+		$push-common-selector : $push-common-selector, unquote(".push-#{$i*$gridle-name-multiplicator}");
+		$pull-common-selector : $pull-common-selector, unquote(".pull-#{$i*$gridle-name-multiplicator}");
+		$prefix-common-selector : $prefix-common-selector, unquote(".prefix-#{$i*$gridle-name-multiplicator}");
+		$suffix-common-selector : $suffix-common-selector, unquote(".suffix-#{$i*$gridle-name-multiplicator}");
+		$common-selector : $common-selector, unquote(".grid-#{$i*$gridle-name-multiplicator}");
+
+		// generate all classes for media queries :
+		@for $j from 1 through 15 {
+			// setup vars :
+			$media : _gridle_get_media_query_vars($j,"name");
+			$min-width : _gridle_get_media_query_vars($j,"min-width");
+			$max-width : _gridle_get_media_query_vars($j,"max-width");
+			$classes : _gridle_get_media_query_vars($j,"classes");
+			@if $min-width == null { $min-width : 0; }
+			@if $max-width == null { $max-width : 999999; }
+
+			// generate classes :	
+			@if $media != null and $classes == true {
+				
+				$push-common-selector : $push-common-selector, unquote(".push-#{$media}-#{$i*$gridle-name-multiplicator}");
+				$pull-common-selector : $pull-common-selector, unquote(".pull-#{$media}-#{$i*$gridle-name-multiplicator}");
+				$prefix-common-selector : $prefix-common-selector, unquote(".prefix-#{$media}-#{$i*$gridle-name-multiplicator}");
+				$suffix-common-selector : $suffix-common-selector, unquote(".suffix-#{$media}-#{$i*$gridle-name-multiplicator}");
+				$common-selector : $common-selector, unquote(".grid-#{$media}-#{$i*$gridle-name-multiplicator}");
+			}
+		}
+
+		// generate all classes for usefull states :
+		@if $gridle-generate-useful-states-classes != null {
+			@each $state in $gridle-generate-useful-states-classes {
+				$push-common-selector : $push-common-selector, unquote(".push-#{$state}-#{$i*$gridle-name-multiplicator}");
+				$pull-common-selector : $pull-common-selector, unquote(".pull-#{$state}-#{$i*$gridle-name-multiplicator}");
+				$prefix-common-selector : $prefix-common-selector, unquote(".prefix-#{$state}-#{$i*$gridle-name-multiplicator}");
+				$suffix-common-selector : $suffix-common-selector, unquote(".suffix-#{$state}-#{$i*$gridle-name-multiplicator}");
+				$common-selector : $common-selector, unquote(".grid-#{$state}-#{$i*$gridle-name-multiplicator}");
+			}
+		}
+	}
+
+	// extends :
+	#{$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");
+		$min-width : _gridle_get_media_query_vars($i,"min-width");
+		$max-width : _gridle_get_media_query_vars($i,"max-width");
+		$classes : _gridle_get_media_query_vars($i,"classes");
+
+		// generate all media queries grid classes :
+		@if $media != null and $classes == true {
+
+			// manage body query :
+			$body-query : _get_media_query_for_state($media);
+			@if ($body-query != null) {
+				@if $i == 1 {
+					$gridle-settings-states : "#{$gridle-settings-states}\"#{$media}\":\"#{$body-query}\"";
+				} @else {
+					$gridle-settings-states : "#{$gridle-settings-states},\"#{$media}\":\"#{$body-query}\"";
+				}
+			}
+
+			// generate all the classes :
+			@include gridle_responseTo($media, null, $has-parent) {
+		
+				@for $j from 0 through $gridle-columns-count {
+		
+					.grid-#{$media}-#{$j*$gridle-name-multiplicator} {
+						@include _gridle($j,$media);
+					}
+					@if $gridle-generate-push-classes == true {
+						.push-#{$media}-#{$j*$gridle-name-multiplicator} {
+							@include _gridle_push($j,$media);
+						}
+					}
+					@if $gridle-generate-pull-classes == true {
+						.pull-#{$media}-#{$j*$gridle-name-multiplicator} {
+							@include _gridle_pull($j,$media);
+						}
+					}
+					@if $gridle-generate-prefix-classes == true {
+						.prefix-#{$media}-#{$j*$gridle-name-multiplicator} {
+							@include _gridle_prefix($j,$media);
+						}
+					}
+					@if $gridle-generate-suffix-classes == true {
+						.suffix-#{$media}-#{$j*$gridle-name-multiplicator} {
+							@include _gridle_suffix($j,$media);
+						}	
+					}
+				}
+
+				// media queries helpers classes :
+				@if $gridle-generate-helpers-classes == true and $media != null {
+					@include _gridle_generate_helper_classes($media);
+				}
+			}
+		}
+	}
+
+	// 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 != null) {
+				$gridle-settings-states : "#{$gridle-settings-states},\"#{$state}\":\"#{$body-query}\"";
+			}
+
+			// creating classes :
+			@include gridle_responseTo($state, null, $has-parent) {
+
+				@for $k from 0 through $gridle-columns-count {
+			
+					.grid-#{$state}-#{$k*$gridle-name-multiplicator} {
+						@include _gridle($k,$state);
+					}
+					@if $gridle-generate-push-classes == true {
+						.push-#{$state}-#{$k*$gridle-name-multiplicator} {
+							@include _gridle_push($k,$state);
+						}
+					}
+					@if $gridle-generate-pull-classes == true {
+						.pull-#{$state}-#{$k*$gridle-name-multiplicator} {
+							@include _gridle_pull($k,$state);
+						}
+					}
+					@if $gridle-generate-prefix-classes == true {
+						.prefix-#{$state}-#{$k*$gridle-name-multiplicator} {
+							@include _gridle_prefix($k,$state);
+						}
+					}
+					@if $gridle-generate-suffix-classes == true {
+						.suffix-#{$state}-#{$k*$gridle-name-multiplicator} {
+							@include _gridle_suffix($k,$state);
+						}	
+					}
+				}
+				
+				@if $gridle-generate-helpers-classes == true {
+					@include _gridle_generate_helper_classes($state);	
+				}
+			}
+		}
+	}
+
+	// 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}";
+	$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 {
+		content : $gridle-settings;
+	}
+}