gridle 1.3.2 → 1.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 89965d5de0df0540dc4eb00f51534ccac70bd6de
-  data.tar.gz: 47dd01c3742b0e03d6dc727719e4862326e76521
+  metadata.gz: 6c99b2ecc45c9cc8c02c66f8f2a083c680f2ea51
+  data.tar.gz: 31cbc2085c7411d0e821b2d78fc4c51b92f1f185
 SHA512:
-  metadata.gz: 21d483f133c01e9d1fa267856a4d2101f9cbccf46c289c9db46240aaae48ccc4fc0ee63716ff8a6403b926d235c8af36ee00e3e95d073bc996e2a7917eaaef81
-  data.tar.gz: f27d30d53b4afb407744243ebf20ebb5473afc9ec11ac538979482d2b660b0dd03faf2855c4573e6d5db10cd3fd8b323caf93ecc96c9f5f95ddbbd67d502e261
+  metadata.gz: ea2a4913b98a8277baf084932cff4b8cd8b655ef149448408f4c9f9eaa740bc384c6788cfe5a43bedba38c9709edd037fcb2542ae596af092574544dbc8a5cc4
+  data.tar.gz: 3f2822149f0b360dabd0f6c98534aa531fc685024b76897f50f9c1796f4c5d6360ccd4e2672f1afd61a758221cbc27baa9c510f97511559e5d14706240ff43d4

data/lib/gridle.rb

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

data/stylesheets/gridle/_common-mixins.scss

@@ -5,7 +5,7 @@
 // |------------------------------------------------------
 
 @mixin _gridle_container_common(
-	$state : null
+	$state : default
 ) {
 	@extend %gridle-simple-clearfix;
 	@extend %gridle-container-common;
@@ -25,25 +25,29 @@
 	{
 		// vars :
 		$direction : _gridle_get_var_value(direction, $state);
+		$classes : _gridle_get_var_value(classes, $state);
 		$gutter-width : _gridle_get_var_value(gutter-width, $state);
 		$debug : _gridle_get_var_value(debug, $state);
 		
-		@include gridle_state($state) {
-			@if $direction == rtl {
-				float:right;
-				direction:rtl;
-			} @else {
-				float:left;
-				direction:ltr;
-			}
+		@if $classes
+		{
+			@include gridle_state($state) {
+				@if $direction == rtl {
+					float:right;
+					direction:rtl;
+				} @else {
+					float:left;
+					direction:ltr;
+				}
 
-			padding-left$gutter-width/2;
-			padding-right:$gutter-width/2;
-		}
-		
-		@if $debug == true {
-			#{$gridle-debug-selector} {
-				@extend %gridle-grid-debug-common;
+				padding-left:$gutter-width/2;
+				padding-right:$gutter-width/2;
+			}
+			
+			@if $debug == true {
+				#{$gridle-debug-selector} {
+					@extend %gridle-grid-debug-common;
+				}
 			}
 		}
 	}
@@ -53,7 +57,7 @@
 	@extend %gridle-parent-common;
 }
 @mixin _gridle_push_common(
-	$state : null
+	$state : default
 ) {
 	$debug : _gridle_get_var_value(debug, $state);
 
@@ -67,7 +71,7 @@
 	}
 }
 @mixin _gridle_pull_common(
-	$state : null
+	$state : default
 ) {
 	$debug : _gridle_get_var_value(debug, $state);
 
@@ -80,7 +84,7 @@
 	}
 }
 @mixin _gridle_prefix_common(
-	$state : null
+	$state : default
 ) {
 	$debug : _gridle_get_var_value(debug, $state);
 	@if $debug == true {
@@ -90,7 +94,7 @@
 	}
 }
 @mixin _gridle_suffix_common(
-	$state : null
+	$state : default
 ) {
 	$debug : _gridle_get_var_value(debug, $state);
 	@if $debug == true {

data/stylesheets/gridle/_default-states.scss

@@ -0,0 +1,35 @@
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Default states
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+// retina
+@include gridle_register_state("retina", (
+	query : "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)",
+	classes : false
+) );
+
+// tv
+@include gridle_register_state("tv", (
+	query : "only tv",
+	classes : false
+) );
+
+// print
+@include gridle_register_state("print", (
+	query : "only print",
+	classes : false
+) );
+
+// portrait
+@include gridle_register_state("portrait", (
+	query : "only screen and (orientation: portrait)",
+	classes : false
+) );
+
+// landscape
+@include gridle_register_state("landscape", (
+	query : "only screen and (orientation: landscape)",
+	classes : false
+) );

data/stylesheets/gridle/_functions.scss

@@ -44,17 +44,25 @@
 	$stateMap-or-stateName
 ) {
 	// check if has a state named like this :
-	@if (map-has-key($_gridle_states, unquote($stateMap-or-stateName)))
+	@if (type-of($stateMap-or-stateName) == string
+		and  map-has-key($_gridle_states, unquote($stateMap-or-stateName)))
 	{
 		@return map-get($_gridle_states, unquote($stateMap-or-stateName));
 	} 
 
 	// nothing finded, so return the default state :
 	@if $stateMap-or-stateName
+		and type-of($stateMap-or-stateName) == map
 	{
 		@return map-merge($_gridle-settings, $stateMap-or-stateName);
 	}
 
+	// return the default one if exist
+	@if map-has-key($_gridle_states, default)
+	{
+		@return map-get($_gridle_states, default);
+	}
+
 	// nothing finded, return the default state :
 	@return $_gridle-settings;
 }
@@ -178,12 +186,14 @@
 @function _gridle_create_column(
 	$name,
 	$columns,
-	$context
+	$context,
+	$name-multiplicator : 1 // used to extend the state on custom registered columns
 ) {
 	@return (
 		name : $name,
 		columns : $columns,
-		context : $context
+		context : $context,
+		name-multiplicator : $name-multiplicator
 	);
 }
 
@@ -325,26 +335,6 @@
 		}
 
 	} 
