Grid

Kube uses fully responsive, flexbox-enabled 12-column grid. You can combine or divide columns, nest them, center them horizontally or vertically, and do all sorts of things. Here are a few examples of what you can do with Kube's grid.

Columns

Columns are building blocks for many websites. Here's how columns are formed in Kube, and here's how you can use them right away.

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12 
<div class="row">
    <div class="col col-4">...</div>
    <div class="col col-8">...</div>
</div>

Gutters

3
9 
<div class="row gutters">
    <div class="col col-3">...</div>
    <div class="col col-9">...</div>
</div>

Auto Width

auto
auto
auto 
<div class="row auto">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>
Auto + Gutters
auto
auto
auto
auto 
<div class="row gutters auto">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Bricks

50%
50%
50%
50% 
<div class="row">
    <div class="col col-6">...</div>
    <div class="col col-6">...</div>
    <div class="col col-6">...</div>
    <div class="col col-6">...</div>
</div>
Bricks + Gutters
33%
33%
33%
33%
33%
33% 
<div class="row gutters">
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
</div>

Offset

Offsetting columns is very simple in Kube. Just use column's class as usual, for example, col col-2 and then add the offset value offset-4. This will offset this column and all following columns by 4.

2
6 
<div class="row">
    <div class="col col-2">...</div>
    <div class="col col-6 offset-4">...</div>
</div>

Nested

Here's an example of nesting columns within columns. In this example, we have a single row, with two columns .col col-6, a div nested within the second column, with .row end class to denote where to inject nested columns, and the three nested columns.

6
4
4
4 
<div class="row">
    <div class="col col-6">...</div>
    <div class="col col-6">
        <div class="row">
            <div class="col col-4">...</div>
            <div class="col col-4">...</div>
            <div class="col col-4">...</div>
        </div>
    </div>
</div>

Equal Height Columns

Columns are equal height by default in Kube

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

Reordering

First
4
8 
<div class="row">
    <div class="col col-4">...</div>
    <div class="col col-8 first">...</div>
</div>
Last
3
9 
<div class="row">
    <div class="col col-3 last">...</div>
    <div class="col col-9">...</div>
</div>

Around

When you want your columns to be surrounded by an even margins on both sides, just use .around class.

3
3
3 
<div class="row around">
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
</div>

Between

Sometime you just need space between columns, and not around them. Well, there's a class for that: .between

3
3
3 
<div class="row between">
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
</div>

Alignment

Align Center
6 
<div class="row align-center">
    <div class="col col-6">...</div>
</div>
Align Right
3
3 
<div class="row align-right">
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
</div>
Align Middle
4
4
4 
<div class="row align-middle">
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
</div>

Push

Push Center
.push-center 
<div class="row">
    <div class="col col-4 push-center">...</div>
</div>
Push Right
...
.push-right 
<div class="row">
    <div class="col col-6">...</div>
    <div class="col col-4 push-right">...</div>
</div>
Push Middle
.push-middle 
<div class="row">
    <div class="col col-8 push-middle">...</div>
</div>
Push Mixed
.push-middle.push-center 
<div class="row">
    <div class="col col-8 push-middle push-center">...</div>
</div>
Push Bottom
.push-bottom 
<div class="row">
    <div class="col col-8 push-bottom">...</div>
</div>

Fixed Width Column

Here's one more bit of magic. You can set a fixed width column and still have a responsive and flexible layout right beside this fixed width column.

sidebar
content 
<!-- scss -->
#container {
    @include grid-row;
}
#sidebar {
    @include flex-item-width(300px);
}
#content {
    @include flex-item-auto;
}

<!-- html -->
<div id="container">
    <div id="sidebar">Sidebar</div>
    <div id="content">Content</div>
</div>

Media Grid

Media grid is a great example of Kube's flexibility and versatility. Whenever you have some media to display, you can choose to use Media grid. This type of grid is ideal for featuring photos; it adds some visual music and slight randomness to your layout.

1
2
3
4
5
6
7
8
9
10 
<!-- scss -->
#media-grid {

    @include grid-media-columns(2);

    & > div {
        margin-bottom: 20px;
        height: 80px;
    }
    & > div:nth-child(2n) {
      height: 200px;
    }
    & > div:nth-child(5n) {
      height: 120px;
    }
}

<!-- html -->
<div id="media-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>