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

View on Github View Sass Documentation

• Basic Example
• Responsiveness
• Flow Columns
• Adaptive Columns
• Magic Columns
• Block Columns
• No-Gutter Columns
• Reverse Column Order
• Push/Pull Columns
• Semantic Examples
• Column Aligning

Default Kayzen Grid System

Basic Example

<div class="row">                    
    <div class="span-6">span-6</div>
    <div class="span-6">span-6</div>
</div>
<div class="row">                    
    <div class="span-4">span-4</div>
    <div class="span-4">span-4</div>
    <div class="span-4">span-4</div>
</div>
<div class="row">                    
    <div class="span-3">span-3</div>
    <div class="span-3">span-3</div>
    <div class="span-3">span-3</div>
</div>

<div class="row">                    
    <div class="span-3">Sidebar</div>
    <div class="span-9">Article</div>
</div>

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):

• break-0: 0px,
• break-1: 460px,
• break-2: 720px,
• break-3: 940px,
• break-4: 1200px

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.

<div class="row stack-break-2">                    
    <div class="span-3">Sidebar</div>
    <div class="span-9">Article</div>
</div>

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

<div class="row stack-break-4">                    
    <div class="span-3">Sidebar</div>
    <div class="span-9">Article</div>
</div>

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:

<div class="row row-no-stack">                       
	...
</div>
<div class="row stack-break-0">                       
	...
</div>

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:

<div class="row-flow">                       
    <div class="span-6">Flow Column</div>
    <div class="span-6">Flow Column</div>
    <div class="span-4">Flow Column</div>
    <div class="span-4">Flow Column</div>
    <div class="span-4">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
</div>

The above code will produce something similiar the following:

<div class="row">
    <div class="span-6">Flow Column</div>
    <div class="span-6">Flow Column</div>
</div>
<div class="row">
    <div class="span-4">Flow Column</div>
    <div class="span-4">Flow Column</div>
    <div class="span-4">Flow Column</div>
</div>
<div class="row">
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
</div>

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

<div class="row-flow stack-break-2">
    ...
</div>

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.

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

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:

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

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.

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

                    
<div class="row-magic">
    <div class="span">magic column</div>
    <div class="span">magic column</div>
    <div class="span">magic column</div>
    <div class="span">magic column</div>
    <div class="span">magic column</div>
</div>

<div class="row-magic">
    <div class="span">magic column</div>
    <div class="span">magic column</div>
</div>

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

<div class="row-magic stack-break-2">
    ...
</div>

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.

 
<div class="row-block">
    <div class="span-4">
        Block Column
    </div>
    <div class="span-4">
        Block Column
    </div>
    <div class="span-4">
        <p>Block Column</p>
		<p>This column causes the others to grow with it.</p>
    </div>
</div>

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:

<div class="row-block stack-break-2">
    ...
</div>

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**.

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

<div class="row-no-gutter stack-break-2">
    ...
</div>

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.

<div class="row row-reverse">
    ...
</div>

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.

<div class="row reverse-break-3">
    <div class="span-9">Main Content</div>
    <div class="span-3">Sidebar</div>
</div>

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:

<div class="row">
    <div class="span-6 push-6">...</div>
    <div class="span-6 pull-6">...</div>
</div>

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.

---

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

The HTML

 
<div class="main">
	<div class="sidebar">Sidebar</div>
	<div class="content">Content</div>
</div>

The CSS

 
.main {
	@include row;
}

.sidebar {
	@include column((
		'width' : (3, 12)
	));
}

.content {
	@include column((
		'width' : (9, 12)
	));
}

Column Options

Defaults

 
@include column((
    'width'        : 'full', 
    'type'         : null, 
    'stack'        : kgs-option('col-break'), 
    'mobile-first' : kgs-setting('mobile-first'),
    'respond-to'   : null
))

'width'

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

• (3, 12)
• 25% - this will be the width of your column including the gutter
• 'quarter' - you can use any fraction defined in the global configuration

'type'

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

