gridle 1.3.36 → 2.0.0

data/stylesheets/gridle/_gridle-flex.scss

@@ -0,0 +1,60 @@
+// |------------------------------------------------------
+// |------------------------------------------------------
+// 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) 2014 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.
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Driver
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+$_gridle-driver : flex;
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Default init
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'init';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Driver flex
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'driver-flex';

data/stylesheets/gridle/_gridle.scss

@@ -26,116 +26,34 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-// |------------------------------------------------------
-// |------------------------------------------------------
-// @created 	25.03.13
-// @updated 	29.01.15
-// @author 	Olivier Bossel <olivier.bossel@gmail.com>
-// @version 	1.3.36
-// |------------------------------------------------------
-// |------------------------------------------------------
-
-$_gridle-version : "1.3.36";
-
-
-
 
-// |------------------------------------------------------
-// |------------------------------------------------------
-// | Variables
-// |------------------------------------------------------
-// |------------------------------------------------------
 
-$_gridle_settings : (); 						// the default settings
-$_gridle_states : ();						// the variable map for each states
-$_gridle_clear_classes :(); 					// store each automatic clear count
-$_gridle_columns : (); 						// store the registered special columns
-$_gridle_states_debug_devices : (); 				// save the debug states devices
 
-
-
-
-// |------------------------------------------------------
 // |------------------------------------------------------
-// | Settings
 // |------------------------------------------------------
-// |------------------------------------------------------
-
-@import 'settings';
-
-
-
-
-// |------------------------------------------------------
-// |------------------------------------------------------
-// | Silent classes
-// |------------------------------------------------------
-// |------------------------------------------------------
-
-@import 'silent-classes';
-
-
-
-
+// | Driver
 // |------------------------------------------------------
 // |------------------------------------------------------
-// | Common mixins
-// |------------------------------------------------------
-// |------------------------------------------------------
-
-@import 'common-mixins';
-
-
-
-
-// |------------------------------------------------------
-// |------------------------------------------------------
-// | Functions
-// |------------------------------------------------------
-// |------------------------------------------------------
-
-@import 'functions';
-
-
-
-
-// |------------------------------------------------------
-// |------------------------------------------------------
-// | Settings mixins
-// |------------------------------------------------------
-// |------------------------------------------------------
-
-@import 'settings-mixins';
-
-
-
-
-// |------------------------------------------------------
-// |------------------------------------------------------
-// | Mixins
-// |------------------------------------------------------
-// |------------------------------------------------------
-
-@import 'mixins';
 
+$_gridle-driver : default;
 
 
 
 // |------------------------------------------------------
 // |------------------------------------------------------
-// | Generate mixins
+// | Default init
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-@import 'generate-mixins';
+@import 'init';
 
 
 
 
 // |------------------------------------------------------
 // |------------------------------------------------------
-// | Default states
+// | Driver default
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-@import 'default-states';
+@import 'driver-default';

data/stylesheets/gridle/_init.scss

@@ -0,0 +1,131 @@
+// |------------------------------------------------------
+// |------------------------------------------------------
+// @created 	25.03.13
+// @updated 	29.09.15
+// @author 		Olivier Bossel <olivier.bossel@gmail.com>
+// @version 	2.0.0
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Version
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+$_gridle-version : "2.0.0";
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Variables
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+$_gridle_is_in_generate_phase : false; 			// keep track if we are in generate phase or not anymore
+$_gridle_inited : false;						// keep track if gridle has been inited (silent classes, etc..) or not
+$_gridle_settings : (); 						// the default settings
+$_gridle_states : ();							// the variable map for each states
+$_gridle_clear_classes : (); 					// store each automatic clear count
+$_gridle_columns : (); 							// store the registered special columns
+$_gridle_extend_base_classes : (); 				// save the rules that will extend the default gridle onces
+$_gridle_apply_css_for : (); 					// save the rules that will be applied for each states on a specified gridle mixin type
+
+$_gridle_current_state : ();					// save the current state
+$_gridle_current_stateName : default; 			// save the current state name
+
+$_content_arg_state : null; 					// this variable is used to pass state through global variable into an @content
+
+$gridle-vendor-prefix : true; 					// set if need to add vendor prefixes when needed
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Vendors
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'flexbox';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Settings
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'settings';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Functions
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'functions';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Settings mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'settings-mixins';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'mixins';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Api
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'api';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Generate mixins
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'generate-mixins';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Default states
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+// @import 'default-states';

