One grid system to rule them all, based in gridle
Importing kgrid
import "kgrid/kgrid"
Configure your grid :
@include gridle_setup( (
context : 12,
gutter-width : 20px,
direction : rtl,
debug : true
// etc...
) );
Register states (media queries) (optional) :
@include gridle_register_state ( mobile , (
max-width : 480px
) );
@include gridle_register_state ( tablet , (
min-width : 481px,
max-width : 1024px
) ) ;
// even with full custom queries :
@include gridle_register_state ( landscape, (
query : "(orientation : landscape)"
) );
Generate all classes :
@include gridle_generate_classes();
Use your grid in html :
<div class="container">
<div class="kgrid-12 hide-print">
Header
</div>
<div class="kgrid-8 kgrid-mobile-12">
Content
</div>
<div class="kgrid-4 kgrid-mobile-12 hide-print">
Sidebar
</div>
</div>
Or with mixins :
.container {
@include kgrid_container();
max-width:960px;
margin:0 auto;
}
#header {
@include kgrid(12);
}
#sidebar {
@include kgrid(8);
@include kgrid(12, mobile );
}
#sidebar {
@include kgrid(4);
@include kgrid_hide( mobile );
}
@footer {
@include kgrid(12);
}
Customize your content look and feel with Gridle mixins
#sidebar {
background : red;
@include kgrid_state(mobile) {
background : green;
}
}
Gridle allows you to generate custom classes that will be available for each of your states. Here's an exemple
@include kgrid_generate_custom_class( ( 'center', '-', '%state' ) ) {
text-align : center;
}
This will produce the classes : center, center-mobile, center-tablet and center-landscape automatically