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

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

33/34

67/66

<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

<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

<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

<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

<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%

<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%

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

<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
2
3

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