-	@else if unquote($state-or-settings) == print
-	{
-		@return "only print";
-	} 
-	@else if unquote($state-or-settings) == tv
-	{
-		@return "only tv";
-	}
-	@else if unquote($state-or-settings) == portrait
-	{
-		@return "only screen and (orientation: portrait)";
-	}
-	@else if unquote($state-or-settings) == landscape
-	{
-		@return "only screen and (orientation: landscape)";
-	}
-	@else if unquote($state-or-settings) == retina
-	{
-		@return "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
-	}
 	@else
 	{
 		@return null;

data/stylesheets/gridle/_generate-mixins.scss

@@ -34,10 +34,16 @@
 			$stateName : map-get($stateName, name);
 		}
 
+		// classes :
+		$classes : _gridle_get_var_value(classes, $stateName);
+
 		// genrate the classname :
-		@include gridle_state($stateName, false) {
-			#{_gridle_classname($pattern, $stateName)} {
-				@content;
+		@if $classes
+		{
+			@include gridle_state($stateName, false) {
+				#{_gridle_classname($pattern, $stateName)} {
+					@content;
+				}
 			}
 		}
 	}
@@ -52,30 +58,6 @@
 	$what : null
 ) {
 	// helpers :
-	@if $what == null or index($what, hide) or index($what, helpers) {
-		#{_gridle_classname($gridle-hide-name-pattern, $state)} {
-			@include gridle_hide(null);
-		}
-	}
-
-	@if $what == null or index($what, not_visible) or index($what, helpers) {
-		#{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
-			@include gridle_not_visible(null);
-		}
-	}
-
-	@if $what == null or index($what, show) or index($what, helpers) {
-		#{_gridle_classname($gridle-show-name-pattern, $state)} {
-			@include gridle_show(null);
-		}
-	}
-
-	@if $what == null or index($what, visible) or index($what, helpers) {
-		#{_gridle_classname($gridle-visible-name-pattern, $state)} {
-			@include gridle_visible(null);
-		}
-	}
-
 	@if $what == null or index($what, float) or index($what, helpers) {
 		#{_gridle_classname($gridle-float-left-name-pattern, $state)} {
 			@include gridle_float(left);
@@ -173,6 +155,36 @@
 		}
 	}
 
