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.
// 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.
<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.
<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.
<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.
<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.
<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.
<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.
<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
2
3
<div class="is-row"> <div class="is-col"> ... </div> <div class="is-col"> ... ... ... </div> </div>