Kempo CSS
Theme Editor
Layout
Display
| Class | CSS Value |
|---|---|
d-b |
block |
d-ib |
inline-block |
d-i |
inline |
d-f |
flex |
d-if |
inline-flex |
Flexbox
<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 b">flex</div>
<div class="flex-3">flex-3</div>
</div>100px
flex
flex
flex
flex
flex-2
flex
flex-3
*Additional styles applied for demonstration purposes.
Grid System
<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>col
col
col
col span-4
col span-8
*Additional styles applied for demonstration purposes.
Responsive Grid
This responsive grid is based on the size of the viewport, not the size of the container. The example below is running in an iframe for easy demonstration, but if you need the layout to be responsive to the contianer size see the Alternative Responsive Grid below.
<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>*Additional styles applied for demonstration purposes.
Alternative Responsive Grid
<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>
col, min-width: 150px
col, min-width: 200px
col, min-width: 300px
*Additional styles applied for demonstration purposes.