data/stylesheets/gridle/_mixins.scss

@@ -4,828 +4,389 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-// Helper to apply multiple config for a certain state with one mixin
-@mixin gridle_set(
-	$settings,
-	$state : default
-) {
-	
-	// loop on each settings
-	@each $settingName, $settingValue in $settings
-	{
-		$sn : unquote("#{$settingName}");
-		$sv : $settingValue;
-
-		// check if setting name is a state :
-		@if _gridle_has_state($sn) {
-			// process the state
-			@include gridle_set($sv, $sn);
-		} @else {
-			@if $sn == container {
-				@include gridle_container($state);
-			} @else if $sn == grid {
-				@include gridle($sv, $state);
-			} @else if $sn == push {
-				@include gridle_push($sv, $state);
-			} @else if $sn == pull {
-				@include gridle_pull($sv, $state);
-			} @else if $sn == prefix {
-				@include gridle_prefix($sv, $state);
-			} @else if $sn == suffix {
-				@include gridle_suffix($sv, $state);
-			} @else if $sn == pull {
-				@include gridle_pull($sv, $state);
-			} @else if $sn == clear_each {
-				@include gridle_clear_each(nth($sv,1), nth($sv,2), $state);
-			} @else if $sn == centered {
-				@include gridle_centered($state);
-			} @else if $sn == parent {
-				@include gridle_parent($state);
-			} @else if $sn == vertical_align {
-				@include gridle_vertical_align($sv, $state);
-			} @else if $sn == hide {
-				@if $sv == true {
-					@include gridle_hide($state);
-				} @else {
-					@include gridle_show($state);
-				}
-			} @else if $sn == show {
-				@if $sv == true {
-					@include gridle_show($state);
-				} @else {
-					@include gridle_hide($state);
-				}
-			} @else if $sn == visible {
-				@if $sv == true {
-					@include gridle_visible($state);
-				} @else {
-					@include gridle_not_visible($state);
-				}
-			} @else if $sn == not_visible {
-				@if $sv == true {
-					@include gridle_not_visible($state);
-				} @else {
-					@include gridle_visible($state);
-				}
-			} @else if $sn == show_inline {
-				@if $sv == true {
-					@include gridle_show_inline($state);
-				} @else {
-					@include gridle_hide($state);
+
+//
+// Init
+// called by _gridle_call mixin multiple times
+//
+@mixin gridle_init() {
+	@if $_gridle_inited == false {
+		$_gridle_inited : true !global;
+		@each $stateName, $state in $_gridle_states {
+			$classes : gridle_get_state_var(classes, $state);
+			@if $classes {
+				@at-root (without:all) {
+					$q : gridle_get_media_query($state);
+					@if $q {
+						@media #{$q} {
+							@include _gridle_init_common_silent_classes($state);
+						}
+					} @else {
+						@include _gridle_init_common_silent_classes($state);
+					}
 				}
-			} @else if $sn == float {
-				@include gridle_float($sv, $state);
-			} @else if $sn == clear {
-				@include gridle_clear($sv, $state);
-			} @else if $sn == no_gutter
-				or $sn == no_margin {
-				@include gridle_no_gutter($sv, $state);
-			} @else if $sn == gutter
-				or $sn == margin {
-				@include gridle_gutter($sv, $state);
-			} @else {
-				// we do nothing
 			}
 		}
 	}
 }
 
-// Responsive helpers mixins :
-@mixin gridle_state(
-	$states,
-	$has-parent : true
-) {
 
-	// check first param if is a state :
-	$firstState : nth($states,1);
-	@if _gridle_has_state($firstState) {
-
-		// loop on each states :
-		@each $state in $states
-		{
-			// variables :
-			$html-states-classes : _gridle_get_var_value(html-states-classes, $state);
-			$debug : _gridle_get_var_value(debug, $state);
-			$stateName : _gridle_get_var_value(name, $state);
-
-			// check if is a state :
-			@if ($html-states-classes or $debug)
-				and $stateName {
-				// html class :
-				@if $has-parent {
-					html#{_gridle_classname("#{$stateName}")} & { @content; }
-				} @else {
-					html#{_gridle_classname("#{$stateName}")} { @content; }
-				}
-			}
-
-			// get the media query :
-			$q : _gridle_get_media_query($state);
-
-			// make the media query if a query exist :
-			@if $q {
-				@media #{$q} {
-					@content;
-				}
-			}
-			@else
-			{
-				@content;
-			}
-		}
-
-	} @else {
-
-		// variables :
-		$html-states-classes : _gridle_get_var_value(html-states-classes, $states);
-		$debug : _gridle_get_var_value(debug, $states);
-		$stateName : _gridle_get_var_value(name, $states);
-
-		// check if is a state :
-		@if ($html-states-classes or $debug)
-			and $stateName {
-			// html class :
-			@if $has-parent {
-				html#{_gridle_classname("#{$stateName}")} & { @content; }
-			} @else {
-				html#{_gridle_classname("#{$stateName}")} { @content; }
-			}
+//
+// Init silent classes
+//
+@mixin _gridle_common_silent_class_name(
+	$for,
+	$stateName : default
+) {
+	@if mixin-exists('_gridle_common_#{$for}') {
+		%#{$stateName}-#{$for} {
+			// inject content
+			@content;
+			// extend common class by the registered css
+			@include _gridle_extend_common_class($for, $stateName);
 		}
-
-		// get the media query :
-		$q : _gridle_get_media_query($states);
-
-		// make the media query if a query exist :
-		@if $q {
-			@media #{$q} {
+		@at-root (without: media) {
+			%at-root-#{$stateName}-#{$for} {
+				// inject content
 				@content;
+				// extend common class by the registered css
+				@include _gridle_extend_common_class($for, $stateName);
 			}
 		}
-		@else
-		{
-			@content;
-		}
-
 	}
 }
-
-
-
-// Container mixin :
-@mixin gridle_container(
+@mixin _gridle_init_common_silent_classes(
 	$state : default
 ) {
-	@include _gridle_container_common($state);
-}
+	// get state name
+	$stateName : gridle_get_state_var(name, $state);
 
-
-// Grid mixin :
-// Set the width of the specified grid column :
-@mixin gridle(
-	$columns,
-	$state-or-context : default,
-	$state : default
-) {
-	// manage state and context :
-	$context : null;
-	@if type-of($state-or-context) == number {
-		$context : $state-or-context;
-	} @else {
-		$state : $state-or-context;
+	// container
+	@include _gridle_common_silent_class_name(container, $stateName) {
+		@include _gridle_common_container($state);
 	}
 
-	// common :
-	@include _gridle_grid_common();
-	// 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,
-	$state : default,
-	$context : null
-) {
-	// vars :
-	$name : _gridle_get_var_value(name, $state);
-	@if type-of($context) != number {
-		$context : _gridle_get_var_value(context, $state);
-	}
-	$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
-	$gutter-width : _gridle_get_var_value(gutter-width, $state);
-	$ie7-support : _gridle_get_var_value(ie7-support, $state);
-	$debug : _gridle_get_var_value(debug, $state);
-	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
-
-	// manage columns
-	@if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
-		// the columns is a saved one, get the context and column value
-		$column : map-get($_gridle_columns, $columns);
-		$context : map-get($column, context);
-		$columns : map-get($column, columns);
-	} @else if type-of($columns) == number {
-		$columns : $columns / $name-multiplicator;
-	} @else {
-		@error "the column #{$columns} does not exist...";
-	}
-
-	// vars :
-	$width : percentage(1 / $context * $columns);
-
-	// set value :
-	width:$width;
-	
-	// ie7 support :
-	@if $ie7-support == true {
-		*width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
-	}
-	
-	// debug :
-	@if $debug == true and $debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:before {
-				@if $name == default {
-					content:"grid-#{$name}-#{$columns}";
-				} @else {
-					content:"grid-#{$name}-#{$columns}" !important;
-				}
-			}
-			&.parent:before {
-				@if $name == default {
-					content:"grid-parent-#{$name}-#{$columns}";
-				} @else {
-					content:"grid-parent-#{$name}-#{$columns}" !important;
-				}
-			}
-		}
+	// order
+	@include _gridle_common_silent_class_name(grid-order, $stateName) {
+		@include _gridle_common_grid_order($state);
 	}
-}
-
 
-// push :
-// Push the element of the count of column wanted
-@mixin gridle_push(
-	$columns,
-	$state-or-context : default,
-	$state : default
-) {
-	// manage state and context
-	$context : null;
-	@if type-of($state-or-context) == number {
-		$context : $state-or-context;
-	} @else {
-		$state : $state-or-context;
+	// row
+	@include _gridle_common_silent_class_name(row, $stateName) {
+		@include _gridle_common_row($state);
 	}
 
-	// common :
-	@include _gridle_push_common($state);
-
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_push($columns, $state, $context);
-		}
-	} @else {
-		@include _gridle_push($columns, $state, $context);
+	// row-full
+	@include _gridle_common_silent_class_name(row-full, $stateName) {
+		@include _gridle_common_row_full($state);
 	}
-}
-@mixin _gridle_push(
-	$columns,
-	$state : default,
-	$context : null
-) {
-	// variables :
-	$name : _gridle_get_var_value(name, $state);
-	@if type-of($context) != number {
-		$context : _gridle_get_var_value(context, $state);
-	}
-	$direction : _gridle_get_var_value(direction, $state);
-	$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
-	$debug : _gridle_get_var_value(debug, $state);
-	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
-
-	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-	@if $direction == rtl { $width : $width*-1; }
-	left:$width;
-
-	// debug css :
-	@if $debug == true and $debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				@if $name == default {
-					content:"push-#{$name}-#{$columns}";
-				} @else {
-					content:"push-#{$name}-#{$columns}" !important;
-				}
-			}
-		}
-	}
-
-}
 
-
-// pull :
-// Pull the element of the count of column wanted
-@mixin gridle_pull(
-	$columns,
-	$state : default
-) {
-	// common :
-	@include _gridle_pull_common($state);
-
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_pull($columns,$state);
-		}
-	} @else {
-		@include _gridle_pull($columns,$state);
-	}
-}
-@mixin _gridle_pull(
-	$columns,
-	$state : default
-) {
-	// vars :
-	$name : _gridle_get_var_value(name, $state);
-	$context : _gridle_get_var_value(context, $state);
-	$direction : _gridle_get_var_value(direction, $state);
-	$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
-	$debug : _gridle_get_var_value(debug, $state);
-	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
-
-	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-	@if $direction == rtl { $width : $width*-1; }
-	right:$width;
-
-	// debug css :
-	@if $debug == true and $debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				@if $name == default {
-					content:"pull-#{$name}-#{$columns}";
-				} @else {
-					content:"pull-#{$name}-#{$columns}" !important;
-				}
-			}
-		}
+	// col
+	@include _gridle_common_silent_class_name(col, $stateName) {
+		@include _gridle_common_col($state);
 	}
