Displays and Layouts

Display

Class Display Value
d-b block
d-ib inline-block
d-i inline
d-f flex
d-if inline-flex

Flex Values

Use classes flex-1 through flex-10 to assign a flex value to a flexed child (parent has a flex display. Flex values will flex relative to each other's values.

<div class="d-f">
<div style="width: 100px">
100px
</div>
<div class="flex">
flex
</div>
</div>
<div class="d-f">
<div class="flex">
flex
</div>
<div class="flex">
flex
</div>
</div>
<div class="d-f">
<div class="flex">
flex
</div>
<div class="flex-2">
flex-2
</div>
</div>
<div class="d-f">
<div class="flex">
flex
</div>
<div class="flex-3">
flex-3
</div>
</div>
Output*
100px
flex
flex
flex
flex
flex-2
flex
flex-3

12 Column Grid

Create a parent with class row and children with class col, optionally add span-* classes (1-12).

<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col span-4">col span-4</div>
<div class="col span-8">col span-8</div>
</div>
Output*
col
col
col
col span-4
col span-8
Responsive 12 Column Grid

Optionally use d-span-* for desktop, t-span-* for tablet, and m-span-* for mobile to make the grid responsive.

<div class="row">
<div class="col d-span-3 t-span-6 m-span-12">
col d-span-3 t-span-6 m-span-12
</div>
<div class="col d-span-3 t-span-6 m-span-12">
col d-span-3 t-span-6 m-span-12
</div>
<div class="col d-span-3 t-span-6 m-span-12">
col d-span-3 t-span-6 m-span-12
</div>
<div class="col d-span-3 t-span-6 m-span-12">
col d-span-3 t-span-6 m-span-12
</div>
</div>
Output*
Alternative Responsive 12 Column Grid

Rather than declairing a size for device sizes, you should consider just giving each section a min-width that correspondes to the minumum space it requires to be useable, and let Kempo do the rest.

<k-resize dimention="width">
<div class="row">
<div class="col" style="min-width: 150px">col, min-width: 150px</div>
<div class="col" style="min-width: 200px">col, min-width: 200px</div>
<div class="col" style="min-width: 300px">col, min-width: 300px</div>
</div>
</k-resize>
Output*
col, min-width: 150px
col, min-width: 200px
col, min-width: 300px

* Notes

Additional styles may be added to the example output (borders, spacing, colors) for demonstration.