gridle 1.3.36 → 2.0.0

data/stylesheets/gridle/_settings-mixins.scss

@@ -4,12 +4,37 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-/**
- * Setup
- */
+//
+// Setup
+//
 @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);
+	}
+
+	// extend default settings
 	$_gridle-settings : map-merge((
 		name : default,
 		min-width : null,
@@ -18,43 +43,101 @@
 		classes : true,
 		context : 12,
 		gutter-width : 20px,
+		gutter-height : 0,
+		gutter-top : 0,
+		gutter-right : 10px,
+		gutter-bottom : 0,
+		gutter-left : 10px,
 		direction : ltr,
 		name-multiplicator : 1,
-		debug : false,
-		debug-show-class-names : true,
-		ie7-support : false,
-		html-states-classes : false,
-		generate-push-classes : true,
-		generate-pull-classes : true,
-		generate-prefix-classes : true,
-		generate-suffix-classes : true,
-		generate-helpers-classes : true
+		states-classes : false,
+		classes-prefix : null
 	), $settings) !global;
 
 	// register default state :
 	@include gridle_register_state(default, $_gridle-settings);
 
+	// set current state to default
+	$_gridle_current_state : $_gridle-settings !global;
+	$_gridle_current_stateName : default !global;
+
 }
 
-// Register an state :
+//
+// Register a state
+//
 @mixin gridle_register_state(
 	$name,
 	$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);
+	}
+
 	// settings :
 	$settings : map-merge($_gridle-settings, $settings);
 
 	// set name :
 	$settings : map-set($settings, name, $name);
 
+	// gutter sizes :
+	$gutter-top : map-get($settings, gutter-top);
+	$gutter-right : map-get($settings, gutter-right);
+	$gutter-bottom : map-get($settings, gutter-bottom);
+	$gutter-left : map-get($settings, gutter-left);
+
 	// add state in maps :
 	$_gridle_states : map-set($_gridle_states, $name, $settings) !global;
+
+	// add rules if gutter is different
+	@if $gutter-top != map-get($_gridle-settings, gutter-top)
+		or $gutter-right != map-get($_gridle-settings, gutter-right)
+		or $gutter-bottom != map-get($_gridle-settings, gutter-bottom)
+		or $gutter-left != map-get($_gridle-settings, gutter-left) {
+		$gutters : _gridle_forge_gutters_map(top right bottom left, $name);
+		@include gridle_apply_css_for(grid grid-grow grid-adapt, (
+			gridle_gutter : top right bottom left
+		), $name);
+	}
+
+	// add rules if direction is different
+	$direction : map-get($settings, direction);
+	@if $direction != map-get($_gridle-settings, direction) {
+		$float : left;
+		@if $direction == rtl {
+			$float : right;
+		}
+		@include gridle_apply_css_for(grid, (
+			direction : $direction,
+			float : $float
+		), $name);
+	}
 }
 
 
-/**
- *  Register a clear each class
- */
+//
+//  Register a clear each class
+//
 @mixin gridle_register_clear_each(
 	$count,
 	$clearWhat
@@ -70,9 +153,9 @@
 }
 
 
-/**
- * Register a special class
- */
+//
+// Register a special class
+//
 @mixin gridle_register_column(
 	$name,
 	$columns,
@@ -86,9 +169,211 @@
 }
 
 
