gridle 2.0.2 → 2.0.4

data/stylesheets/gridle/_generate-mixins.scss

@@ -446,19 +446,17 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 
 		// get the actual state
 		$state : gridle_get_state($stateName);
+		$classes : gridle_get_state_var(classes, $state);
 
-		// debug
-		@debug("Generate classes for state #{$stateName}");
+		// stop here if no classes wanted
+		@if $classes {
 
-		// scope all the classes in a media query
-		@include gridle_state($state, false) {
-
-			// setup vars :
-			$classes : gridle_get_state_var(classes, $state);
-
-			// stop here if no classes wanted
-			@if $classes {
+			// debug
+			@debug("Generate classes for state #{$stateName}");
 
+			// scope all the classes in a media query
+			@include gridle_state($state, false) {
+			
 				// generate all classes for columns
 				$i : 0;
 				@each $columnName, $column in gridle_get_columns($state) {
@@ -477,7 +475,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
 					// classes
 					@if _gridle_need_to_generate(grid, $package) {
 						#{_gridle_classname(grid, $stateName, $columnName)} {
-							@include gridle($columnsCount, $columnsContext);
+							@include gridle_grid($columnsCount, $columnsContext);
 						}
 					}
 					@if _gridle_need_to_generate(push, $package) {

data/stylesheets/gridle/_init.scss

@@ -1,9 +1,9 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 // @created 	25.03.13
-// @updated 	09.10.15
+// @updated 	20.10.15
 // @author 		Olivier Bossel <olivier.bossel@gmail.com>
-// @version 	2.0.2
+// @version 	2.0.4
 // |------------------------------------------------------
 // |------------------------------------------------------
 
@@ -16,7 +16,7 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-$_gridle-version : "2.0.2";
+$_gridle-version : "2.0.4";
 
 
 
@@ -27,6 +27,7 @@ $_gridle-version : "2.0.2";
 // |------------------------------------------------------
 // |------------------------------------------------------
 
+$gridle-debug : true; 							
 $_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
@@ -38,6 +39,8 @@ $_gridle_apply_css_for : (); 					// save the rules that will be applied for eac
 
 $_gridle_current_state : ();					// save the current state
 $_gridle_current_stateName : default; 			// save the current state name
+$_gridle_previous_state : (); 					// save the previous state
+$_gridle_previous_stateName : default; 			// save the previous state name
 
 $_content_arg_state : null; 					// this variable is used to pass state through global variable into an @content
 
@@ -128,4 +131,4 @@ $gridle-vendor-prefix : true; 					// set if need to add vendor prefixes when ne
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-// @import 'default-states';
+@import 'default-states';

data/stylesheets/gridle/_mixins.scss

@@ -42,15 +42,11 @@
 		%#{$stateName}-#{$for} {
 			// inject content
 			@content;
-			// extend common class by the registered css
-			@include _gridle_extend_common_class($for, $stateName);
 		}
 		@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);
 			}
 		}
 	}
@@ -61,150 +57,203 @@
 	// get state name
 	$stateName : gridle_get_state_var(name, $state);
 
