gridle 1.3.36 → 2.0.0

data/stylesheets/gridle/_flexbox.scss

@@ -0,0 +1,422 @@
+// Flexbox Mixins
+// http://philipwalton.github.io/solved-by-flexbox/
+// https://github.com/philipwalton/solved-by-flexbox
+// 
+// Copyright (c) 2013 Brian Franco
+//
+// 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.
+//
+// This is a set of mixins for those who want to mess around with flexbox
+// using the native support of current browsers. For full support table
+// check: http://caniuse.com/flexbox
+//
+// Basically this will use:
+//
+// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
+// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
+//
+// This was inspired by:
+// 
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+// 
+// With help from:
+// 
+// * http://w3.org/tr/css3-flexbox/
+// * http://the-echoplex.net/flexyboxes/
+// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
+// * http://css-tricks.com/using-flexbox/
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
+
+//----------------------------------------------------------------------
+
+// Flexbox Containers
+//
+// The 'flex' value causes an element to generate a block-level flex
+// container box.
+//
+// The 'inline-flex' value causes an element to generate a inline-level
+// flex container box. 
+//
+// display: flex | inline-flex
+//
+// http://w3.org/tr/css3-flexbox/#flex-containers
+//
+// (Placeholder selectors for each type, for those who rather @extend)
+
+@mixin flexbox {
+	@if $gridle-vendor-prefix {
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: -moz-flex;
+		display: -ms-flexbox;
+	}
+	display: flex;
+}
+
+%flexbox { @include flexbox; }
+
+//----------------------------------
+
+@mixin inline-flex {
+	@if $gridle-vendor-prefix {
+		display: -webkit-inline-box;
+		display: -webkit-inline-flex;
+		display: -moz-inline-flex;
+		display: -ms-inline-flexbox;
+	}
+	display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+//----------------------------------------------------------------------
+
+// Flexbox Direction
+//
+// The 'flex-direction' property specifies how flex items are placed in
+// the flex container, by setting the direction of the flex container's
+// main axis. This determines the direction that flex items are laid out in. 
+//
+// Values: row | row-reverse | column | column-reverse
+// Default: row
+//
+// http://w3.org/tr/css3-flexbox/#flex-direction-property
+
+@mixin flex-direction($value: row) {
+	@if $gridle-vendor-prefix {
+		@if $value == row-reverse {
+			-webkit-box-direction: reverse;
+			-webkit-box-orient: horizontal;
+		} @else if $value == column {
+			-webkit-box-direction: normal;
+			-webkit-box-orient: vertical;
+		} @else if $value == column-reverse {
+			-webkit-box-direction: reverse;
+			-webkit-box-orient: vertical;
+		} @else {
+			-webkit-box-direction: normal;
+			-webkit-box-orient: horizontal;
+		}
+		-webkit-flex-direction: $value;
+		-moz-flex-direction: $value;
+		-ms-flex-direction: $value;
+	}
+	flex-direction: $value;
+}
+	// Shorter version:
+	@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+//----------------------------------------------------------------------
+
+// Flexbox Wrap
+//
+// The 'flex-wrap' property controls whether the flex container is single-line
+// or multi-line, and the direction of the cross-axis, which determines
+// the direction new lines are stacked in. 
+//
+// Values: nowrap | wrap | wrap-reverse
+// Default: nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-wrap-property
+
+@mixin flex-wrap($value: nowrap) {
+	@if $gridle-vendor-prefix {
+		// No Webkit Box fallback.
+		-webkit-flex-wrap: $value;
+		-moz-flex-wrap: $value;
+		@if $value == nowrap {
+			-ms-flex-wrap: none;
+		} @else { 
+			-ms-flex-wrap: $value; 
+		}
+	}
+	flex-wrap: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Flow (shorthand)
+//
+// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
+// and 'flex-wrap' properties, which together define the flex container's
+// main and cross axes.
+//
+// Values: <flex-direction> | <flex-wrap> 
+// Default: row nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-flow-property
+
+@mixin flex-flow($values: (row nowrap)) {
+	@if $gridle-vendor-prefix {
+		// No Webkit Box fallback.
+		-webkit-flex-flow: $values;
+		-moz-flex-flow: $values;
+		-ms-flex-flow: $values;
+	}
+	flex-flow: $values;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Order
+//
+// The 'order' property controls the order in which flex items appear within
+// their flex container, by assigning them to ordinal groups.
+//
+// Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#order-property
+
+@mixin order($int: 0) {
+	@if $gridle-vendor-prefix {
+		-webkit-box-ordinal-group: $int + 1;
+		-webkit-order: $int;
+		-moz-order: $int;
+		-ms-flex-order: $int;
+	}
+	order: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Grow
+//
+// The 'flex-grow' property sets the flex grow factor. Negative numbers
+// are invalid.
+//
+// Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#flex-grow-property
+
+@mixin flex-grow($int: 0) {
+	@if $gridle-vendor-prefix {
+		-webkit-box-flex: $int;
+		-webkit-flex-grow: $int;
+		-moz-flex-grow: $int;
+		-ms-flex-positive: $int;
+	}
+	flex-grow: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Shrink
+//
+// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
+// are invalid.
+//
+// Default: 1
+//
+// http://w3.org/tr/css3-flexbox/#flex-shrink-property
+
+@mixin flex-shrink($int: 1) {
+	@if $gridle-vendor-prefix {
+		-webkit-flex-shrink: $int;
+		-moz-flex-shrink: $int;
+		-ms-flex-negative: $int;
+	}
+	flex-shrink: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Basis
+//
+// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
+//
+// Values: Like "width" 
+// Default: auto
+//
+// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
+
+@mixin flex-basis($value: auto) {
+	@if $gridle-vendor-prefix {
+		-webkit-flex-basis: $value;
+		-moz-flex-basis: $value;
+		-ms-flex-preferred-size: $value;
+	}
+	flex-basis: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox "Flex" (shorthand)
+//
+// The 'flex' property specifies the components of a flexible length: the
+// flex grow factor and flex shrink factor, and the flex basis. When an
+// element is a flex item, 'flex' is consulted instead of the main size
+// property to determine the main size of the element. If an element is
+// not a flex item, 'flex' has no effect.
+//
+// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
+// Default: See individual properties (1 1 0).
+//
+// http://w3.org/tr/css3-flexbox/#flex-property
+
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+    
+	// Set a variable to be used by box-flex properties
+	$fg-boxflex: $fg;
+
+	// Box-Flex only supports a flex-grow value so let's grab the
+	// first item in the list and just return that.
+	@if type-of($fg) == 'list' {
+		$fg-boxflex: nth($fg, 1);
+	}
+
+	@if $gridle-vendor-prefix {
+		-webkit-box-flex: $fg-boxflex;
+		-webkit-flex: $fg $fs $fb;
+		-moz-box-flex: $fg-boxflex;
+		-moz-flex: $fg $fs $fb;
+		-ms-flex: $fg $fs $fb;
+	}
+	flex: $fg $fs $fb;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Justify Content
+//
+// The 'justify-content' property aligns flex items along the main axis
+// of the current line of the flex container. This is done after any flexible
+// lengths and any auto margins have been resolved. Typically it helps distribute
+// extra free space leftover when either all the flex items on a line are
+// inflexible, or are flexible but have reached their maximum size. It also
+// exerts some control over the alignment of items when they overflow the line.
+//
+// Note: 'space-*' values not supported in older syntaxes.
+//
+// Values: flex-start | flex-end | center | space-between | space-around
+// Default: flex-start
+//
+// http://w3.org/tr/css3-flexbox/#justify-content-property
+
+@mixin justify-content($value: flex-start) {
+	@if $gridle-vendor-prefix {
+		@if $value == flex-start {
+			-webkit-box-pack: start;
+			-ms-flex-pack: start;
+		} @else if $value == flex-end {
+			-webkit-box-pack: end;
+			-ms-flex-pack: end;
+		} @else if $value == space-between {
+			-webkit-box-pack: justify;
+			-ms-flex-pack: justify;
+		} @else if $value == space-around {
+			-ms-flex-pack: distribute;		
+		} @else {
+			-webkit-box-pack: $value;
+			-ms-flex-pack: $value;
+		}
+		-webkit-justify-content: $value;
+		-moz-justify-content: $value;
+	}
+	justify-content: $value;
+}
+	// Shorter version:
+	@mixin flex-just($args...) { @include justify-content($args...); }
+
+//----------------------------------------------------------------------
+
+// Flexbox Align Items
+//
+// Flex items can be aligned in the cross axis of the current line of the
+// flex container, similar to 'justify-content' but in the perpendicular
+// direction. 'align-items' sets the default alignment for all of the flex
+// container's items, including anonymous flex items. 'align-self' allows
+// this default alignment to be overridden for individual flex items. (For
+// anonymous flex items, 'align-self' always matches the value of 'align-items'
+// on their associated flex container.) 
+//
+// Values: flex-start | flex-end | center | baseline | stretch
+// Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-items-property
+
+@mixin align-items($value: stretch) {
+	@if $gridle-vendor-prefix {
+		@if $value == flex-start {
+			-webkit-box-align: start;
+			-ms-flex-align: start;
+		} @else if $value == flex-end {
+			-webkit-box-align: end;
+			-ms-flex-align: end;
+		} @else {
+			-webkit-box-align: $value;
+			-ms-flex-align: $value;
+		}
+		-webkit-align-items: $value;
+		-moz-align-items: $value;
+	}
+	align-items: $value;
+}
+
+//----------------------------------
+
+// Flexbox Align Self
+//
+// Values: auto | flex-start | flex-end | center | baseline | stretch
+// Default: auto
+
+@mixin align-self($value: auto) {
+	@if $gridle-vendor-prefix {
+		// No Webkit Box Fallback.
+		-webkit-align-self: $value;
+		-moz-align-self: $value;
+		@if $value == flex-start {
+			-ms-flex-item-align: start;
+		} @else if $value == flex-end {
+			-ms-flex-item-align: end;
+		} @else {
+			-ms-flex-item-align: $value;
+		}
+	}
+	align-self: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Align Content
+//
+// The 'align-content' property aligns a flex container's lines within the
+// flex container when there is extra space in the cross-axis, similar to
+// how 'justify-content' aligns individual items within the main-axis. Note,
+// this property has no effect when the flexbox has only a single line.
+//
+// Values: flex-start | flex-end | center | space-between | space-around | stretch
+// Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-content-property
+
+@mixin align-content($value: stretch) {
+	@if $gridle-vendor-prefix {
+		// No Webkit Box Fallback.
+		-webkit-align-content: $value;
+		-moz-align-content: $value;
+		@if $value == flex-start {
+			-ms-flex-line-pack: start;
+		} @else if $value == flex-end {
+			-ms-flex-line-pack: end;
+		} @else {
+			-ms-flex-line-pack: $value;
+		}
+	}
+	align-content: $value;
+}

data/stylesheets/gridle/_functions.scss

@@ -4,15 +4,15 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-/**
- * Str replace
- *
- * @param {string}  $string    String that you want to replace
- * @param {string}  $substr    String that is to be replaced by `$newsubstr`
- * @param {string}  $newsubstr String that replaces `$substr`
- * @param {number*} $all       Flag for replaceing all (1+) or not (0)
- * @return {string}
- */
+//
+// Str replace
+//
+// @param {string}  $string    String that you want to replace
+// @param {string}  $substr    String that is to be replaced by `$newsubstr`
+// @param {string}  $newsubstr String that replaces `$substr`
+// @param {number*} $all       Flag for replaceing all (1+) or not (0)
+// @return {string}
+//
 @function str-replace($string, $substr, $newsubstr, $all: 0) {
 	$position-found: str-index($string, $substr);
 	$processed: ();
@@ -40,44 +40,146 @@
 	@return $string;
 }
 
-/**
- * Map set
- *
- * @param 	Map 	$map 		The map to use
- * @param 	String 	$key 		The key to update
- * @param 	Mixed 	$value 		The new value
- * @return 	Map 			The new map
- */
+//
+// Map set
+//
+// @param 	Map 	$map 		The map to use
+// @param 	String 	$key 		The key to update
+// @param 	Mixed 	$value 		The new value
+// @return 	Map 			The new map
+//
 @function map-set($map, $key, $value) {
 	$new: ($key: $value);
 	@return map-merge($map, $new);
 }
 
+//
+// Remove item from list
+//
+@function remove-nth($list, $index) {
+  $result: null;
+		
+  @if type-of($index) != number {
+	@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  }
+
+  @else if $index == 0 {
+	@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  }
+
+  @else if abs($index) > length($list) {
+	@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  }
+
+  @else {
+	$result: ();
+	$index: if($index < 0, length($list) + $index + 1, $index);  
+
+	@for $i from 1 through length($list) {
+	  @if $i != $index {
+		$result: append($result, nth($list, $i));
+	  }
+	}
+  }
+		
+  @return $result;
+}
+
+//
+// List shift
+//
+// @param 	List 	$list 		The list to use
+// @return 	List 				The processed list
+//
+@function list-shift($list) {
+	@return remove-nth($list,1);
+}
+
+//
+// List pop
+//
+// @param 	List 	$list 		The list to use
+// @return 	List 				The processed list
+//
+@function list-pop($list) {
+	@return remove-nth($list,length($list));
+}
+
+//
+// In map
+// Determine if something is in the provided map
+//
+// @param 	Map 	$map 		The map to use
+// @param 	Mixed 	$needle		What to search
+// @return 	Boolean				True|false
+//
+@function in-map($map, $needle) {
+	@each $v in $map {
+		@if $v == $needle {
+			@return true;
+		}
+	}
+	@return false;
+}
+
+
+//
+// Get states count
+// 
+// @return 	int 	The number of states defined
+//
+@function gridle_states_count() {
+	@return length($_gridle_states);
+}
+
+
+//
+// Get the current state
+//
+@function gridle_current_state() {
+	@return $_gridle_current_state;
+}
+
+
+//
+// Get the current state name
+//
+@function gridle_current_state_name() {
+	@return $_gridle_current_stateName;
+}
 
-/**
- * Get the column width in percent for the global or a specific context
- *
- * @param 	int 		$columns 					The number of columns to calculate
- * @param 	int 		$context : $gridle-columns-count 	 	The context to use
- * @return 	percentage 							The width in percent
- */
-@function gridle_get_column_width(
+
+//
+// Get the column width in percent for the global or a specific context
+//
+// @param 	int 		$columns 					The number of columns to calculate
+// @param 	int 		$context : $gridle-columns-count 	 	The context to use
+// @return 	percentage 							The width in percent
+//
+@function gridle_column_width(
 	$columns : 1,
 	$stateMap-or-stateName : null
 ) {
+	$context : gridle_get_state_var(context, $stateMap-or-stateName);
 	@return percentage(1 / $context * $columns);
 }
 
 
-/**
- *  Get a state map
- *
- * @param 	string 		$name 		The name of the state to get
- * @return 	map 				A state map object
- */
-@function _gridle_get_state(
-	$stateMap-or-stateName
+//
+//  Get a state map
+//
+// @param 	string 		$name 		The name of the state to get
+// @return 	map 				A state map object
+//
+@function gridle_get_state(
+	$stateMap-or-stateName : current
 ) {
+
+	// check if need to return the current state
+	@if $stateMap-or-stateName == current {
+		@return gridle_current_state();
+	}
+
 	// check if has a state named like this
 	@if (type-of($stateMap-or-stateName) == string
 		and  map-has-key($_gridle_states, unquote("#{$stateMap-or-stateName}")))
@@ -85,11 +187,25 @@
 		@return map-get($_gridle_states, unquote("#{$stateMap-or-stateName}"));
 	}
 
+	// check if it's a registered state as map passed
+	@if type-of($stateMap-or-stateName) == map
+		and map-get($stateMap-or-stateName, name) {
+		$name : map-get($stateMap-or-stateName, name);
+		@if gridle_has_state($name) {
+			@return $stateMap-or-stateName;
+		}
+	}
+
 	// a map is passed, so it's a state himself
 	@if $stateMap-or-stateName
 		and type-of($stateMap-or-stateName) == map
 	{
-		@return map-merge($_gridle-settings, $stateMap-or-stateName);
+		// create a new state by merging given one with defaul one
+		$state : map-merge($_gridle-settings, $stateMap-or-stateName);
+		// set the name with random name
+		$state : map-set($state, name, unique-id());
+		// return the custom state
+		@return $state;
 	}
 
 	// return the default one if exist
@@ -103,13 +219,13 @@
 }
 
 
-/**
- * Check if a state exist :
- *
- * @param 	string 		$name 		The name of the state to check
- * @return 	Boolean 			true is exist
- */
-@function _gridle_has_state(
+//
+// Check if a state exist :
+//
+// @param 	string 		$name 		The name of the state to check
+// @return 	Boolean 			true is exist
+//
+@function gridle_has_state(
 	$stateName
 ) {
 	@if map-has-key($_gridle_states, unquote("#{$stateName}")) {
@@ -120,54 +236,25 @@
 }
 
 
-/**
- * Get the media queries variables :
- *
- * @param 	int 		$index 	 	The media query indes
- * @param 	String 		$var 		The media query variable name
- * @return 	String|int 			The variable value
- */
-@function _gridle_get_state_var(
-	$stateName,
-	$var 	: "name"
-) {
-
-	// get the state :
-	$state : _gridle_get_state($stateName);
-
-	// check ig state and if has the variable :
-	@if $state
-		  and map-has-key($state,unquote("#{$var}"))
-	{
-		@return map-get($state,unquote("#{$var}"));
-	}
-
-	// nothing getted :
-	@return null;
-}
-
-
-/**
- * Get a variable
- *
- * @param 	String 		$varName 				The variable name
- * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
- * @return 	Mixed 							The finded value
- */
-@function _gridle_get_var_value(
+//
+// Get a variable
+//
+// @param 	String 		$varName 				The variable name
+// @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
+// @return 	Mixed 							The finded value
+//
+@function gridle_get_state_var(
 	$varName,
 	$stateMap-or-stateName : null
 ) {
 	// if is a state :
 	$state : null;
 
-	// get the state (if no state find, return the default one) :
-	$state : _gridle_get_state($stateMap-or-stateName);
+	// get the state (if no state find, return the current one) :
+	$state : gridle_get_state($stateMap-or-stateName);
 
-	// extend default state with given state :
-	$props : map-merge($_gridle-settings, $state);
-
-	@if map-has-key($props, unquote("#{$varName}")) {
+	// check if has key
+	@if map-has-key($state, unquote("#{$varName}")) {
 		@return map-get($state, unquote("#{$varName}"));
 	}
 	
@@ -176,20 +263,20 @@
 }
 
 
-/**
- * Set a variable in a state
- * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
- * @param  	String $var                    		Variable name to assign
- * @param  	Mixed $newValue          		The new value to assign
- * @return 	List                         			The states list (full)
- */
-@function _gridle_set_state_var(
-	$stateName,
+//
+// Set a variable in a state
+// @param 	Mixed $stateName-or-stateIndex 	The state name of state index
+// @param  	String $var                    		Variable name to assign
+// @param  	Mixed $newValue          		The new value to assign
+// @return 	List                         			The states list (full)
+//
+@function gridle_set_state_var(
 	$var,
-	$newValue
+	$newValue,
+	$stateName : default
 ) {
 	// get the state :
-	$state : _gridle_get_state($stateName);
+	$state : gridle_get_state($stateName);
 
 	// check ig state and if has the variable :
 	@if $state
@@ -210,14 +297,72 @@
 }
 
 
-/**
- * Generate a column
- *
- * @param 	String 		$name 			The column name (often count)
- * @param 	int 		$columns 		The column count that the column will take
- * @param 	int 		$context 		The context on witch the with will be calculed
- * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
- */
+//
+// get the registered gridle states
+//
+@function gridle_get_states() {
+	@return $_gridle_states;
+}
+
+
+//
+// Get the states names
+//
+@function gridle_get_states_names() {
+	$list : ();
+	@each $stateName, $state in $_gridle_states {
+		$list : append($list, $stateName);
+	}
+	@return $list;
+}
+
+
+//
+// Get the apply css for map for a certain class and state
+//
+@function gridle_get_apply_css_for_map(
+	$for,
+	$stateName : default
+) {	
+	// check if has some extend for this state
+	$map : map-get($_gridle_apply_css_for, $stateName);
+	@if $map == null { @return null; }
+
+	// check if has some extend for the requested for
+	$extend : map-get($map, $for);
+	
+	// return the resulting extend map
+	@return $extend;
+}
+
+
+//
+// Get the extend map for a certain class and state
+//
+@function gridle_get_extend_class_map(
+	$for,
+	$stateName : default
+) {	
+	// check if has some extend for this state
+	$map : map-get($_gridle_extend_base_classes, $stateName);
+	@if $map == null { @return null; }
+
+	// check if has some extend for the requested for
+	$extend : map-get($map, $for);
+	
+	// return the resulting extend map
+	@return $extend;
+}
+
+
+//
+// Generate a column
+//
+// @param 	String 		$name 			The column name (often count)
+// @param 	int 		$columns 		The column count that the column will take
+// @param 	int 		$context 		The context on witch the with will be calculed
+// @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
+//
 @function _gridle_create_column(
 	$name,
 	$columns,
@@ -233,79 +378,262 @@
 }
 
 
-/**
- * Generate classname
- *
- * @param 	List 		$parrern 	The pattern to use to generate classname
- * @param 	String 		$state 		The state
- * @param 	int 		$count 		The column count
- */
+// get columns names in a list
+@function gridle_get_columns(
+	$state : default
+) {
+	// get variables
+	$context : gridle_get_state_var(context, $state);
+	$name-multiplicator : gridle_get_state_var(name-multiplicator, $state);
+
+	// get specials columns
+	$columnsMap : map-merge((), $_gridle_columns);
+
+	// loop through context
+	@for $i from 0 through $context {
+
+		// name
+		$columnName : "#{$i*$name-multiplicator}";
+		$columnWidth : $i * $name-multiplicator;
+
+		// // create a column
+		$col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
+
+		// // add column in columns map
+		$columnsMap : map-set($columnsMap, $columnName,  $col);
+	}	
+
+	// return columns
+	@return $columnsMap;
+}
+
+
+//
+// Get the padding value
+//
+@function _gridle_forge_gutters_map(
+	$side-or-size,
+	$state : current
+) {
+	$map : ();
+	// check if is number passed
+	@if type-of($side-or-size) == map {
+		@each $side in (top right bottom left) {
+			@if map-get($side-or-size, $side) {
+				$map : map-set($map, $side, map-get($side-or-size, $side));
+			} @else {
+				$map : map-set($map, $side, 0);
+			}
+		}
+	} @else if type-of($side-or-size) == number {
+		$map : (
+			top : 0,
+			right : $side-or-size * .5,
+			bottom : 0,
+			left : $side-or-size * .5
+		);
+	} @else if type-of($side-or-size) == list or type-of($side-or-size) == string {
+
+		// check if is a full number list	
+		$list-number : true;
+		@each $s in $side-or-size {
+			@if type-of($s) != number {
+				$list-number : false;
+			}
+		}
+
+		@if $list-number {
+
+			@if length($side-or-size) == 2 {
+				$val1 : nth($side-or-size,1) * .5;
+				$val2 : nth($side-or-size,2) * .5;
+				$map : (
+					top : $val1,
+					right : $val2,
+					bottom : $val1,
+					left : $val2
+				)
+			} @else if length($side-or-size) == 4 {
+				$map : (
+					top : nth($side-or-size,1),
+					right : nth($side-or-size,2),
+					bottom : nth($side-or-size,3),
+					left : nth($side-or-size,4)
+				)
+			}
+		
+		} @else {
+			// forge the map with registered values
+			@each $side in (top right bottom left) {
+				@if index($side-or-size, $side) {
+					$map : map-set($map, $side, gridle_get_state_var("gutter-#{$side}", $state));
+				} @else {
+					$map : map-set($map, $side, 0);
+				}
+			}
+			// @debug("get gutters from registered #{inspect($map)}");
+		}
+	} @else {
+		// unable to generate a gutter map
+		@return false;
+	}
+
+	// return the padding map
+	@return $map;
+}
+
+
+//
+// Get the attribute selector
+// 
+@function gridle_selector(
+	$for,
+	$states : null,
+	$values : null
+) {
+	$sel : ();
+
+	@if length($for) > 1 {
+		@each $f in $for {
+			$sel : append($sel, gridle_selector($f, $states, $values), comma);
+		}
+	} @else {
+
+		// get all states if not specified
+		@if $states == null {
+			$states : gridle_get_states_names();
+		}
+
+		// get the pattern
+		$pattern : map-get($_gridle-packages, $for);
+		$pattern : map-get($pattern, classname);
+
+		@each $stateName in $states {
+			@if $values != null {
+				$sel : append($sel, _gridle_classname($for, $stateName, $values), comma);
+			} @else if index($pattern, '%column') {
+				@each $columnName, $column in gridle_get_columns() {
+					$sel : append($sel, _gridle_classname($for, $stateName, $columnName), comma);
+				}
+			} @else if index($pattern, '%column-count') {
+				@for $i from 0 through length(gridle_get_columns()) {
+					$sel : append($sel, _gridle_classname($for, $stateName, $i), comma);
+				}
+				@if $for == flex-order {
+					$sel : append($sel, _gridle_classname($for, $stateName, first), comma);
+					$sel : append($sel, _gridle_classname($for, $stateName, last), comma);
+				}
+			} @else if index($pattern, '%align') {
+				@each $a in map-get($_gridle-names-tokens, align) {
+					$sel : append($sel, _gridle_classname($for, $stateName, $a), comma);
+				}
+			} @else if index($pattern, '%count') and $for == clear-each {
+				@each $idx, $clearEach in $_gridle_clear_classes {
+					$count : map-get($clearEach, clearEach);
+					$sel : append($sel, _gridle_classname($for, $stateName, $count), comma);
+				}
+			} @else if index($pattern, '%side') {
+				@each $side in map-get($_gridle-names-tokens, side) {
+					$sel : append($sel, _gridle_classname($for, $stateName, $side), comma);
+				}
+			} @else if index($pattern, '%float') {
+				@each $float in map-get($_gridle-names-tokens, float) {
+					$sel : append($sel, _gridle_classname($for, $stateName, $float), comma);
+				}
+			} @else if index($pattern, '%reverse') {
+				@each $reverse in map-get($_gridle-names-tokens, reverse) {
+					$sel : append($sel, _gridle_classname($for, $stateName, $reverse), comma);
+				}
+			} @else {
+				$sel : append($sel, _gridle_classname($for, $stateName), comma);
+			}
+		}
+	}
+	@return $sel;
+}
+
+
+//
+// Generate classname
+//
+// @param 	List 		$parrern 	The pattern to use to generate classname
+// @param 	String 		$state 		The state
+// @param 	int 		$count 		The column count
+//
 @function _gridle_classname(
-	$pattern,
+	$for,
 	$state : null,
-	$count : null
+	$value : null
 ) {
 
-	// init selector :
-	$sel : ".";
+	// get the pattern
+	$pattern : $for;
+	@if type-of($for) == string {
+		$pattern : map-get($_gridle-packages, $for);
+		$pattern : map-get($pattern, classname);
+	}
 
 	// delete default :
 	@if unquote("#{$state}") == default {
 		$state : null;
 	}
-	
-	// add class prefix :
-	@if $gridle-class-prefix and $gridle-class-prefix != '' {
-		$sel : "#{$sel}#{$gridle-class-prefix}";
-		@if $gridle-class-separator {
-			$sel : "#{$sel}#{$gridle-class-separator}";
-		}
-	}
 
 	// construct class name :
-	$i : 1;
-	@each $var in $pattern {
-		
-		// replace tokens :
-		@if $var == '%state' and $state {
-			$sel : "#{$sel}#{$state}";
-		} 
-		@if $var == '%count' and $count {
-			$sel : "#{$sel}#{$count}";
-		}  
-		@if $var != '%state' and $var != '%count' and $var != '%-' and $var != '-' and $var != '--' and $var != '_' and $var != '__' and $var != '%prefix' {
-			$sel : "#{$sel}#{$var}";
+	$removeSeparator : false;
+	@for $i from length($pattern) through 1 {
+		$var : nth($pattern, $i);
+
+		@if $var == '@' {
+			$pattern : set-nth($pattern, $i, '\\@');
 		}
 
-		// handle separators :
-		@if ($var == '%-' or $var == '-' or $var == '--' or $var == '_' or $var == '__') and $i < length($pattern) {
-			$index : $i + 1;
-			$value : nth($pattern, $index);
-			@if $value != '%state' and $value != '%count' and $value != '%-' and $value != '-' and $value != '--' and $value != '_' and $value != '__' and $value != '%prefix' {
-				@if $var == '%-' {
-					$sel : "#{$sel}#{$gridle-class-separator}";
-				} @else {
-					$sel : "#{$sel}#{$var}";
-				}
+		@if index($_gridle_names-separators, $var) {
+			// check if need to remove separator
+			@if $removeSeparator {
+				$pattern : set-nth($pattern, $i, null);
 			}
-			@if $value == '%state' and $state {
-				@if $var == '%-' {
-					$sel : "#{$sel}#{$gridle-class-separator}";
-				} @else {
-					$sel : "#{$sel}#{$var}";
-				}
+			$removeSeparator : false;
+		} @else if $var == "%state" {
+			@if $state == null {
+				$pattern : set-nth($pattern, $i, null);
+				$removeSeparator : true;
+			} @else {
+				$pattern : set-nth($pattern, $i, $state);
 			}
-			@if $value == '%count' and $count {
-				@if $var == '%-' {
-					$sel : "#{$sel}#{$gridle-class-separator}";
-				} @else {
-					$sel : "#{$sel}#{$var}";
+		} @else if $var and str-index($var, '%') == 1 {
+			$token : str-slice($var, 2);
+			// check that the value is part of the token
+			$tokens : map-get($_gridle-names-tokens, $token);
+			@if $tokens {
+				$pattern : set-nth($pattern, $i, $value);
+				@if $value == null {
+					$removeSeparator : true;
 				}
 			}
 		}
+	}
 
-		// update i :
-		$i : $i + 1;
+	// clean selector
+	$list: ();
+    @each $var in $pattern {
+        @if $var {
+            $list: append($list, $var);
+        }
+    }
+    $pattern : $list;
+
+	// build selector
+	$sel : "";
+	$prefix : gridle_get_state_var(classes-prefix, $state);
+	@each $part in $pattern {
+		@if $part {
+			$sel : "#{$sel}#{$part}";
+		}
+	}
+	@if $prefix and str-slice($sel,1,str_length($prefix)) != $prefix {
+		$sel : ".#{$prefix}#{$sel}";
+	} @else {
+		$sel : ".#{$sel}";
 	}
 
 	// return generated class :
@@ -313,21 +641,103 @@
 }
 
 
-/**
- * Get the media query for a particular state, or with, etc...
- *
- * @param 	Mixed 		$state-or-min-width 		The state name of the min with
- * @param 	Mixed 		$max-width 			The max width if first param is a min width
- * @return 	String 						The media query string without the @media
- */
-@function _gridle_get_media_query(
-	$state-or-settings
+//
+// Get the current driver
+//
+@function gridle_get_driver() {
+	@return $_gridle-driver;
+}
+
+
+//
+// Is driver
+//
+@function gridle_is_driver($driver) {
+	@each $d in $driver {
+		@if $d == gridle_get_driver() {
+			@return true;
+		}
+	}
+	@return false;
+}
+
+
+//
+// Check if we need to generate the class or not
+//
+// @param 	List 		$for 			Name of the class map
+// @param 	List 		$what 			The map that set which class map to include and exclude
+// @return 	Boolean 					true if need to generate, false if not
+//
+@function _gridle_need_to_generate(
+	$package,
+	$what
+) {
+	// check that the wanted package exist in system
+	@if map-get($_gridle-packages, $package) {
+		$package : map-get($_gridle-packages, $package);
+		$package : map-get($package, package);
+	} @else {
+		@return false;
+	}
+
+	// if we have a what param, need to check if the package is needed
+	@if $what and $what != all {
+
+		// check if we have only some - in the states list
+		// mean that we want to only remove these specified states
+		// from the all states list
+		$onlyRemove : true;
+		@each $w in $what {
+			@if str-slice($w,1,1) != '-' {
+				$onlyRemove : false;
+			}
+		}
+
+		@if $onlyRemove {
+			@each $name in $package {
+				@if index($what, unquote("-#{$name}")) {
+					@return false;
+				}
+			}
+			@return true;
+		} @else {
+			@each $name in $package {
+				@if index($what, unquote("#{$name}")) {
+					@return true;
+				}
+			}
+			@return false;
+		}
+	}
+	// we don't have a what param so the package is
+	@return true;
+}
+
+
+//
+// Check if is in generate mode
+//
+@function _gridle_is_in_generate_phase() {
+	@return $_gridle_is_in_generate_phase;
+}
+
+
+//
+// Get the media query for a particular state, or with, etc...
+//
+// @param 	Mixed 		$state-or-min-width 		The state name of the min with
+// @param 	Mixed 		$max-width 			The max width if first param is a min width
+// @return 	String 						The media query string without the @media
+//
+@function gridle_get_media_query(
+	$state-or-settings : current
 ) {
 	// check if is a string :
 	$state : null;
 	@if type-of($state-or-settings) == string
 	{
-		$state : _gridle_get_state($state-or-settings);
+		$state : gridle_get_state($state-or-settings);
 	}
 	@else if $state-or-settings == null
 	{
@@ -374,14 +784,4 @@
 	{
 		@return null;
 	}
-}
-
-
-/**
- * Get states count
- * 
- * @return 	int 	The number of states defined
- */
-@function _gridle_get_states_count() {
-	@return length($_gridle_states) / length($_gridle_states_vars_pattern);
 }