Configuration

Scss

Configuration is stored under the kayzenGS variable:

$kayzenGS: (
    '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)
    )
);

You can pass custom configuration when including the kayzen-gs mixin:

@import '../node_modules/Kayzen-GS/dist/kayzen-gs';

@include kayzen-gs((
    'options' : (
        'columns'       : 16,
        'col-namespace' : 'col'
    ),
    'settings' : (
        'old-ie'        : true,
        'pull-columns'  : false,
        'push-columns'  : false
    )
));

Options

The 'options' form the basic foundation for your grid system. This is where you set the core options for your grid system.

Option	Type	Default
columns	number [integer]	12
gutter	number [percentage]	3%
col-break	number [length]	940px
row-namespace	string	'row'
col-namespace	string	'span'

Settings

Note: Whilst most options are enabled by default, it is recommended that you disable any features you don't use to optimise the generated CSS.

This is where you set which features of Kayzen-GS you want to use in your project. By default, all functionality outlined in this documentation is enabled, meaning you don't have to change anything to access all the features of Kayzen-GS, the only reason you would change any of these settings is to disable any unused features to improve performance.

'old-ie'

Default : false

This setting only affects regular columns.

Enabling this setting will allow default columns to work on Internet Explorer 6 & 7.

'responsive'

Default : true

If disabled, columns will not stack vertically.

'mobile-first'

Default : false

Disabling this improves performance without losing functionality*

This setting has a fairly large impact on the behaviour of responsiveness. With this option enabled, all columns start out at 100% width, and will compact to the specified width as and when they're told. If this options is disabled, columns will start out at their specificed width (for example span-4 would start out at 4/12's by default), and will be forced to 100% width as and when they're told.

*This has a noticable effect when using the Adaptive Columns. With mobile-first enabled an adaptive column can be created like so:

<div class="span break-1-half break-2-third break-3-quarter">span-3</div>

This will create a column that starts out at 100% width, and will compact to 1/2 at break-1 or more, 1/3 at break-2 or more, and 1/4 at break-3 or more.

With mobile-first disabled, the logic is different; in fact, it is reversed:

<div class="span-3 break-3-third break-2-half break-1-full">span-3</div>

Here the column is 3/12's by default, and will be forced to 1/2 at break-2 or less, and 100% width at break-1 or less, thus achieving the same behaviour as the above example with mobile-first enabled.

'custom-stacking'

Default : true

This option generates the code required for the custom breakpoint stacking feature.

'adaptive-columns'

Default : true

This option generates the code required for adaptive columns.

'flow-columns'

Default : true

This option generates the code required for flow columns.

'magic-columns'

Default : true

This option generates the code required for magic columns.

'block-columns'

Default : true

This option generates the code required for block columns.

'no-gutter-columns'

Default : true

This option generates the code required for no-gutter columns.

'reverse-columns'

Default : true

This option generates the code required to reverse columns.

'pull-columns'

Default : true

This option generates the code required to pull columns.

'push-columns'

Default : true

This option generates the code required to push columns.

Breakpoints

Kayzen-GS allows you to specify any number of breakpoints. Amend the breakpoints map in the config as you desire.

These values are used to generate the helper classes. Be wary not to include too many values here.

'breakpoints' : (
    'break-0' : 0px,
    'break-1' : 460px,
    'break-2' : 720px,
    'break-3' : 940px,
    'break-4' : 1200px
);

Fractions

This is where you can define the names for any fractions you wish to use in your grid system.

These values are used to generate the helper classes. Be wary not to include too many values here.

'fractions' : (
    'full'    : (1, 1),
    'half'    : (1, 2),
    'third'   : (1, 3),
    'quarter' : (1, 4),
    'sixth'   : (1, 6)
);

React

See the React Configuration section