+	// define packages to init
+	// the order can matter here
+	$packages : (
+		container,
+		grid-order,
+		row,
+		row-full,
+		col,
+		grid,
+		grid-table,
+		grid-adapt,
+		grid-grow,
+		push,
+		pull,
+		prefix,
+		suffix,
+		nowrap,
+		wrap,
+		clear-each,
+		grid-centered,
+		row-align,
+		hide,
+		not-visible,
+		show,
+		show-inline,
+		visible,
+		float,
+		clear,
+		no-gutter,
+		gutter,
+		row-debug
+	);
+
+	// loop on each packages to init their common silient classes
+	@each $package in $packages {
+		// include common
+		@include _gridle_common_silent_class_name($package, $stateName) {
+			@include _gridle_include_common($package, $stateName);
+		}
+	}
+}
+
+@mixin _gridle_include_common(
+	$package,
+	$state : current
+) {
+
+	// get state name
+	$state : gridle_get_state($state);
+	
 	// container
-	@include _gridle_common_silent_class_name(container, $stateName) {
+	@if $package == container {
 		@include _gridle_common_container($state);
 	}
 
 	// order
-	@include _gridle_common_silent_class_name(grid-order, $stateName) {
+	@if $package == grid-order {
 		@include _gridle_common_grid_order($state);
 	}
 
 	// row
-	@include _gridle_common_silent_class_name(row, $stateName) {
+	@if $package == row {
 		@include _gridle_common_row($state);
 	}
 
 	// row-full
-	@include _gridle_common_silent_class_name(row-full, $stateName) {
+	@if $package == row-full {
 		@include _gridle_common_row_full($state);
 	}
 
 	// col
-	@include _gridle_common_silent_class_name(col, $stateName) {
+	@if $package == col {
 		@include _gridle_common_col($state);
 	}
 
 	// grid
-	@include _gridle_common_silent_class_name(grid, $stateName) {
+	@if $package == grid {
 		@include _gridle_common_grid($state);
 	}
 
 	// grid-table
-	@include _gridle_common_silent_class_name(grid-table, $stateName) {
+	@if $package == grid-table {
 		@include _gridle_common_grid_table($state);
 	}
 
 	// grid-adapt
-	@include _gridle_common_silent_class_name(grid-adapt, $stateName) {
+	@if $package == grid-adapt {
 		@include _gridle_common_grid_adapt($state);
 	}
 
 	// grid-grow
-	@include _gridle_common_silent_class_name(grid-grow, $stateName) {
+	@if $package == grid-grow {
 		@include _gridle_common_grid_grow($state);
 	}
 
 	// push
-	@include _gridle_common_silent_class_name(push, $stateName) {
+	@if $package == push{
 		@include _gridle_common_push($state);
 	}
 
 	// pull
-	@include _gridle_common_silent_class_name(pull, $stateName) {
+	@if $package == pull{
 		@include _gridle_common_pull($state);
 	}
 
 	// prefix
-	@include _gridle_common_silent_class_name(prefix, $stateName) {
+	@if $package == prefix{
 		@include _gridle_common_prefix($state);
 	}
 
 	// suffix
-	@include _gridle_common_silent_class_name(suffix, $stateName) {
+	@if $package == suffix {
 		@include _gridle_common_suffix($state);
 	}
 
 	// nowrap
-	@include _gridle_common_silent_class_name(nowrap, $stateName) {
+	@if $package == nowrap {
 		@include _gridle_common_nowrap($state);
 	}
 
 	// wrap
-	@include _gridle_common_silent_class_name(wrap, $stateName) {
+	@if $package == wrap {
 		@include _gridle_common_wrap($state);
 	}
 
 	// clear-each
-	@include _gridle_common_silent_class_name(clear-each, $stateName) {
+	@if $package == clear-each {
 		@include _gridle_common_clear_each($state);
 	}
 
 	// centered
-	@include _gridle_common_silent_class_name(grid-centered, $stateName) {
+	@if $package == grid-centered {
 		@include _gridle_common_grid_centered($state);
 	}
 
-	// align
-	@include _gridle_common_silent_class_name(row-align, $stateName) {
+	// row-align
+	@if $package == row-align {
 		@include _gridle_common_row_align($state);
 	}
 
 	// hide
-	@include _gridle_common_silent_class_name(hide, $stateName) {
+	@if $package == hide {
 		@include _gridle_common_hide($state);
 	}
 
 	// not-visible
-	@include _gridle_common_silent_class_name(not-visible, $stateName) {
+	@if $package == not-visible {
 		@include _gridle_common_not_visible($state);
 	}
 
 	// show
-	@include _gridle_common_silent_class_name(show, $stateName) {
+	@if $package == show{
 		@include _gridle_common_show($state);
 	}
 
 	// show-inline
-	@include _gridle_common_silent_class_name(show-inline, $stateName) {
+	@if $package == show-inline {
 		@include _gridle_common_show_inline($state);
 	}
 
 	// visible
-	@include _gridle_common_silent_class_name(visible, $stateName) {
+	@if $package == visible {
 		@include _gridle_common_visible($state);
 	}
 
 	// float
-	@include _gridle_common_silent_class_name(float, $stateName) {
+	@if $package == float {
 		@include _gridle_common_float($state);
 	}
 
 	// clear
-	@include _gridle_common_silent_class_name(clear, $stateName) {
+	@if $package == clear {
 		@include _gridle_common_clear($state);
 	}
 
 	// no-gutter
-	@include _gridle_common_silent_class_name(no-gutter, $stateName) {
+	@if $package == no-gutter {
 		@include _gridle_common_no_gutter($state);
 	}
 
 	// gutter
-	@include _gridle_common_silent_class_name(gutter, $stateName) {
+	@if $package == gutter {
 		@include _gridle_common_gutter($state);
 	}
 
 	// row debug
-	@include _gridle_common_silent_class_name(row-debug, $stateName) {
+	@if $package == row-debug {
 		@include _gridle_common_row_debug($state);
 	}
+
+	// extend common class by the registered css
+	@include _gridle_extend_common_class($package, $state);
 }
 
 
 //
-// Wrap gridle mixin content to init if needed and then extend if needed
+// Wrap gridle mixin content to init if needed and then if needed
 //			
 @mixin _gridle_call(
 	$for : null
@@ -231,21 +280,29 @@
 // @calledBy 		_gridle_call
 //
 @mixin _gridle_extend(
-	$for
+	$package
 ) {
 	// 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;
+	$stateName : gridle_get_state_var(name);
+
+	// if is an existing gridle state
+	@if gridle_has_state($stateName) {
+		// 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}-#{$package}");
+				@extend %at-root-#{$_gridle_current_stateName}-#{$package} !optional;
+			}
+		} @else {
+			// extend using the current state name set in each gridle_state call
+			// @debug("%#{$_gridle_current_stateName}-#{$package}");
+			@extend %#{$_gridle_current_stateName}-#{$package} !optional;
 		}
 	} @else {
-		// extend using the current state name set in each gridle_state call
-		// @debug("%#{$_gridle_current_stateName}-#{$for}");
-		@extend %#{$_gridle_current_stateName}-#{$for} !optional;
+		// it's not an existing state so we cannot extend.
+		// we need to include instead
+		@include _gridle_include_common($package, $stateName);
 	}
 }
 
@@ -297,10 +354,26 @@ $_gridle_applied_for : ();
 	$states-classes : gridle_get_state_var(states-classes, $state);
 	$stateName : gridle_get_state_var(name, $state);
 
+	// manage previous state
+	$previous_state : null;
+	$previous_stateName : null;
+
 	// check if need to tack the current state
 	@if $track-current-state {
-		// save current state
-		$_gridle_current_state : $state !global;
+		@if $_gridle_current_state {
+			$previous_state : $_gridle_current_state;
+			$previous_stateName : $_gridle_current_stateName;
+		}
+		// if we have a previous state that is not the default one, we
+		// make the inheritence process.
+		// if both states are registered ones : just take the wanted state
+		// if only previous_state is a registered one : extend previous_state with the wanted one
+		// if none of them are resitered : extend the wanted with the previous one
+		@if $previous_state {
+			$_gridle_current_state : _gridle_inherit_state($state, $previous_state) !global;
+		} @else {
+			$_gridle_current_state : $state !global;	
+		}
 		$_gridle_current_stateName : $stateName !global;
 	}
 
@@ -334,9 +407,9 @@ $_gridle_applied_for : ();
 	}
 
 	// reset current state to default
-	@if $track-current-state {
-		$_gridle_current_state : $_gridle_settings !global;
-		$_gridle_current_stateName : default !global;
+	@if $track-current-state and $previous_state and $previous_stateName {
+		$_gridle_current_state : $previous_state !global;
+		$_gridle_current_stateName : $previous_stateName !global;
 	}
 }
 

data/stylesheets/gridle/_settings-mixins.scss

@@ -10,29 +10,8 @@
 @mixin gridle_setup(
 	$settings : ()
 ) {
-	// manage gutters
-	$gutter-top : map-get($settings, gutter-top);
-	$gutter-bottom : map-get($settings, gutter-bottom);
-	$gutter-left : map-get($settings, gutter-left);
-	$gutter-right : map-get($settings, gutter-right);
-	$gutter-width : map-get($settings, gutter-width);
-	$gutter-height : map-get($settings, gutter-height);
-	@if $gutter-right and $gutter-left {
-		// calculate the gutter-width
-		$settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
-	} @else if $gutter-width {
-		// calculate the gutter-left and right
-		$settings : map-set($settings, gutter-left, $gutter-width * .5);
-		$settings : map-set($settings, gutter-right, $gutter-width * .5);
-	}
-	@if $gutter-top and $gutter-bottom {
-		// calculate the gutter-height
-		$settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
-	} @else if $gutter-height {
-		// calculate the gutter-bottom and top
-		$settings : map-set($settings, gutter-bottom, $gutter-height * .5);
-		$settings : map-set($settings, gutter-top, $gutter-height * .5);
-	}
+	// prepare state
+	$settings : _gridle_prepare_state_settings($settings);
 
 	// extend default settings
 	$_gridle-settings : map-merge((
@@ -42,6 +21,7 @@
 		query : null,
 		classes : true,
 		context : 12,
+		column-width : null,
 		gutter-width : 20px,
 		gutter-height : 0,
 		gutter-top : 0,
@@ -49,6 +29,7 @@
 		gutter-bottom : 0,
 		gutter-left : 10px,
 		direction : ltr,
+		dir-attribute : false,
 		name-multiplicator : 1,
 		states-classes : false,
 		classes-prefix : null
@@ -68,31 +49,10 @@
 //
 @mixin gridle_register_state(
 	$name,
-	$settings
+	$settings : ()
 ) {
-	// manage gutters
-	$gutter-top : map-get($settings, gutter-top);
-	$gutter-bottom : map-get($settings, gutter-bottom);
-	$gutter-left : map-get($settings, gutter-left);
-	$gutter-right : map-get($settings, gutter-right);
-	$gutter-width : map-get($settings, gutter-width);
-	$gutter-height : map-get($settings, gutter-height);
-	@if $gutter-right and $gutter-left {
-		// calculate the gutter-width
-		$settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
-	} @else if $gutter-width {
-		// calculate the gutter-left and right
-		$settings : map-set($settings, gutter-left, $gutter-width * .5);
-		$settings : map-set($settings, gutter-right, $gutter-width * .5);
-	}
-	@if $gutter-top and $gutter-bottom {
-		// calculate the gutter-height
-		$settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
-	} @else if $gutter-height {
-		// calculate the gutter-bottom and top
-		$settings : map-set($settings, gutter-bottom, $gutter-height * .5);
-		$settings : map-set($settings, gutter-top, $gutter-height * .5);
-	}
+	// prepare state
+	$settings : _gridle_prepare_state_settings($settings);
 
 	// settings :
 	$settings : map-merge($_gridle-settings, $settings);
@@ -390,15 +350,15 @@
 //
 @mixin gridle_register_default_mobile_first_states() {
 	@include gridle_register_state(xs, (
-		max-width : 768px
+		max-width : 750px
 	));
 	@include gridle_register_state(sm, (
-		min-width : 768px
+		min-width : 750px
 	));
 	@include gridle_register_state(md, (
-		min-width : 992px
+		min-width : 970px
 	));
 	@include gridle_register_state(lg, (
-		min-width : 1200px
+		min-width : 1170px
 	));
 }