+	/**
+	 * Visible, hide, etc...
+	 */
+	@if $what == null or index($what, hide) or index($what, helpers) {
+		#{_gridle_classname($gridle-hide-name-pattern, $state)} {
+			@include gridle_hide(null);
+		}
+	}
+
+	@if $what == null or index($what, not_visible) or index($what, helpers) {
+		#{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
+			@include gridle_not_visible(null);
+		}
+	}
+
+	@if $what == null or index($what, show) or index($what, helpers) {
+		#{_gridle_classname($gridle-show-name-pattern, $state)} {
+			@include gridle_show(null);
+		}
+		#{_gridle_classname($gridle-show-inline-name-pattern, $state)} {
+			@include gridle_show_inline(null);
+		}
+	}
+
+	@if $what == null or index($what, visible) or index($what, helpers) {
+		#{_gridle_classname($gridle-visible-name-pattern, $state)} {
+			@include gridle_visible(null);
+		}
+	}
+
 	/**
 	 * Clear each class :
 	 */
@@ -184,14 +196,14 @@
 			$clearWhat : map-get($clearMap, clearWhat);
 			// generate the class :
 			#{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
-				@include _gridle_clear_each($clearCount, $clearWhat, $state);
+				@include _gridle_clear_each($clearCount, $clearWhat);
 			}
 		}
 	}
 
 	// debug colors :
 	$debug : _gridle_get_var_value(debug, $state);
-	@if $debug {
+	@if $debug and ( $what == null or index($what, debug_colors) or index($what, helpers) ) {
 		// debug color classes :
 		#{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
 			#{$gridle-debug-selector} {
@@ -304,15 +316,37 @@
 	$what : null,
 	$scope : null
 ) {
-	// check if a scope exist :
-	@if $scope {
-		// wrapp grid into scope :
-		.#{$scope} {
-			@include _gridle_generate_classes($stateName, $what, true);
+	// if the what parameter is not null, mean that we need to generate only certain classes in a certain order :
+	@if $what
+	{
+		// loop on each what item to generate the corresponding classes :
+		@each $w in $what
+		{
+			// check if a scope exist :
+			@if $scope {
+				// wrapp grid into scope :
+				.#{$scope} {
+					@include _gridle_generate_classes($stateName, ( $w ), true);
+				}
+			} @else {
+				// generate classes :
+				@include _gridle_generate_classes($stateName, ( $w ), false);
+			}
+		}
+	}
+	@else
+	{
+		// don't have any "what" parameter so generate all the classes
+		// check if a scope exist :
+		@if $scope {
+			// wrapp grid into scope :
+			.#{$scope} {
+				@include _gridle_generate_classes($stateName, null, true);
+			}
+		} @else {
+			// generate classes :
+			@include _gridle_generate_classes($stateName, null, false);
 		}
-	} @else {
-		// generate classes :
-		@include _gridle_generate_classes($stateName, $what, false);
 	}
 }
 $_gridle_generateOnlyOnce : true; // keep track of generate once classes
@@ -344,7 +378,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 		// | ------------------------
 	 
 		// generate container class :
