Installation

Plain CSS

You can download the complete grid-system compiled with the default configuration and simply load it on your page:

Download kayzen-gs.css (18kb)

Download kayzen-gs.min.css (15kb)

Using Sass

Kayzen-GS requires Sass 3.3+

Import the Kayzen-GS library into your project and create the grid system yourself (with any custom options you may require):

Via NPM

npm install kayzen-gs --save

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

Download

Download _kayzen-gs.scss

@import 'PATH/TO/kayzen-gs';

Including in your project

Once loaded, create the grid-system by including the kayzen-gs mixin, where you can pass any custom configuration:

// Using default options
@include kayzen-gs();

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

If you want to create the grid system automatically (with default options) when you import the _kayzen-gs.scss file, instead import the _include-kayzen-gs.scss file:

@import '../node_modules/kayzen-gs/dist/include-kayzen-gs';

React

Ensure you have installed kayzen-gs as an npm package: npm install kayzen-gs --save

If you are using React, import the <Row> and <Column> components:

import { Row, Column } from 'kayzen-gs';