-}
 
-
-// push :
-// Push the element of the count of column wanted
-@mixin gridle_prefix(
-	$columns,
-	$state : default
-) {
-	// common :
-	@include _gridle_prefix_common($state);
-	
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_prefix($columns,$state);
-		}
-	} @else {
-		@include _gridle_prefix($columns,$state);
-	}
-}
-@mixin _gridle_prefix(
-	$columns,
-	$state : default
-) {
-	// vars :
-	$name : _gridle_get_var_value(name, $state);
-	$context : _gridle_get_var_value(context, $state);
-	$direction : _gridle_get_var_value(direction, $state);
-	$gutter-width : _gridle_get_var_value(gutter-width, $state);
-	$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
-	$debug : _gridle_get_var_value(debug, $state);
-	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
-
-	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-
-	// set value :
-	@if $direction == rtl { margin-right:$width; }
-	@else { margin-left:$width; }
-
-	// debug css :
-	@if $debug == true and $debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				@if $name == default {
-					content:"prefix-#{$name}-#{$columns}";
-				} @else {
-					content:"prefix-#{$name}-#{$columns}" !important;
-				}
-			}
-		}
+	// grid
+	@include _gridle_common_silent_class_name(grid, $stateName) {
+		@include _gridle_common_grid($state);
 	}
