Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Grid

Simple grid classes

#

12 columns based grid for easily layouting forms and other components. This uses flexbox internally.

24
12
12
6
6
6
6
4
4
4
4
4
4
3
3
3
3
3
3
3
3
2
2
2
2
2
2
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
This column will adapt to its content.
This column will fill the remaining space.
<div class="o-grid">
    <div class="o-grid-col-24">24</div>
    <div class="o-grid-col-12 o-grid-col-sm-24">12</div>
    <div class="o-grid-col-12 o-grid-col-sm-24">12</div>
    <div class="o-grid-col-6">6</div>
    <div class="o-grid-col-6">6</div>
    <div class="o-grid-col-6">6</div>
    <div class="o-grid-col-6">6</div>
    <div class="o-grid-col-4">4</div>
    <div class="o-grid-col-4">4</div>
    <div class="o-grid-col-4">4</div>
    <div class="o-grid-col-4">4</div>
    <div class="o-grid-col-4">4</div>
    <div class="o-grid-col-4">4</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-3">3</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-2">2</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-1">1</div>
    <div class="o-grid-col-static">This column will adapt to its content.</div>
    <div class="o-grid-col-flex">This column will fill the remaining space.</div>
</div>
.o-grid
    .o-grid-col-24 24
    .o-grid-col-12.o-grid-col-sm-24 12
    .o-grid-col-12.o-grid-col-sm-24 12
    .o-grid-col-6 6
    .o-grid-col-6 6
    .o-grid-col-6 6
    .o-grid-col-6 6
    .o-grid-col-4 4
    .o-grid-col-4 4
    .o-grid-col-4 4
    .o-grid-col-4 4
    .o-grid-col-4 4
    .o-grid-col-4 4
    .o-grid-col-3 3
    .o-grid-col-3 3
    .o-grid-col-3 3
    .o-grid-col-3 3
    .o-grid-col-3 3
    .o-grid-col-3 3
    .o-grid-col-3 3
    .o-grid-col-3 3
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-2 2
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-1 1
    .o-grid-col-static This column will adapt to its content.
    .o-grid-col-flex This column will fill the remaining space.