kengai

The bonsai.io app UI guide.

Layout

Our layout system uses a 12-column flexbox-based grid.

Grid

Grid Structure

Use a container parent component. New row sections should have a class of columns. Add child columns with class column. Specify their width with col-*.

col-6
col-3
col-2
col-1 
<div class="container">
  <div class="columns">
    <div class="column col-6">
      <div class="bg-secondary">
        col-6
      </div>
    </div>
    <div class="column col-3">
      <div class="bg-secondary">
        col-3
      </div>
    </div>
    <div class="column col-2">
      <div class="bg-secondary">
        col-2
      </div>
    </div>
    <div class="column col-1">
      <div class="bg-secondary">
        col-1
      </div>
    </div>
  </div>
</div>

Grid Nesting

To nest grids, add the new columns and column structure within an existing column.

col-6
col-6
col-6
col-6
<div class="container">
  <div class="columns">
    <div class="column col-6">col-6
      <div class="columns">
        <div class="column col-6">
          <div class="bg-secondary">
            col-6
          </div>
        </div>
        <div class="column col-6">
          <div class="bg-secondary">
            col-6
          </div>
        </div>
      </div>
    </div>
    <div class="column col-6">col-6</div>
  </div>
</div>

Column Offset

The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

col-2 col-mx-auto
col-2
<div class="container">
  <div class="columns">
    <div class="column col-4 col-mx-auto">
      <div class="bg-secondary">
        col-2 col-mx-auto
      </div>
    </div>
    <div class="column col-2">col-2</div>
  </div>
</div>

Responsive

The responsive visibility utilities help show and hide elements on specific viewport sizes.

hide-xs
hide-sm
hide-md
hide-lg
hide-xl
show-xs
show-sm
show-md
show-lg
show-xl
<div class="bg-secondary {{modifier_class}}">{{ modifier_class }}</div>