-}
-
 
-// pull :
-// Pull the element of the count of column wanted
-@mixin gridle_suffix(
-	$columns,
-	$state : default
-) {
-	// common :
-	@include _gridle_suffix_common($state);
+	// grid-table
+	@include _gridle_common_silent_class_name(grid-table, $stateName) {
+		@include _gridle_common_grid_table($state);
+	}
 
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_suffix($columns,$state);
-		}
-	} @else {
-		@include _gridle_suffix($columns,$state);
+	// grid-adapt
+	@include _gridle_common_silent_class_name(grid-adapt, $stateName) {
+		@include _gridle_common_grid_adapt($state);
 	}
-}
-@mixin _gridle_suffix(
-	$columns,
-	$state : default
-) {
-	// vars :
-	$name : _gridle_get_var_value(name, $state);
-	$context : _gridle_get_var_value(context, $state);
-	$direction : _gridle_get_var_value(direction, $state);
-	$gutter-width : _gridle_get_var_value(gutter-width, $state);
-	$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
-	$debug : _gridle_get_var_value(debug, $state);
-	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
-
-	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-	
-	// set value :
-	@if $direction == rtl { margin-left:$width; }
-	@else { margin-right:$width; }
-
-	// debug css :
-	@if $debug == true and $debug-show-class-names == true {
-		#{$gridle-debug-selector} {
-			&:after {
-				@if $name == default {
-					content:"suffix-#{$name}-#{$columns}";
-				} @else {
-					content:"suffix-#{$name}-#{$columns}" !important;
-				}
-			}
-		}
+
+	// grid-grow
+	@include _gridle_common_silent_class_name(grid-grow, $stateName) {
+		@include _gridle_common_grid_grow($state);
 	}
-}
 
