Grid

Kube uses fully responsive, flexbox-enabled column grid. You can combine or divide columns, nest them, and do all sorts of things. Kube's grid is just about how to organize content in the columns and is not about how to markup all website by the grid. Because building the grid for a website is a completely different story and a technology.

Columns #

Here's how columns are formed in Kube, and here's how you can use them right away.

column
column
column
column
column
column
column
column
column
column
column
column
column
column
column
column
column
column
column
column
// two columns
<div class="is-row">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

// three columns
<div class="is-row">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

// etc.

Width #

By default, columns have the auto-equal width, but you can set the specific percentage width with the size classes.

10
90
20
80
25
75
30
70
33/34
67/66
35
65
40
60
50
50
<div class="is-row">
    <div class="is-col is-10">...</div>
    <div class="is-col is-90">...</div>
</div>
<div class="is-row">
    <div class="is-col is-20">...</div>
    <div class="is-col is-80">...</div>
</div>
<div class="is-row">
    <div class="is-col is-25">...</div>
    <div class="is-col is-75">...</div>
</div>
<div class="is-row">
    <div class="is-col is-30">...</div>
    <div class="is-col is-70">...</div>
</div>
<div class="is-row">
    <div class="is-col is-33">...</div>
    <div class="is-col is-67">...</div>
</div>
<div class="is-row">
    <div class="is-col is-34">...</div>
    <div class="is-col is-66">...</div>
</div>
<div class="is-row">
    <div class="is-col is-35">...</div>
    <div class="is-col is-65">...</div>
</div>
<div class="is-row">
    <div class="is-col is-40">...</div>
    <div class="is-col is-60">...</div>
</div>
<div class="is-row">
    <div class="is-col is-50">...</div>
    <div class="is-col is-50">...</div>
</div>

Gapless #

The is-gapless for the row removes the gap between columns.

column
column
column
40
60
<div class="is-row is-gapless is-stack-20">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

<div class="is-row is-gapless">
    <div class="is-col is-40">...</div>
    <div class="is-col is-60">...</div>
</div>

Space #

The rows and columns in the grid do not have a bottom margin by default. Because the grid is just a markup. It should not affect design and spacing.

So use the Space module and is-stack modifiers to set the bottom margin for the row.

column
column
column
column
column
<div class="is-row is-stack-20">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

<div class="is-row">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

Set the bottom margin with is-col-stack classes for each column in the row.

column
column
column
column
column
column
column
<div class="is-row is-col-stack-20">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>
<div class="is-row is-col-stack-20">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

You can change the behaviour of column margin with -mobile prefix for the spacing class on the mobile devices.

column
column
column
column
column
column
<div class="is-row is-col-stack-20 is-col-stack-80-mobile">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>
<div class="is-row is-col-stack-20 is-col-stack-none-mobile">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

Bricks #

Columns become bricks in the row with the specified width of them plus the .is-bricks class.

50%
50%
50%
50%
<div class="is-row is-bricks is-col-stack-24">
    <div class="is-col is-50">...</div>
    ...
</div>

Bricks + Gapless

The is-gapless for the row removes the gap form both sides of bricks.

25%
25%
25%
25%
25%
25%
25%
25%
<div class="is-row is-bricks is-gapless">
    <div class="col is-25">...</div>
    ...
</div>

Nested #

Here's an example of nesting columns within columns.

50
40
60
<div class="is-row">
    <div class="is-col is-50">...</div>
    <div class="is-col is-50">
        <div class="is-row">
            <div class="is-col is-40">...</div>
            <div class="is-col is-60">...</div>
        </div>
    </div>
</div>

Equal Height Columns #

Columns are equal height by default in Kube

1
1
2
3
<div class="is-row">
    <div class="is-col">
        ...
    </div>
    <div class="is-col">
        ...
        ...
        ...
    </div>
</div>