Foundations
Layout & Grid
A 12-column flexbox grid plus display, width and shadow helpers from styles/flex-grid.css, display.css and shadow.css.
Grid
Wrap columns in a .row. Column classes are responsive: col-{breakpoint}-{1..12} with breakpoints sm (576px), md (768px), lg (992px) and xl (1200px); below 576px columns stack full width. Plain .col shares the space equally.
col-lg-3 col-md-6 col-sm-12
col-lg-3 col-md-6 col-sm-12
col-lg-3 col-md-6 col-sm-12
col-lg-3 col-md-6 col-sm-12
col-lg-4
col-lg-8
col
col
col
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">...</div>
<div class="col-lg-3 col-md-6 col-sm-12">...</div>
</div>
<div class="row">
<div class="col-lg-4">Sidebar</div>
<div class="col-lg-8">Content</div>
</div>Display & width
d-flex, d-inline-flex, d-block, d-inline-block, d-grid, d-none; w-full, w-1/2, w-1/3, w-1/4, w-auto, w-fit and fixed widths w-100 to w-500.
<div class="d-flex w-full">...</div>
<span class="d-none">Hidden</span>Shadows
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
<div class="shadow-md">Raised card</div>
<div class="hover:shadow-lg">Lifts on hover</div>