+	// push
+	@include _gridle_common_silent_class_name(push, $stateName) {
+		@include _gridle_common_push($state);
+	}
 
-// grid background :
-// Display the grid background debug
-@mixin gridle_grid_background(
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_grid_background($state);
-		}
-	} @else {
-		@include _gridle_grid_background($state);
+	// pull
+	@include _gridle_common_silent_class_name(pull, $stateName) {
+		@include _gridle_common_pull($state);
 	}
-}
-@mixin _gridle_grid_background(
-	$state : default
-) {
-	
-	// variables :
-	$context : _gridle_get_var_value(context, $state);
-
-	position:relative;
-	z-index:9999;
-	&:before {
-		content:'';
-		position:absolute;
-		top:0; left:0;
-		width:100%; height:100% !important;
-		// vars :
-		$width : percentage(1 / $context);
-		background: linear-gradient(to right, rgba(0,0,0,.01) 50% , rgba(0,0,0,.04) 50%); /* Standard syntax */
-		background-size:($width*2) 100%;
-		// background-position:$gridle-gutter-width/2 0;
+
+	// prefix
+	@include _gridle_common_silent_class_name(prefix, $stateName) {
+		@include _gridle_common_prefix($state);
 	}
-}
 
+	// suffix
+	@include _gridle_common_silent_class_name(suffix, $stateName) {
+		@include _gridle_common_suffix($state);
+	}
 
-/**
- * Parent clear each
- */
-// Grid mixin :
-// Set the width of the specified grid column :
-@mixin gridle_clear_each(
-	$clearEach,
-	$clearWhat : both,
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_clear_each($clearEach, $clearWhat);
-		}
-	} @else {
-		@include _gridle_clear_each($clearEach, $clearWhat);
+	// nowrap
+	@include _gridle_common_silent_class_name(nowrap, $stateName) {
+		@include _gridle_common_nowrap($state);
 	}
-}
-@mixin _gridle_clear_each(
-	$clearEach,
-	$clearWhat
-) {
-	> *:nth-child(#{$clearEach}n+1) {
-		clear : $clearWhat;
+
+	// wrap
+	@include _gridle_common_silent_class_name(wrap, $stateName) {
+		@include _gridle_common_wrap($state);
 	}
-}
 
+	// clear-each
+	@include _gridle_common_silent_class_name(clear-each, $stateName) {
+		@include _gridle_common_clear_each($state);
+	}
 
-// Grid centered :
-@mixin gridle_centered(
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_centered();
-		}
-	} @else {
-		@include _gridle_centered();
+	// centered
+	@include _gridle_common_silent_class_name(grid-centered, $stateName) {
+		@include _gridle_common_grid_centered($state);
 	}
-}
-@mixin _gridle_centered() {
-	display:block !important;
-	float:none !important;
-	margin-left:auto !important;
-	margin-right:auto !important;
-	clear:both !important;
-}
 
