Github license Travis build Bower version npm version

A responsive, flexible and dynamic grid system based off inline-block columns

View on Github View Sass Documentation

Default Kayzen Grid System

Basic Example

span-6
span-6
span-4
span-4
span-4
span-3
span-3
span-3
span-3
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
Sidebar
Article

Responsiveness

Kayzen GS columns are responsive out the box - the following breakpoint values have been defined to customize your layout - these values are completely flexible and customizable (see Custom Configuration):

By default, the columns will vertically stack on top of each other when the screen size is less than 940px (break-3).

Sometimes you may want different columns to stack at different widths. To override the base value at which columns normally stack, you can add a special helper class to your row.

Sidebar
Article

The above columns will now stack on top of each other when the screen size is less than 720px (break-2).

Sidebar
Article

Likewise, the above columns will now stack on top of each other when the screen size is less than 1200px (break-4).

To cause the columns to not stack at all, you can use either the row-no-stack or stack-break-0 helper class on your row:

span-4
span-4
span-4

To change the width of a single column manually at specific breakpoints, see Adaptive Columns.

Flow Columns

Flow Columns are more flexible than regular columns - each visual row of columns does not need to be wrapped in its own row container - all your columns for all your rows can be placed in just one main row parent element with the row-flow class:

Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column

The above code will produce something similiar the following:

As with normal columns you can add helper classes to your row of flow columns:

Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column

The above flow columns will now stack on top of each other when the resolution is less than the break-2 breakpoint, instead of the default break-3 value.

Adaptive Columns

Adaptive Columns allow for more flexibility - they allow you to specify a custom width for each breakpoint value using the fraction values from the configuration.

Adaptive Column
Adaptive Column
Adaptive Column
Adaptive Column
Adaptive Column
Adaptive Column

Ensure you are using the row-flow class on your row when using adaptive columns

If mobile-first is enabled (by default it is disabled), instead your code would look somthing like:

Learn More

Magic Columns

Magic Columns are so named as they do not need to have their widths specified - each row of Magic Columns will automatically fill up the row applying an equal width to each column. Magic Columns are perfect for cases where you know each column will always be the same width, or where you need any widow columns to take up any remaining space.

magic column
magic column
magic column
magic column
magic column
magic column
magic column

To create a row of Magic Columns, add the row-magic class to your row:

As with normal columns you can add helper classes to your row of magic columns:

Magic Column
Magic Column
Magic Column
Magic Column
Magic Column

The above magic columns will now stack on top of each other when the resolution is less than the break-2 breakpoint, instead of the default break-3 value.

Block Columns

Block Columns have no gutter (so the columns sit flush with each other) and are of equal height. To create a row of Block Columns, add the row-block class to your row.

Block Column
Block Column
Block Column
This column causes the others to grow with it.

Block Columns will naturally assume an equal width to each other if the naked span class is used for your column (as opposed to, say, span-3).

As with normal columns you can add helper classes to your row of block columns:

Block Column
Block Column
Block Column

The above Block Columns will now stack on top of each other when the resolution is less than the break-2 breakpoint, instead of the default break-3 value.

No Gutter Columns

No-Gutter Columns are just like regular columns except they have no gutter (similar to *block-columns*, except each column assumes their own height). To create a row of No-Gutter Columns, use the `row-no-gutter` class for your **row**.

No-Gutter Column
No-Gutter Column
No-Gutter Column
Unlike Block Columns, this column doesn't causes the others to grow with it.

As with normal columns you can add helper classes to your row of No-Gutter Columns:

No-Gutter Column
No-Gutter Column
No-Gutter Column

The above No-Gutter Columns will now stack on top of each other when the resolution is less than the break-2 breakpoint, instead of the default break-3 value.

Reverse Column Order

To reverse the order of all columns in a given row, the row-reverse helper class is used.

First Column
Second Column
Third Column
Fourth Column

This helper class will work with all column types.

When columns become stacked, the left one becomes the top and the right one becomes the bottom. Sometimes you way wish to reverse this behaviour. To conditionally reverse the columns at a given breakpoint, you can use a seperate helper class of `reverse-break-3`, adding the appropriate breakpoint value as desired.

Main Content
Sidebar

When the above columns stack, the sidebar will be on top.

Push/Pull Columns

It is possible to push or pull your columns using the following helper classes:

First Column
Second Column

In the above example, the columns' order would effectivaly be reversed. Naturally you can use any number between 1 and 12 (or whatever number you have set for `columns`).

You can effectively re-arrange the columns in any order you desire using the push/pull classes.


First Column
Second Column
Third Column

Semantic Examples

You can use Kayzen GS to build your own grid system using semantic class names whilst retaining complete control over the flexibility of your columns.

Basic Example

Content
The HTML
The CSS

Column Options

Defaults

'width'

This defines your column's default width. The following formats can be used for this value:

'type'

This value determines what type of column your semantic column should be. Possible values are:

'stack'

This value determines at which breakpoint your columns should stack on top of each other when scaling down. The default value is based off the default value of the main grid system, which evaluates to break-3, which by default evaluates to 940px.

'mobile-first'

This option plays a fairly significant role in how your semantic columns work. This value determines wheter your columns should start out at 100% width and then have their desktop width applied, or whether they should start out at their desktop width, and then be forced to 100% on mobiles. The defualt value is based off the default value of the main grid system, which by default evaluates to false.

'respond-to'

This option is used in conjunction with Flow Columns, so to use it ensure your column's type is set to 'flow'. This option is the semantic equivilent of Adaptive Columns, and can be used like so (assuming a default mobile-first value of false):

And with mobile-first set to true, the code would be something like:

Flow Columns

If using flow columns, you need to pass the flow parameter to your semantic row.

Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
Portfolio Item
The HTML
The CSS

Adding adaptive responsiveness:

Using numeric values:

Using fractions:

With Mobile-First enabled:

Magic Columns

Product
Product
Product
Product
Product
Product
Product

Block Columns

Feature
Feature
Feature

The width option below is not required if your columns will all be equal length (Block Columns only).

No-Gutter Columns

Item
Item
Item

Because no-gutter columns have no gutter, they essenially act like Flow Columns, meaning you can create multiple effective column rows within just one main container:

Item
Item
Item
Item
Item
Item

Whilst in theory 'adaptive responsiveness' can work with No-Gutter Columns, Kayzen GS does not currently offer this funcitonality.

Column Aligning

Whilst Kayzen GS does not come with any classes or mixins to align your columns, it is extremely easy to add this functionality yourself. To horizontally align a row of columns, simply set the text-align CSS property of your row to either left, right or center as desired:

This column is centrally aligned.

To vertically align your columns, set the vertical-align CSS property of your column. By default, this is set to top.

This column is top aligned.
This column is middle aligned.
This column is bottom aligned.
This is the reference column.

Kayzen - Premium HTML Theme Framework

Help, Support & Contributing

For all issues, bugs suggestions and feature requests, please use the Github issues page. Any and all contributions are welcomed!

Follow @esr360 on Twitter!