// Import gridle :
@import 'gridle/gridle';


// basic configuration :
@include gridle_setup( (
	context : 12,
	gutter-width : 30px,
	html-states-classes : true
) );

// register states :
@include gridle_register_default_mobile_first_states();

/*
 * Optional :
 * Change generation class names pattern (for example to match bootstrap naming conventions or generate with your own names) :
 * Check documentation (http://gridle.org/documentation#name-pattern) for full list
 *
 * %- 		= separator sign (configurable by $gridle-class-separator) (no need to add separators if you doesn't want them)
 * %state 	= the state name (mobile, ipad, etc...)
 * %count  	= the column count (1, 2, 3, 4, etc...)
 */
$gridle-grid-name-pattern : ('col','%-','%state','%-','%count');
$gridle-parent-name-pattern : ('row','%-','%state');
$gridle-prefix-name-pattern : ('col','%-','%state','%-','offset','%-','%count');
$gridle-push-name-pattern : ('col','%-','%state','%-','push','%-','%count');
$gridle-pull-name-pattern : ('col','%-','%state','%-','pull','%-','%count');
$gridle-show-name-pattern : ('visible','%-','%state');
$gridle-hide-name-pattern : ('hidden','%-','%state');


/**
 * Mobile first approach :
 */
[class*="col-"] {
	width:100%; // 100% by default
}


// Generate classes :
@include gridle_generate_classes();

// Max size :
.container {
	margin:0 auto;
	max-width:1200px;
}