gridle-rails 1.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 791ce67def64b48faed632cc32e8b29c4aaacfc7
+  data.tar.gz: 2c4d397616db236bc83c18c55fbe01547efe79d6
+SHA512:
+  metadata.gz: 398beeaccee859d58e51e79ff01d30c9d01f89e571b361a5c0bb29506c10506379b40336b2f3e7878c205e1c82e36ec816eab4b27ceba4a45bc6b1b78f791fc0
+  data.tar.gz: 593880207385c42fe688798b82044567ec45405610998bbcc60cb231cd53bcd3665d7b55d59046ebb152d94b6569b4774872c8fdc0cb01af8e451a6440815c15

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in gridle-rails.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 polymatt
+
+MIT License
+
+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.

data/README.md

@@ -0,0 +1,7 @@
+# Rails wrapper for Gridle{.SCSS} grid library.
+
+Created by Olivier Bossel.
+
+See code & documentation here:
+• [Library Website](http://gridle.org/)
+• [Github Repo](https://github.com/olivierbossel/gridle)

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/gridle-rails.gemspec

@@ -0,0 +1,21 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'gridle/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "gridle-rails"
+  spec.version       = Gridle::Rails::VERSION
+  spec.authors       = ["polymatt"]
+  spec.email         = ["matt@polymathic.me"]
+  spec.description   = "Rails wrapper for Gridle{.SCSS} grid library."
+  spec.summary       = "Gridle is a set of complete and simple settings, mixins and classes that make the creation and usage of grid systems (even complex ones) really simple."
+  spec.homepage      = "https://github.com/olivierbossel/gridle"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+end

data/lib/gridle/rails.rb

@@ -0,0 +1,8 @@
+require "gridle/rails/version"
+
+module Gridle
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/gridle/rails/version.rb

@@ -0,0 +1,5 @@
+module Gridle
+  module Rails
+    VERSION = "1.1.0"
+  end
+end

data/vendor/assets/stylesheets/_settings.scss

@@ -0,0 +1,12 @@
+// Import gridle :
+@import 'gridle/gridle';
+
+
+// Configure :
+$gridle-columns-count : 12;
+$gridle-gutter-width : 20px;
+$gridle-debug : true;
+$gridle-html-states-classes : true; // not really for production, used for demo here...
+
+@include gridle_register_default_states();
+@include gridle_register_state('ipad-landscape', 'only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)');

data/vendor/assets/stylesheets/grid.scss

@@ -0,0 +1,11 @@
+// Import grid settings :
+@import 'settings';
+
+// Generate classes :
+@include gridle_generate_classes();
+
+// Max size :
+.container {
+	margin:0 auto;
+	max-width:960px;
+}

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

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

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

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

data/vendor/assets/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/vendor/assets/stylesheets/gridle/_12-columns.scss

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

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

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

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

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

data/vendor/assets/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/vendor/assets/stylesheets/gridle/_16-columns.scss

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

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

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

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

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

data/vendor/assets/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/vendor/assets/stylesheets/gridle/_24-columns.scss

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

data/vendor/assets/stylesheets/gridle/_960gs-classes.scss

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

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

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

data/vendor/assets/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/vendor/assets/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/vendor/assets/stylesheets/gridle/_gridle.scss

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