+	// align
+	@include _gridle_common_silent_class_name(row-align, $stateName) {
+		@include _gridle_common_row_align($state);
+	}
 
-// Grid parent :
-@mixin gridle_parent(
-	$state : default
-) {
-	// common :
-	@include _gridle_parent_common();
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_parent();
-		}
-	} @else {
-		@include _gridle_parent();
+	// hide
+	@include _gridle_common_silent_class_name(hide, $stateName) {
+		@include _gridle_common_hide($state);
 	}
-}
-@mixin _gridle_parent() {
-	@include gridle_no_gutter();
-}
 
+	// not-visible
+	@include _gridle_common_silent_class_name(not-visible, $stateName) {
+		@include _gridle_common_not_visible($state);
+	}
 
-/**
- * Vertical align :
- */
-@mixin gridle_vertical_align(
-	$align : middle,
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_vertical_align($align);
-		}
-	} @else {
-		@include _gridle_vertical_align($align);
+	// show
+	@include _gridle_common_silent_class_name(show, $stateName) {
+		@include _gridle_common_show($state);
 	}
-}
-@mixin _gridle_vertical_align(
-	$align : middle
-) {
-	font-size:0;
-	clear:both;
 
-	> * {
-		display:inline-block;
-		float:none !important;
-		vertical-align:$align;
-		font-size:1rem;
+	// show-inline
+	@include _gridle_common_silent_class_name(show-inline, $stateName) {
+		@include _gridle_common_show_inline($state);
 	}
-}
 
+	// visible
+	@include _gridle_common_silent_class_name(visible, $stateName) {
+		@include _gridle_common_visible($state);
+	}
 
-// Hide on :
-// @param 	String 	$media  On what state
-@mixin gridle_hide(
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_hide();
-		}
-	} @else {
-		@include _gridle_hide();
+	// float
+	@include _gridle_common_silent_class_name(float, $stateName) {
+		@include _gridle_common_float($state);
 	}
-}
-@mixin _gridle_hide() {
-	display:none;
-}
 
+	// clear
+	@include _gridle_common_silent_class_name(clear, $stateName) {
+		@include _gridle_common_clear($state);
+	}
 
-// Not visible on :
-// @param 	String 	$media 	What to hide (one of the 3 state classes name)
-@mixin gridle_not_visible(
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_not_visible();
-		}
-	} @else {
-		@include _gridle_not_visible();
+	// no-gutter
+	@include _gridle_common_silent_class_name(no-gutter, $stateName) {
+		@include _gridle_common_no_gutter($state);
 	}
-}
-@mixin _gridle_not_visible() {
-	visibility:hidden;
-}
 
