Sass Config

$g-config: (maxWidth:1020px,tabletWidth:720px,columnPadding:15px,gutter:20px);

Flexibility

HTML Method

<divclass="Layout G-container"><divclass="G-row"><divclass="G-col-4 G-col-mobile--12"><!-- content goes here --></div><divclass="G-col-8 G-col-mobile--12"><!-- content goes here --></div></div></div>

CSS Method

<divclass="Layout"><divclass="Layout-inner"><divclass="Sidebar"><!-- content goes here --></div><divclass="Content"><!-- content goes here --></div></div></div>

.Layout {@includeg();.Layout-inner {@includeg-row();  }.Sidebar {@includeg-col(4);@includeg-when-mobile {@includeg-col(12);    }  }.Content {@includeg-col(8);@includeg-when-mobile {@includeg-col(12);    }  }}

Reference

SASS Mixins

Container

@includeg($fluid:false, $flush:false, $gutter:true);

Row

@includeg-row();

Column

@includeg-column($columns);

Mobile media query helper

@includeg-when-mobile() {// Styles here}

Desktop media query helper

@includeg-when-tablet() {// Styles here}

Desktop media query helper

@includeg-when-desktop() {// Styles here}

CSS Classes

Container

<divclass="G-container G-container--fluid"><!-- content goes here --></div>

Fluid Container (no max width)

<divclass="G-container G-container--fluid"><!-- content goes here --></div>

Flush Container (no container gutter)

<divclass="G-container G-container--flush"><!-- content goes here --></div>

Guttler Container (no column gutters)

<divclass="G-container G-container--gutterless"><!-- content goes here --></div>