Login Register

Kayzen

Grid System

assets/modules/utilities/grid

Files

  • _grid.scss
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/utilities/grid

Module Overview

Kayzen is built using our own custom grid system called Kayzen-GS. It is an extremely powerful and flexible grid system that can be used to accomplish practically any layout you desire. Be sure to check out the demo page to view examples and see how to use it.

Customizing

The grid system can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Changing some of the below values may break existing Kayzen HTML templates. Pursue with caution.

Property Name Default Value Description
output-JSON true This allows the config to be accessed in the JavaScript.
options : columns 12 The number of columns your grid system should have.
options : gutter 3% The width of your column gutters.
options : col-break 940px The default width at which columns should become stacked.
options : row-namespace 'row' The namespace for your row elements (e.g. ".row").
options : col-namespace 'span' The namespce for your columns (e.g. ".span-5").
settings : old-ie false Enable if you are unfortunate enough to have to provide support for IE6/7.
settings : responsive true If disabled, columns will not become stacked at any resolution.
settings : mobile-first false Enable to generate mobile-first columns (warning: this will increase your CSS output).
settings : custom-stacking false Enable to generate custom-stacking columns.
settings : adaptive-columns true Enable to generate adaptive columns.
settings : flow-columns true Enable to generate flow columns.
settings : magic-columns true Enable to generate magic columns.
settings : block-columns true Enable to generate block columns.
settings : no-gutter-columns true Enable to generate no-gutter columns.
settings : reverse-columns true Enable to generate reverse columns.
settings : pull-columns true Enable to generate pull columns.
settings : push-columns true Enable to generate push columns.
breakpoints [...] Set the breakpoint values to be used by the grid system.
fractions [...] Set the fractions to be used for the grid system.

To change one of the above values, pass your new value(s) to the grid() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include grid((
    'options' : (
        'columns'           : 12,
        'gutter'            : 3%,
        'col-break'         : 940px,
        'row-namespace'     : 'row',
        'col-namespace'     : 'span',
    ),
    'settings' : (
        'old-ie'            : false,
        'responsive'        : true,
        'mobile-first'      : false,
        'custom-stacking'   : true,
        'adaptive-columns'  : true,
        'flow-columns'      : true,
        'magic-columns'     : true,
        'block-columns'     : true,
        'no-gutter-columns' : true,
        'reverse-columns'   : true,
        'pull-columns'      : true,
        'push-columns'      : true
    ),
    'breakpoints' : (
        'break-0'           : 0px,
        'break-1'           : 460px,
        'break-2'           : 720px,
        'break-3'           : 940px,
        'break-4'           : 1200px
    ),
    'fractions' : (
        'full'              : (1, 1),
        'half'              : (1, 2),
        'third'             : (1, 3),
        'quarter'           : (1, 4),
        'sixth'             : (1, 6)
    )
));