-		@if $what == null or index($what, container)
+		@if $what == null or index($what, container) or index($what, default)
 		{
 			$container-selector : ();
 			$container-selector : append( $container-selector, unquote(_gridle_classname($gridle-container-name-pattern)), comma);
@@ -359,7 +393,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 		// | ------------------------
 
 		// parent common css :
-		@if $what == null or index($what, parent)
+		@if $what == null or index($what, parent) or index($what, default)
 		{
 			$parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
 			#{$parentSelector} {
@@ -374,7 +408,10 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 		// // | ------------------------
 	 
 		// // generate json settings :
-		@include gridle_generate_json_settings();
+		@if $gridle-generate-json-settings
+		{
+			@include gridle_generate_json_settings();
+		}
 
 	}
 
@@ -428,9 +465,10 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 				
 				// name :
 				$columnName : "#{$j*$name-multiplicator}";
+				$columnWidth : $j * $name-multiplicator;
 
 				// // create a column :
-				$col : _gridle_create_column($columnName, $j,  $context);
+				$col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
 
 				// // add column in columns map :
 				$columnsMap : map-set($columnsMap, $columnName,  $col);
@@ -440,19 +478,19 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 			@each $columnName, $column in $columnsMap {
 		 	
 				// add selector :
-				@if $what == null or index($what, grid) {
+				@if $what == null or index($what, grid) or index($what, default) {
 					$grid-common-selector : append( $grid-common-selector, unquote(_gridle_classname($gridle-grid-name-pattern, $media, $columnName)), comma );
 				}
-				@if $generate-push-classes and ($what == null or index($what, push)) {
+				@if $generate-push-classes and ($what == null or index($what, push) or index($what, default)) {
 					$push-common-selector : append( $push-common-selector, unquote(_gridle_classname($gridle-push-name-pattern, $media, $columnName)), comma );
 				}
-				@if $generate-pull-classes and ($what == null or index($what, pull)) {
+				@if $generate-pull-classes and ($what == null or index($what, pull) or index($what, default)) {
 					$pull-common-selector : append( $pull-common-selector, unquote(_gridle_classname($gridle-pull-name-pattern, $media, $columnName)), comma );
 				}
-				@if $generate-prefix-classes and ($what == null or index($what, prefix)) {
+				@if $generate-prefix-classes and ($what == null or index($what, prefix) or index($what, default)) {
 					$prefix-common-selector : append( $prefix-common-selector, unquote(_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)), comma );
 				}
-				@if $generate-suffix-classes and ($what == null or index($what, suffix)) {
+				@if $generate-suffix-classes and ($what == null or index($what, suffix) or index($what, default)) {
 					$suffix-common-selector : append( $suffix-common-selector, unquote(_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)), comma );
 				}
 			}
@@ -460,27 +498,27 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 	}
  
 	// common css :
-	@if  $what == null or index($what, grid) {
+	@if  $what == null or index($what, grid) or index($what, default) {
 		#{$grid-common-selector} {
 			@include _gridle_grid_common();
 		}
 	}
-	@if  $what == null or index($what, push) {
+	@if  $what == null or index($what, push) or index($what, default) {
 		#{$push-common-selector} {
 			@include _gridle_push_common();
 		}
 	}
-	@if  $what == null or index($what, pull) {
+	@if  $what == null or index($what, pull) or index($what, default) {
 		#{$pull-common-selector} {
 			@include _gridle_pull_common();
 		}
 	}
-	@if  $what == null or index($what, prefix) {
+	@if  $what == null or index($what, prefix) or index($what, default) {
 		#{$prefix-common-selector} {
 			@include _gridle_prefix_common();
 		}
 	}
-	@if  $what == null or index($what, suffix) {
+	@if  $what == null or index($what, suffix) or index($what, default) {
 		#{$suffix-common-selector} {
 			@include _gridle_suffix_common();
 		}
@@ -504,16 +542,16 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 		$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
 		$generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
 
-		// parent common css :
-		$parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
-		#{$parentSelector} {
-			@extend %gridle-clearfix;
-			@extend %gridle-parent-common;
-		}
-
 		// generate all media queries grid classes :
 		@if $classes == true {
 
+			// parent common css :
+			$parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
+			#{$parentSelector} {
+				@extend %gridle-clearfix;
+				@extend %gridle-parent-common;
+			}
+
 			// generate all the classes :
 			@include gridle_state($stateName, $has-parent) {
 		 
@@ -525,9 +563,10 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 					
 					// name :
 					$columnName : "#{$j*$name-multiplicator}";
+					$columnWidth : $j * $name-multiplicator;
 
 					// // create a column :
-					$col : _gridle_create_column($columnName, $j,  $context);
+					$col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
 
 					// // add column in columns map :
 					$columnsMap : map-set($columnsMap, $columnName,  $col);
@@ -539,34 +578,36 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 					// variables :
 					$columnsCount : map-get($column, columns);
 					$columnsContext : map-get($column, context);
+					$columnsNameMultiplicator : map-get($column, name-multiplicator);
 
 					// extend context in state (for columns) :
 					$extendedState : map-merge($state, (
-						context : $columnsContext
+						context : $columnsContext,
+						name-multiplicator : $columnsNameMultiplicator // inject the name multiplicator here getted from column to handle custom registered columns
 					));
 
 					// classes :
-					@if $what == null or index($what, grid) {
+					@if $what == null or index($what, grid) or index($what, default) {
 						#{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
 							@include _gridle($columnsCount, $extendedState);
 						}
 					}
-					@if $generate-push-classes == true and ($what == null or index($what, push)) {
+					@if $generate-push-classes == true and ($what == null or index($what, push) or index($what, default)) {
 						#{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
 							@include _gridle_push($columnsCount, $extendedState);
 						}
 					}
-					@if $generate-pull-classes == true and ($what == null or index($what, pull)) {
+					@if $generate-pull-classes == true and ($what == null or index($what, pull) or index($what, default)) {
 						#{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
 							@include _gridle_pull($columnsCount, $extendedState);
 						}
 					}
-					@if $generate-prefix-classes == true and ($what == null or index($what, prefix)) {
+					@if $generate-prefix-classes == true and ($what == null or index($what, prefix) or index($what, default)) {
 						#{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
 							@include _gridle_prefix($columnsCount, $extendedState);
 						}
 					}
-					@if $generate-suffix-classes == true and ($what == null or index($what, suffix)) {
+					@if $generate-suffix-classes == true and ($what == null or index($what, suffix) or index($what, default)) {
 						#{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
 							@include _gridle_suffix($columnsCount, $extendedState);
 						}   

data/stylesheets/gridle/_gridle.scss

@@ -8,7 +8,7 @@
 
 // |------------------------------------------------------
 // |------------------------------------------------------
-// Copyright (c) 2013 Olivier Bossel
+// 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
@@ -29,13 +29,13 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 // @created 	25.03.13
-// @updated 	21.05.14
+// @updated 	22.07.14
 // @author 	Olivier Bossel <olivier.bossel@gmail.com>
-// @version 	1.3.2
+// @version 	1.3.3
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-$_gridle-version : "1.3.2";
+$_gridle-version : "1.3.3";
 
 
 
@@ -128,3 +128,14 @@ $_gridle_states_debug_devices : (); 				// save the debug states devices
 // |------------------------------------------------------
 
 @import 'generate-mixins';
+
+
+
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// | Default states
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+@import 'default-states';

data/stylesheets/gridle/_mixins.scss

@@ -4,6 +4,92 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
+// 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);
+				}
+			} @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,
@@ -87,7 +173,7 @@
 
 // Container mixin :
 @mixin gridle_container(
-	$state : null
+	$state : default
 ) {
 	@include _gridle_container_common($state);
 }
@@ -97,7 +183,7 @@
 // Set the width of the specified grid column :
 @mixin gridle(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// common :
 	@include _gridle_grid_common();
@@ -112,7 +198,7 @@
 }
 @mixin _gridle(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -124,14 +210,14 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context * $columns);
+	$width : percentage(1 / $context * ($columns / $name-multiplicator) );
 
 	// set value :
 	width:$width;
 	
 	// ie7 support :
 	@if $ie7-support == true {
-		*width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
+		*width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
 	}
 	
 	// debug :
@@ -139,16 +225,16 @@
 		#{$gridle-debug-selector} {
 			&:before {
 				@if $name == default {
-					content:"grid-#{$name}-#{$columns * $name-multiplicator}";
+					content:"grid-#{$name}-#{$columns}";
 				} @else {
-					content:"grid-#{$name}-#{$columns * $name-multiplicator}" !important;
+					content:"grid-#{$name}-#{$columns}" !important;
 				}
 			}
 			&.parent:before {
 				@if $name == default {
-					content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}";
+					content:"grid-parent-#{$name}-#{$columns}";
 				} @else {
-					content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}" !important;
+					content:"grid-parent-#{$name}-#{$columns}" !important;
 				}
 			}
 		}