+	// gutter
+	@include _gridle_common_silent_class_name(gutter, $stateName) {
+		@include _gridle_common_gutter($state);
+	}
 
-// Show on
-// @param 	String 	$media 	What to hide (one of the 3 state classes name)
-@mixin gridle_show(
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_show();
-		}
-	} @else {
-		@include _gridle_show();
+	// row debug
+	@include _gridle_common_silent_class_name(row-debug, $stateName) {
+		@include _gridle_common_row_debug($state);
 	}
 }
-@mixin _gridle_show() {
-	display:block;
-}
 
 
-/**
- * Show inline
- *
- * @param 	String 		$state 		The state name
- */
-@mixin gridle_show_inline(
-	$state : default
+//
+// Wrap gridle mixin content to init if needed and then extend if needed
+//			
+@mixin _gridle_call(
+	$for : null
 ) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_show_inline();
-		}
-	} @else {
-		@include _gridle_show_inline();
-	}
-}
-@mixin _gridle_show_inline() {
-	display:inline-block;
-}
+	// init if needed
+	@include gridle_init();
 
+	// put content
+	@content;
 
-// Visible on :
-// @param 	String 	$media 	On what state
-@mixin gridle_visible(
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_visible();
+	// extend and apply css for different states
+	@if $for {
+		@include _gridle_extend($for);
+		@if _gridle_is_in_generate_phase() == false {
+			@include _gridle_apply_css_for($for);
 		}
-	} @else {
-		@include _gridle_visible();
 	}
 }