• null - this is the default value used for regular columns
• 'flow' - use this value to create semantic Flow Columns
• 'magic' - use this value to create semantic Magic Columns
• 'block' - use this value to create semantic Block Columns
• 'no-gutter' - use this value to create semantic No-Gutter Columns

'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):

 
.portfolio-item {
    @include column((
        'type'       : 'flow',
		'width'      : (3, 12),
        'respond-to' : (
            'break-3': (4, 12),
            'break-2': (6, 12),
            'break-1': (12, 12)
        )
    ));
}

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

 
.portfolio-item {
    @include column((
        'mobile-first': true: 
		'type': 'flow',
		'respond-to' : (
            'break-1': (6, 12),
            'break-2': (4, 12),
            'break-3': (3, 12)
		)
    ));
}

Flow Columns

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

The HTML

 
<div class="portfolio-items">
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
	<div class="portfolio-item">Portfolio Item</div>
</div>

The CSS

 
.portfolio-items {
    @include row('flow');
}

.portfolio-item {
    @include column((
        'type'  : 'flow',
        'width' : (3, 12)
    ));
}

Adding adaptive responsiveness:

 
.portfolio-item {
    @include column((
        'type' : 'flow',
        'width': (3, 12),
        'respond-to' : (
            'break-3': (4, 12),
            'break-2': (6, 12),
            'break-1': (12, 12)
        )
    ));
}

Using numeric values:

 
.portfolio-item {
    @include column((
        'type' : 'flow',
        'width': 25%,
        'respond-to' : (
            'break-3': 100/3,
            'break-2': 50%,
            'break-1': 100%
        )
    ));
}

Using fractions:

 
.portfolio-item {
    @include column((
        'type' : 'flow',
        'width' : 'quarter',
        'respond-to' : (
			'break-3': 'third',
			'break-2': 'half',
		    'break-1': 'full'
        )
    ));
}

With Mobile-First enabled:

 
.portfolio-item {
    @include column((
        'mobile-first': true,
        'type': 'flow',
        'respond-to' : (
            'break-1': 'half',
            'break-2': 'third',
            'break-3': 'quarter', 
        )
    ));
}

Magic Columns

 
<div class="product-grid">
	<div class="product">Product</div>
	<div class="product">Product</div>
	<div class="product">Product</div>
	<div class="product">Product</div>
	<div class="product">Product</div>
</div>

<div class="product-grid">
	<div class="product">Product</div>
	<div class="product">Product</div>
</div>

 
.product-grid {
	@include row;
}

.product {
	@include column((
		'type' : 'magic'
	));
} 

Block Columns

 
<div class="features">
	<div class="feature">Feature</div>
	<div class="feature">Feature</div>
	<div class="feature">Feature</div>
</div>

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

 
.features {
	@include row;
}

.feature {
	@include column((
		'type'  : 'block',
		'width' : (4, 12)
	));
}

No-Gutter Columns

 
<div class="item">
	<div class="item">Item</div>
	<div class="item">Item</div>
	<div class="item">Item</div>
</div>

 
.items {
	@include row;
}

.item {
	@include column((
		'type'  : 'no-gutter',
		'width' : (4, 12)
	));
}

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:

 
<div class="item">
	<div class="item">Item</div>
	<div class="item">Item</div>
	<div class="item">Item</div>
	<div class="item">Item</div>
	<div class="item">Item</div>
	<div class="item">Item</div>
</div>

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:

 
<div class="row" style="text-align: center">
	<div class="span-6">This column is centrally aligned.</div>
</div>

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

 
<div class="row" style="height: 200px">
    <div class="span-3" style="vertical-align: top">
        This column is top aligned.
    </div>
    <div class="span-3" style="vertical-align: middle">
        This column is middle aligned.
    </div>
    <div class="span-3" style="vertical-align: bottom">
        This column is bottom aligned.
    </div>
    <div class="span-3" style="vertical-align: middle; height: 200px">
        This is the reference column.
    </div>
</div>

---

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!