@@ -160,7 +246,7 @@
 // Push the element of the count of column wanted
 @mixin gridle_push(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// common :
 	@include _gridle_push_common($state);
@@ -176,7 +262,7 @@
 }
 @mixin _gridle_push(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// variables :
 	$name : _gridle_get_var_value(name, $state);
@@ -187,7 +273,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * $columns;
+	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
 	@if $direction == rtl { $width : $width*-1; }
 	left:$width;
 
@@ -196,9 +282,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"push-#{$name}-#{$columns * $name-multiplicator}";
+					content:"push-#{$name}-#{$columns}";
 				} @else {
-					content:"push-#{$name}-#{$columns * $name-multiplicator}" !important;
+					content:"push-#{$name}-#{$columns}" !important;
 				}
 			}
 		}
@@ -211,7 +297,7 @@
 // Pull the element of the count of column wanted
 @mixin gridle_pull(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// common :
 	@include _gridle_pull_common($state);
@@ -227,7 +313,7 @@
 }
 @mixin _gridle_pull(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -238,7 +324,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * $columns;
+	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
 	@if $direction == rtl { $width : $width*-1; }
 	right:$width;
 
@@ -247,9 +333,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"pull-#{$name}-#{$columns * $name-multiplicator}";
+					content:"pull-#{$name}-#{$columns}";
 				} @else {
-					content:"pull-#{$name}-#{$columns * $name-multiplicator}" !important;
+					content:"pull-#{$name}-#{$columns}" !important;
 				}
 			}
 		}