-@mixin _gridle_visible() {
-	visibility:visible;
-}
 
 
-// Gridle Right :
-@mixin gridle_float(
-	$float-direction : left,
-	$state : default
+//
+// Extend
+// @stateContext
+// @calledBy 		_gridle_call
+//
+@mixin _gridle_extend(
+	$for
 ) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_float($float-direction);
+	// check if we need the state classes
+	$states-classes : gridle_get_state_var(states-classes);
+
+	// extend the "at-root" version for the .state-{stateName} classes
+	@if $states-classes and str-index(#{&}, unquote(".state-#{$_gridle_current_stateName}")) {
+		@at-root (without: media) {
+			// @debug("%at-root-#{$_gridle_current_stateName}-#{$for}");
+			@extend %at-root-#{$_gridle_current_stateName}-#{$for} !optional;
 		}
 	} @else {
-		@include _gridle_float($float-direction);
+		// extend using the current state name set in each gridle_state call
+		// @debug("%#{$_gridle_current_stateName}-#{$for}");
+		@extend %#{$_gridle_current_stateName}-#{$for} !optional;
+	}
+}
+
+
+//
+// Apply the registered css for a certain type (grid, push, etc...)
+// in each states
+//
+$_gridle_applied_for : ();
+@mixin _gridle_apply_css_for(
+	$_for
+) {
+	$selector : "#{&}-#{$_for}"; // generate a unique name that will be stacked in a map to generate only 1 time 
+	@if map-get($_gridle_applied_for, $selector) == null {
+		$_gridle_applied_for : map-set($_gridle_applied_for, $selector, true) !global;
+		$fors-patterns : $_gridle-packages;
+		@each $map in $_gridle_apply_css_for {
+			@each $stateName, $fors in $map {
+				$rules : map-get($fors, $_for);
+				@if $rules and map-get($fors-patterns, $_for) {
+					@at-root (without : media) {
+						@include _gridle_state($stateName, true, false) {
+							@include gridle_use_state($stateName) {
+								@include _gridle_map_2_css($rules);
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 }
-@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 : default
+//
+// Gridle state
+//
+// @param 	string|map|list 	$states 		A list of states, a state name or a state map
+// @param 	boolean 			$has-parent 	Mostly always true, mean that the mixin is used in a css selector and not in css root level
+//
+@mixin _gridle_state(
+	$state : default,
+	$has-parent : true,
+	$track-current-state : true
 ) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_clear($clear-direction);
+
+	// variables :
+	$state : gridle_get_state($state);
+	$states-classes : gridle_get_state_var(states-classes, $state);
+	$stateName : gridle_get_state_var(name, $state);
+
+	// check if need to tack the current state
+	@if $track-current-state {
+		// save current state
+		$_gridle_current_state : $state !global;
+		$_gridle_current_stateName : $stateName !global;
+	}
+
+	// check if is a state :
+	@if ($states-classes)
+		and $stateName {
+		// html class :
+		@at-root (without: media) {
+			@if $has-parent {
+				.state-#{$stateName} & { 
+					@content;
+				}
+			} @else {
+				.state-#{$stateName} {
+					@content;
+				}
+			}
 		}
-	} @else {
-		@include _gridle_clear($clear-direction);
 	}
-}
-@mixin _gridle_clear(
-	$clear-direction : both
-) {
-	clear:#{$clear-direction};
-}
 
+	// get the media query :
+	$q : gridle_get_media_query($state);
 
-// Gridle no gutter :
-// @param 	String 	$side 				The side to clear
-// @param 	String 	$state 				The state
-@mixin gridle_no_gutter(
-	$side : left right,
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_no_gutter($side);
+	// make the media query if a query exist :
+	@if $q {
+		@media #{$q} {
+			@content;
 		}
 	} @else {
-		@include _gridle_no_gutter($side);
+		@content;
 	}
-}
-@mixin gridle_no_margin(
-	$side : left right,
-	$state : default
-) {
-	@include gridle_no_gutter($side, $state);
-}
-@mixin _gridle_no_gutter(
-	$side : left right
-) {
-	@each $s in $side {
-		padding-#{$s} : 0;
+
+	// reset current state to default
+	@if $track-current-state {
+		$_gridle_current_state : $_gridle_settings !global;
+		$_gridle_current_stateName : default !global;
 	}
 }
 
 
-// Gridle gutter :
-// @param 	String 	$side 				The side to clear
-// @param 	String 	$state 				The state
-@mixin gridle_gutter(
-	$side : left right,
-	$state : default
+//
+// Transform map to css
+//
+@mixin _gridle_map_2_css(
+	$map
 ) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_gutter($side);
+	@each $key, $value in $map {
+		@if type-of($value) == map {
+			&#{$key} {
+				@each $k, $v in $value {
+					@if $k != null and str-index($k, gridle) and mixin-exists($k) {
+						$set-name : str-replace($k, "gridle_", "");
+						$set-name : str-replace($set-name, "_", "-", 1);
+						@include _gridle_set((
+							$set-name : $v
+						));
+					} @else {
+						#{$k}:#{$v};
+					}
+				}
+			}
+		} @else {
+			@if $key != null and str-index($key, gridle) and mixin-exists($key) {
+				$set-name : str-replace($key, "gridle_", "");
+				$set-name : str-replace($set-name, "_", "-", 1);
+				@include _gridle_set((
+					$set-name : $value
+				));
+			} @else {
+				#{$key}:#{$value};
+			}
 		}
-	} @else {
-		@include _gridle_gutter($side);
 	}
 }
-// shortcut :
-@mixin gridle_margin(
-	$side : left right,
-	$state : default
-) {
-	@include gridle_gutter($side, $state);
-}
-@mixin _gridle_gutter(
-	$side : left right,
+
+//
+// Extend common class
+//
+@mixin _gridle_extend_common_class(
+	$what,
 	$state : default
 ) {
-	$gutter-width : _gridle_get_var_value(gutter-width, $state);
-	@each $s in $side {
-		padding-#{$s} : $gutter-width / 2;
+	// extend
+	$stateName : gridle_get_state_var(name, $state);
+	$extend : gridle_get_extend_class_map($what, $stateName);
+	@if $extend != null {
+		@include _gridle_map_2_css($extend);
 	}
 }