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.