@@ -261,7 +347,7 @@
 // Push the element of the count of column wanted
 @mixin gridle_prefix(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// common :
 	@include _gridle_prefix_common($state);
@@ -277,7 +363,7 @@
 }
 @mixin _gridle_prefix(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -289,7 +375,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * $columns;
+	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
 
 	// set value :
 	@if $direction == rtl { margin-right:$width; }
@@ -300,9 +386,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"prefix-#{$name}-#{$columns * $name-multiplicator}";
+					content:"prefix-#{$name}-#{$columns}";
 				} @else {
-					content:"prefix-#{$name}-#{$columns * $name-multiplicator}" !important;
+					content:"prefix-#{$name}-#{$columns}" !important;
 				}
 			}
 		}
@@ -314,7 +400,7 @@
 // Pull the element of the count of column wanted
 @mixin gridle_suffix(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// common :
 	@include _gridle_suffix_common($state);
@@ -330,7 +416,7 @@
 }
 @mixin _gridle_suffix(
 	$columns,
-	$state : null
+	$state : default
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -342,7 +428,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * $columns;
+	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
 	
 	// set value :
 	@if $direction == rtl { margin-left:$width; }
@@ -353,9 +439,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"suffix-#{$name}-#{$columns * $name-multiplicator}";
+					content:"suffix-#{$name}-#{$columns}";
 				} @else {
-					content:"suffix-#{$name}-#{$columns * $name-multiplicator}" !important;
+					content:"suffix-#{$name}-#{$columns}" !important;
 				}
 			}
 		}