-/**
- * Register default states
- */
+//
+// Set a classmap
+//
+@mixin gridle_set_classname_map(
+	$for,
+	$pattern
+) {
+	// get the map
+	$map : map-get($_gridle-packages, $for);
+	// set the new classname
+	$map : map-set($map, classname, $pattern);
+	// set the classmap
+	$_gridle-packages : map-set($_gridle-packages, $for, $map) !global;
+}
+
+
+//
+// Extend a gridle class
+//
+// map format :
+// (
+// 	grid : (
+// 		mobile : (
+// 			padding : 10px,
+// 			float : left
+// 		),
+// 		tablet : (
+// 			padding : 10px
+// 		)
+// 	),
+// 	flex-grid : (
+// 		mobile : (
+// 			padding : 10px
+// 		)
+// 	)
+// )
+//
+// @mixin gridle_extend_base_class(
+// 	$for,
+// 	$extend,
+// 	$statesNames : null
+// ) {
+// 	// if $states is all
+// 	@if $statesNames == null {
+// 		$statesNames : gridle_get_states_names();
+// 	}
+
+// 	// allow multiple "$for"
+// 	@each $f in $for {
+
+// 		// get the map for the passed mixin "category"
+// 		$forMap : map-get($_gridle_extend_base_classes, $f);
+
+// 		// create the map if not exist
+// 		@if $forMap == null { $forMap : (); }
+
+// 		// loop on each states to register an extend map
+// 		@each $stateName in $statesNames {
+
+// 			// check if has a map for the state
+// 			$forStateMap : map-get($forMap, $stateName);
+// 			@if $forStateMap == null {
+// 				$forStateMap : ();
+// 			}
+
+// 			// merge map
+// 			$forStateMap : map-merge($forStateMap, $extend);
+
+// 			// set the new state map into forMap
+// 			$forMap : map-set($forMap, $stateName, $forStateMap);
+
+// 			// set the map in the gridle global variable
+// 			$_gridle_extend_base_classes : map-set($_gridle_extend_base_classes, $f, $forMap) !global;
+
+// 		}
+
+// 	}
+// }
+@mixin gridle_extend_base_class(
+	$for,
+	$extend,
+	$statesNames : null
+) {
+	// if $states is all
+	@if $statesNames == null {
+		$statesNames : gridle_get_states_names();
+	}
+
+	// allow multiple "$for"
+	@each $stateName in $statesNames {
+
+		// get the map for the passed mixin "category"
+		$stateMap : map-get($_gridle_extend_base_classes, $stateName);
+
+		// create the map if not exist
+		@if $stateMap == null { $stateMap : (); }
+
+		// loop on each states to register an extend map
+		@each $f in $for {
+
+			// check if has a map for the state
+			$forStateMap : map-get($stateMap, $f);
+			@if $forStateMap == null {
+				$forStateMap : ();
+			}
+
+			// merge map
+			$forStateMap : map-merge($forStateMap, $extend);
+
+			// set the new state map into forMap
+			$stateMap : map-set($stateMap, $f, $forStateMap);
+
+			// set the map in the gridle global variable
+			$_gridle_extend_base_classes : map-set($_gridle_extend_base_classes, $stateName, $stateMap) !global;
+		}
+	}
+}
+
+//
+// Apply css for
+//
+// map format :
+// (
+// 	(
+// 		grid : (
+// 			mobile : (
+// 				padding : 0,
+// 				margin : 0
+// 			),
+// 			tablet : (
+// 				padding : 0
+// 			)
+// 		)
+// 	),
+// 	(
+// 		etc...
+// 	)
+// )
+// @mixin gridle_apply_css_for(
+// 	$for,
+// 	$extend,
+// 	$statesNames : null
+// ) {
+
+// 	// if statesNames is null, mean that it's all the states
+// 	@if $statesNames == null {
+// 		$statesNames : gridle_get_states_names();
+// 	}
+
+// 	// allow multiple "$for"
+// 	@each $f in $for {
+
+// 		// get the map for the passed mixin "category"
+// 		$stateMap : ();
+
+// 		// loop on each states to register an extend map
+// 		@each $stateName in $statesNames {
+// 			// add the css
+// 			$stateMap : map-set($stateMap, $stateName, $extend);
+// 		}
+
+// 		// set in map
+// 		$forMap : map-set((), $f, $stateMap);
+
+// 		// set the map in the gridle global variable
+// 		$_gridle_apply_css_for : append($_gridle_apply_css_for, $forMap) !global;
+
+// 	}
+// }
+@mixin gridle_apply_css_for(
+	$for,
+	$extend,
+	$statesNames : null
+) {
+
+	// if statesNames is null, mean that it's all the states
+	@if $statesNames == null {
+		$statesNames : gridle_get_states_names();
+	}
+
+	// allow multiple "$for"
+	@each $stateName in $statesNames {
+
+		// get the map for the passed mixin "category"
+		$forMap : ();
+
+		// loop on each states to register an extend map
+		@each $f in $for {
+			// add the css
+			$forMap : map-set($forMap, $f, $extend);
+			// $stateMap : map-set($stateMap, $stateName, $extend);
+		}
+
+		// set in map
+		$statesMap : map-set((), $stateName, $forMap);
+
+		// set the map in the gridle global variable
+		$_gridle_apply_css_for : append($_gridle_apply_css_for, $statesMap) !global;
+	}
+}
+
+
+//
+// Register default states
+//
 @mixin gridle_register_default_states() {
 	@include gridle_register_state(mobile, (
 		max-width : 480px
@@ -100,9 +385,9 @@
 }
 
 
-/**
- * Register default mobile first states :
- */
+//
+// Register default mobile first states :
+//
 @mixin gridle_register_default_mobile_first_states() {
 	@include gridle_register_state(xs, (
 		max-width : 768px
@@ -116,24 +401,4 @@
 	@include gridle_register_state(lg, (
 		min-width : 1200px
 	));
-}
-
-
-/**
- * Set the debug device (not used for now)
- * 
- * @param 	String 		$state 		The state to update
- * @para m 	String 		$device 	The device to use (iphone, etc...)
- */
-@mixin gridle_set_debug_device(
-	$state : default,
-	$device : null
-) {
-
-	// check params :
-	@if $state and $device {
-		// set the state device :
-		$_gridle_states_debug_devices : append($_gridle_states_debug_devices, unquote("\"#{$state}\" : \"#{$device}\""), comma);
-	}
-
 }

data/stylesheets/gridle/_settings.scss

@@ -6,64 +6,131 @@
 
 $gridle-generate-json-settings 			: true !default;
 
-$gridle-debug-selector 				: ".gridle-debug &, &.gridle-debug" !default;
-
-$gridle-class-prefix 					: '' !default;
-$gridle-class-separator 				: '-' !default;
-
-$gridle-container-name-pattern 			: ('container') !default;
-
-$gridle-grid-name-pattern 				: ('grid','%-','%state','%-','%count') !default;
-$gridle-push-name-pattern 				: ('push','%-','%state','%-','%count') !default;
-$gridle-pull-name-pattern 				: ('pull','%-','%state','%-','%count') !default;
-$gridle-prefix-name-pattern 				: ('prefix','%-','%state','%-','%count') !default;
-$gridle-suffix-name-pattern 				: ('suffix','%-','%state','%-','%count') !default;
-
-$gridle-parent-name-pattern 				: ('parent','%-','%state') !default;
-$gridle-centered-name-pattern 			: ('centered','%-','%state') !default;
-
-$gridle-vertical-align-middle-name-pattern 		: ('vertical','%-','align','%-','%state','%-','middle') !default;
-$gridle-vertical-align-top-name-pattern 		: ('vertical','%-','align','%-','%state','%-','top') !default;
-$gridle-vertical-align-bottom-name-pattern 		: ('vertical','%-','align','%-','%state','%-','bottom') !default;
-
-$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;
-
-$gridle-float-left-name-pattern 			: ('float','%-','%state','%-','left') !default;
-$gridle-float-right-name-pattern 			: ('float','%-','%state','%-','right') !default;
-
-$gridle-clear-name-pattern 				: ('clear','%-','%state') !default;
-$gridle-clear-left-name-pattern 			: ('clear','%-','%state','%-','left') !default;
-$gridle-clear-right-name-pattern 			: ('clear','%-','%state','%-','right') !default;
-$gridle-clear-each-pattern 				: ('clear','%-','each','%-','%state','%-','%count') !default;
-
-$gridle-no-gutter-name-pattern 			: ('no','%-','gutter','%-','%state') !default;
-$gridle-no-gutter-left-name-pattern 			: ('no','%-','gutter','%-','%state','%-','left') !default;
-$gridle-no-gutter-right-name-pattern 		: ('no','%-','gutter','%-','%state','%-','right') !default;
-$gridle-no-gutter-top-name-pattern 			: ('no','%-','gutter','%-','%state','%-','top') !default;
-$gridle-no-gutter-bottom-name-pattern 		: ('no','%-','gutter','%-','%state','%-','bottom') !default;
-
-$gridle-no-margin-name-pattern 			: ('no','%-','margin','%-','%state') !default;
-$gridle-no-margin-left-name-pattern 		: ('no','%-','margin','%-','%state','%-','left') !default;
-$gridle-no-margin-right-name-pattern 		: ('no','%-','margin','%-','%state','%-','right') !default;
-$gridle-no-margin-top-name-pattern 		: ('no','%-','margin','%-','%state','%-','top') !default;
-$gridle-no-margin-bottom-name-pattern 		: ('no','%-','margin','%-','%state','%-','bottom') !default;
-
-$gridle-gutter-name-pattern 				: ('gutter','%-','%state') !default;
-$gridle-gutter-left-name-pattern 			: ('gutter','%-','%state','%-','left') !default;
-$gridle-gutter-right-name-pattern 			: ('gutter','%-','%state','%-','right') !default;
-$gridle-gutter-top-name-pattern 			: ('gutter','%-','%state','%-','top') !default;
-$gridle-gutter-bottom-name-pattern 		: ('gutter','%-','%state','%-','bottom') !default;
-
-$gridle-margin-name-pattern 			: ('margins','%-','%state') !default;
-$gridle-margin-left-name-pattern 			: ('margin','%-','%state','%-','left') !default;
-$gridle-margin-right-name-pattern 			: ('margin','%-','%state','%-','right') !default;
-$gridle-margin-top-name-pattern 			: ('margin','%-','%state','%-','top') !default;
-$gridle-margin-bottom-name-pattern 		: ('margin','%-','%state','%-','bottom') !default;
-
-$gridle-auto-height-name-pattern 			: ('auto','%-','height','%-','%state') !default;
-
-$gridle-debug-color-name-pattern 			: ('debug','%-','color','%-','%state','%-','%count') !default;
+$_gridle-names-separators 				: ('-','--','_','__','@');
+$_gridle-names-tokens : (
+	column								: true, // will be the columns names
+	column-count 						: true, // will represent the column index (1,2,3,...)
+	align 								: left center right top middle bottom around between,
+	float 								: left right both,
+	count 								: true, // will represent a certain count
+	side 								: top right bottom left,
+	reverse 							: '' reverse
+);
+$_gridle-packages : (
+	container 							: (
+		classname 							: ('container','@','%state'),
+		package 							: default container
+	),
+	row 								: (
+		classname 							: ('row','-','%reverse','@','%state'),
+		package 							: default row
+	),
+	row-align 							: (
+		classname 							: ('row','-','align','-','%align','@','%state'),
+		package 							: default row-align
+	),
+	row-full 							: (
+		classname 							: ('row','-','full','@','%state'),
+		package 							: default row-full
+	),
+	row-debug							: (
+		classname 							: ('row','-','debug','@','%state'),
+		package 							: debug row-debug
+	),
+	nowrap 							: (
+		classname 							: ('nowrap','@','%state'),
+		package 							: default nowrap
+	),
+	wrap 							: (
+		classname 							: ('wrap','@','%state'),
+		package 							: default wrap
+	),
+	col 								: (
+		classname 							: ('col','-','%reverse','@','%state'),
+		package 							: default col
+	),
+	grid 								: (
+		classname 							: ('gr','-','%column','@','%state'),
+		package 							: default grid
+	),
+	grid-table 							: ( 
+		classname 							: ('gr','-','table','@','%state'),
+		package 							: default grid-table
+	),
+	grid-adapt 							: (
+		classname 							: ('gr','-','adapt','@','%state'),
+		package 							: default grid-adapt
+	),
+	grid-grow 							: (
+		classname 							: ('gr','-','grow','@','%state'),
+		package 							: default grid-grow
+	),
+	grid-centered 						: (
+		classname 							: ('gr','-','centered','@','%state'),
+		package 							: default grid-centered
+	),
+	push 								: (
+		classname 							: ('push','-','%column','@','%state'),
+		package								: default push
+	),
+	pull 								: (
+		classname 							: ('pull','-','%column','@','%state'),
+		package 							: default pull
+	),
+	prefix 								: (
+		classname 							: ('prefix','-','%column','@','%state'),
+		package 							: default prefix
+	),
+	suffix 								: (
+		classname 							: ('suffix','-','%column','@','%state'),
+		package 							: default suffix
+	),
+	hide 								: (
+		classname 							: ('hide','@','%state'),
+		package 							: helpers hide
+	),
+	show 								: (
+		classname 							: ('show','@','%state'),
+		package 							: helpers show
+	),
+	show-inline 						: (
+		classname 							: ('show','-','inline','@','%state'),
+		package 							: helpers show-inline
+	),
+	not-visible 						: (
+		classname 							: ('not','-','visible','@','%state'),
+		package 							: helpers not-visible
+	),
+	visible 							: (
+		classname 							: ('visible','@','%state'),
+		package 							: helpers visible
+	),
+	float 								: (
+		classname 							: ('float','-','%float','@','%state'),
+		package								: helpers float
+	),
+	clear 								: (
+		classname 							: ('clear','-','%float','@','%state'),
+		package 							: helpers clear
+	),
+	clear-each 							: (
+		classname							: ('clear','-','each','-','%count','@','%state'),
+		package 							: helpers clear-each
+	),
+	gutter 								: (
+		classname 							: ('gutter','-','%side','@','%state'),
+		package 							: helpers gutter
+	),
+	no-gutter 							: (
+		classname 							: ('no','-','gutter','-','%side','@','%state'),
+		package 							: helpers no-gutter
+	),
+	auto-height 						: (
+		classname 							: ('auto','-','height','@','%state'),
+		package								: helpers auto-height
+	),
+	order 								: (
+		classname 							: ('order','-','%column-count','@','%state'),
+		package 							: helpers order
+	)
+);