Grid
Basic
Mobile first, 12-columns, nestable, responsive grid system which is fully compatible with Bootstrap's grid system.
The class names are modified by following this library's naming convention (based on MindBEMding).
| Boostrap | Kaizen Platform |
|---|---|
.container |
.c-container |
.container-fluid |
.c-container--fluid |
.row |
.c-row |
.col-md-* |
.c-col--md-* |
2
2
2
2
2
2
4
4
4
3
6
3
2
8
2
3
9
4
8
5
7
6
6
.c-container--fluid
.c-row.display
.c-col--md-2 2
.c-col--md-2 2
.c-col--md-2 2
.c-col--md-2 2
.c-col--md-2 2
.c-col--md-2 2
.c-row.display
.c-col--md-4 4
.c-col--md-4 4
.c-col--md-4 4
.c-row.display
.c-col--md-3 3
.c-col--md-6 6
.c-col--md-3 3
.c-row.display
.c-col--md-2 2
.c-col--md-8 8
.c-col--md-2 2
.c-row.display
.c-col--md-3 3
.c-col--md-9 9
.c-row.display
.c-col--md-4 4
.c-col--md-8 8
.c-row.display
.c-col--md-5 5
.c-col--md-7 7
.c-row.display
.c-col--md-6 6
.c-col--md-6 6
<div class="c-container--fluid">
<div class="c-row display">
<div class="c-col--md-2">
2
</div>
<div class="c-col--md-2">
2
</div>
<div class="c-col--md-2">
2
</div>
<div class="c-col--md-2">
2
</div>
<div class="c-col--md-2">
2
</div>
<div class="c-col--md-2">
2
</div>
</div>
<div class="c-row display">
<div class="c-col--md-4">
4
</div>
<div class="c-col--md-4">
4
</div>
<div class="c-col--md-4">
4
</div>
</div>
<div class="c-row display">
<div class="c-col--md-3">
3
</div>
<div class="c-col--md-6">
6
</div>
<div class="c-col--md-3">
3
</div>
</div>
<div class="c-row display">
<div class="c-col--md-2">
2
</div>
<div class="c-col--md-8">
8
</div>
<div class="c-col--md-2">
2
</div>
</div>
<div class="c-row display">
<div class="c-col--md-3">
3
</div>
<div class="c-col--md-9">
9
</div>
</div>
<div class="c-row display">
<div class="c-col--md-4">
4
</div>
<div class="c-col--md-8">
8
</div>
</div>
<div class="c-row display">
<div class="c-col--md-5">
5
</div>
<div class="c-col--md-7">
7
</div>
</div>
<div class="c-row display">
<div class="c-col--md-6">
6
</div>
<div class="c-col--md-6">
6
</div>
</div>
</div>.c-row.display classname in the above example is for displaying grid lines as demo. It's available only in this document. Please use only .c-row.
Breakpoints
| Devices | Screen size | Prefix |
|---|---|---|
| Phones (Extra small devices) | <768px | xs |
| Tablets (Small devices) | ≥768px | sm |
| Desktop (Medium devices) | ≥992px | md |
| Wide desktop (Large devices) | ≥1200px | lg |
// Extra small devices (phones, less than 768px)
// No media query since this is the default
// Small devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Medium devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Responsive grid
Try resizing your browser window or checking on various devices.
12 in Mobile6 in Tablet8 in Desktop8 in Wide desktop
6 in Mobile6 in Tablet4 in Desktop4 in Wide desktop
6 in Mobile4 in Tablet4 in Desktop4 in Wide desktop
6 in Mobile4 in Tablet4 in Desktop4 in Wide desktop
6 and clear in Mobile4 in Tablet4 in Desktop4 in Wide desktop
.c-container--fluid
.c-row.display
.c-col--xs-12.c-col--sm-6.c-col--md-8
span.u-show-for-xs-only 12 in Mobile
span.u-show-for-sm-only 6 in Tablet
span.u-show-for-md-only 8 in Desktop
span.u-show-for-lg-only 8 in Wide desktop
.c-col--xs-6.c-col--md-4
span.u-show-for-xs-only 6 in Mobile
span.u-show-for-sm-only 6 in Tablet
span.u-show-for-md-only 4 in Desktop
span.u-show-for-lg-only 4 in Wide desktop
.c-row.display
.c-col--xs-6.c-col--sm-4
span.u-show-for-xs-only 6 in Mobile
span.u-show-for-sm-only 4 in Tablet
span.u-show-for-md-only 4 in Desktop
span.u-show-for-lg-only 4 in Wide desktop
.c-col--xs-6.c-col--sm-4
span.u-show-for-xs-only 6 in Mobile
span.u-show-for-sm-only 4 in Tablet
span.u-show-for-md-only 4 in Desktop
span.u-show-for-lg-only 4 in Wide desktop
.u-clearfix.u-show-for-xs-only
.c-col--xs-6.c-col--sm-4
span.u-show-for-xs-only 6 and clear in Mobile
span.u-show-for-sm-only 4 in Tablet
span.u-show-for-md-only 4 in Desktop
span.u-show-for-lg-only 4 in Wide desktop
<div class="c-container--fluid">
<div class="c-row display">
<div class="c-col--xs-12 c-col--sm-6 c-col--md-8">
<span class="u-show-for-xs-only">12 in Mobile</span><span class="u-show-for-sm-only">6 in Tablet</span><span class="u-show-for-md-only">8 in Desktop</span><span class="u-show-for-lg-only">8 in Wide desktop</span>
</div>
<div class="c-col--xs-6 c-col--md-4">
<span class="u-show-for-xs-only">6 in Mobile</span><span class="u-show-for-sm-only">6 in Tablet</span><span class="u-show-for-md-only">4 in Desktop</span><span class="u-show-for-lg-only">4 in Wide desktop</span>
</div>
</div>
<div class="c-row display">
<div class="c-col--xs-6 c-col--sm-4">
<span class="u-show-for-xs-only">6 in Mobile</span><span class="u-show-for-sm-only">4 in Tablet</span><span class="u-show-for-md-only">4 in Desktop</span><span class="u-show-for-lg-only">4 in Wide desktop</span>
</div>
<div class="c-col--xs-6 c-col--sm-4">
<span class="u-show-for-xs-only">6 in Mobile</span><span class="u-show-for-sm-only">4 in Tablet</span><span class="u-show-for-md-only">4 in Desktop</span><span class="u-show-for-lg-only">4 in Wide desktop</span>
</div>
<div class="u-clearfix u-show-for-xs-only"></div>
<div class="c-col--xs-6 c-col--sm-4">
<span class="u-show-for-xs-only">6 and clear in Mobile</span><span class="u-show-for-sm-only">4 in Tablet</span><span class="u-show-for-md-only">4 in Desktop</span><span class="u-show-for-lg-only">4 in Wide desktop</span>
</div>
</div>
</div>Offsetting columns
Move columns to the right using .c-col--md-offset-* classes.
4
4
3
3
6
.c-container--fluid
.c-row.display
.c-col--md-4 4
.c-col--md-4.c-col--md-offset-4 4
.c-row.display
.c-col--md-3.c-col--md-offset-3 3
.c-col--md-3.c-col--md-offset-3 3
.c-row.display
.c-col--md-6.c-col--md-offset-3 6
<div class="c-container--fluid">
<div class="c-row display">
<div class="c-col--md-4">
4
</div>
<div class="c-col--md-4 c-col--md-offset-4">
4
</div>
</div>
<div class="c-row display">
<div class="c-col--md-3 c-col--md-offset-3">
3
</div>
<div class="c-col--md-3 c-col--md-offset-3">
3
</div>
</div>
<div class="c-row display">
<div class="c-col--md-6 c-col--md-offset-3">
6
</div>
</div>
</div>