@@ -366,7 +452,7 @@
 // grid background :
 // Display the grid background debug
 @mixin gridle_grid_background(
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -378,7 +464,7 @@
 	}
 }
 @mixin _gridle_grid_background(
-	$state : null
+	$state : default
 ) {
 	
 	// variables :
@@ -408,21 +494,20 @@
 @mixin gridle_clear_each(
 	$clearEach,
 	$clearWhat : both,
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
 		@include gridle_state($state) {
-			@include _gridle_clear_each($clearEach, $clearWhat, $state);
+			@include _gridle_clear_each($clearEach, $clearWhat);
 		}
 	} @else {
-		@include _gridle_clear_each($clearEach, $clearWhat, $state);
+		@include _gridle_clear_each($clearEach, $clearWhat);
 	}
 }
 @mixin _gridle_clear_each(
 	$clearEach,
-	$clearWhat,
-	$state : null
+	$clearWhat
 ) {
 	> *:nth-child(#{$clearEach}n+1) {
 		clear : $clearWhat;
@@ -432,7 +517,7 @@
 
 // Grid centered :
 @mixin gridle_centered(
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -454,7 +539,7 @@
 
 // Grid parent :
 @mixin gridle_parent(
-	$state : null
+	$state : default
 ) {
 	// common :
 	@include _gridle_parent_common();
@@ -477,7 +562,7 @@
  */
 @mixin gridle_vertical_align(
 	$align : middle,
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -506,7 +591,7 @@
 // Hide on :
 // @param 	String 	$media  On what state
 @mixin gridle_hide(
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -525,7 +610,7 @@
 // Not visible on :
 // @param 	String 	$media 	What to hide (one of the 3 state classes name)
 @mixin gridle_not_visible(
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -544,7 +629,7 @@
 // Show on
 // @param 	String 	$media 	What to hide (one of the 3 state classes name)
 @mixin gridle_show(
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -560,10 +645,32 @@
 }
 
 
+/**
+ * Show inline
+ *
+ * @param 	String 		$state 		The state name
+ */
+@mixin gridle_show_inline(
+	$state : default
+) {
+	// 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;
+}
+
+
 // Visible on :
 // @param 	String 	$media 	On what state
 @mixin gridle_visible(
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -582,7 +689,7 @@
 // Gridle Right :
 @mixin gridle_float(
 	$float-direction : left,
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -605,7 +712,7 @@
 // @param 	String 	$state 				The state
 @mixin gridle_clear(
 	$clear-direction : both,
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -628,7 +735,7 @@
 // @param 	String 	$state 				The state
 @mixin gridle_no_gutter(
 	$side : left right,
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -641,7 +748,7 @@
 }
 @mixin gridle_no_margin(
 	$side : left right,
-	$state : null
+	$state : default
 ) {
 	@include gridle_no_gutter($side, $state);
 }
@@ -649,7 +756,7 @@
 	$side : left right
 ) {
 	@each $s in $side {
-		padding-#{$s} : 0 !important;
+		padding-#{$s} : 0;
 	}
 }
 
@@ -659,7 +766,7 @@
 // @param 	String 	$state 				The state
 @mixin gridle_gutter(
 	$side : left right,
-	$state : null
+	$state : default
 ) {
 	// check if need media query :
 	@if $state {
@@ -673,13 +780,13 @@
 // shortcut :
 @mixin gridle_margin(
 	$side : left right,
-	$state : null
+	$state : default
 ) {
 	@include gridle_gutter($side, $state);
 }
 @mixin _gridle_gutter(
 	$side : left right,
-	$state : null
+	$state : default
 ) {
 	$gutter-width : _gridle_get_var_value(gutter-width, $state);
 	@each $s in $side {

data/stylesheets/gridle/_settings-mixins.scss

@@ -13,7 +13,7 @@
 	$_gridle-settings : map-merge((
 		name : default,
 		min-width : null,
-		max-width : 99999999px,
+		max-width : null,
 		query : null,
 		classes : true,
 		context : 12,
@@ -126,7 +126,7 @@
  * @para m 	String 		$device 	The device to use (iphone, etc...)
  */
 @mixin gridle_set_debug_device(
-	$state : null,
+	$state : default,
 	$device : null
 ) {
 

data/stylesheets/gridle/_settings.scss

@@ -4,6 +4,8 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
+$gridle-generate-json-settings 			: true !default;
+
 $gridle-debug-selector 				: ".gridle-debug &, &.gridle-debug" !default;
 
 $gridle-class-prefix 					: '' !default;
@@ -26,6 +28,7 @@ $gridle-vertical-align-bottom-name-pattern 		: ('vertical','%-','align','%-','%s
 
 $gridle-hide-name-pattern 				: ('hide','%-','%state') !default;
 $gridle-show-name-pattern 				: ('show','%-','%state') !default;
+$gridle-show-inline-name-pattern 			: ('show','%-','inline','%-','%state') !default;
 $gridle-not-visible-name-pattern 			: ('not','%-','visible','%-','%state') !default;
 $gridle-visible-name-pattern 				: ('visible','%-','%state') !default;
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: gridle
 version: !ruby/object:Gem::Version
-  version: 1.3.2
+  version: 1.3.3
 platform: ruby
 authors:
 - Olivier Bossel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-22 00:00:00.000000000 Z
+date: 2014-07-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -35,6 +35,7 @@ files:
 - lib/gridle.rb
 - stylesheets/_gridle.scss
 - stylesheets/gridle/_common-mixins.scss
+- stylesheets/gridle/_default-states.scss
 - stylesheets/gridle/_functions.scss
 - stylesheets/gridle/_generate-mixins.scss
 - stylesheets/gridle/_gridle.scss