Grid

To use grid system, use .fv-row and .fv-col(x) classes.

Code:

  
    HTML
    
  
  <div class="fv-row">
  <div class="fv-col"> Column </div>
  <div class="fv-col"> Column </div>
  <div class="fv-col"> Column </div>
  <div class="fv-col-12"> Column Full </div>
  <div class="fv-col-sm-6 fv-col-md-3"> Column Small 6 - Medium 3 </div>
  <div class="fv-col-sm-6 fv-col-md-3"> Column Small 6 - Medium 3 </div>
  <div class="fv-col-sm-6 fv-col-md-3"> Column Small 6 - Medium 3 </div>
  <div class="fv-col-sm-6 fv-col-md-3"> Column Small 6 - Medium 3 </div>
</div>

Examples:

fv-col

fv-col-12

fv-col-6

fv-col-8

fv-col-4

fv-col-md-6 fv-col-sm-12

fv-col-md-7 fv-col-sm-12

fv-col-md-5 fv-col-lower-sm-0

fv-col-xs-8 fv-col-offset-xs-4

Notes:

Framevuerk grid system inspired from Bootstrap grid system.
Every .fv-row and .fv-col classes has half of padding value from user variables. You can use helper classes to remove it.

API:

Name	Description
.fv-row	Row
.fv-col	Automatic column
.fv-col-{xs\|sm\|md\|lg\|xl}-{1 to 12}	Static column for current and above media
.fv-col-offset-{xs\|sm\|md\|lg\|xl}-{1 to 12}	Column offset for current and above media
.fv-col-only-{xs\|sm\|md\|lg\|xl}-{1 to 12}	Static column for only current media
.fv-col-offset-only-{xs\|sm\|md\|lg\|xl}-{1 to 12}	Column offset for only current media
.fv-col-lower-{xs\|sm\|md\|lg\|xl}-{1 to 12}	Static column for current and lower media
.fv-col-offset-lower-{xs\|sm\|md\|lg\|xl}-{1 to 12}	Column offset for current and lower media