48 lines
1.3 KiB
SCSS

// 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;
}