layout
Grid
Lays out cards or tiles in as many equal columns as fit.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Columns appear as room allows, each at least 16rem wide, and drop to one column on phones. No breakpoints needed.
Lessons
Plan and move lessons.
Students
Follow progress per student.
Invoices
Send and track payments.
<ul class="ca-grid ca-grid--md m-0 w-full list-none p-0">
<li class="ca-card"><h3 class="ca-card__title">Lessons</h3><p class="ca-card__description">Plan and move lessons.</p></li>
<li class="ca-card"><h3 class="ca-card__title">Students</h3><p class="ca-card__description">Follow progress per student.</p></li>
<li class="ca-card"><h3 class="ca-card__title">Invoices</h3><p class="ca-card__description">Send and track payments.</p></li>
</ul>Examples
Narrower columns
Set --ca-grid-min for a different minimum width, here with a Tailwind arbitrary property.
Students
128
Lessons
42
Cars
6
Instructors
4
<ul class="ca-grid ca-grid--sm m-0 w-full list-none p-0 [--ca-grid-min:8rem]">
<li class="ca-stat"><p class="ca-stat__label">Students</p><p class="ca-stat__value">128</p></li>
<li class="ca-stat"><p class="ca-stat__label">Lessons</p><p class="ca-stat__value">42</p></li>
<li class="ca-stat"><p class="ca-stat__label">Cars</p><p class="ca-stat__value">6</p></li>
<li class="ca-stat"><p class="ca-stat__label">Instructors</p><p class="ca-stat__value">4</p></li>
</ul>Guidance and accessibility
When to use
- Use a grid for items of the same kind, such as cards, stats or photos.
- The number of columns follows the space, so the same grid works in a sidebar and across a page.
Accessibility
- Use a list (
<ul>) for a set of items, so screen readers announce how many there are. - Items keep their markup order in every column count.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-grid | Component | Equal columns, each at least --ca-grid-min wide (16rem by default). |
ca-grid--sm | Size | Tight space between items. |
ca-grid--md | Size | Default space. |
ca-grid--lg | Size | Wide space. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Lessons
Plan and move lessons.
Students
Follow progress per student.
Invoices
Send and track payments.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Lessons
Plan and move lessons.
Students
Follow progress per student.
Invoices
Send and track payments.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Lessons
Plan and move lessons.
Students
Follow progress per student.
Invoices
Send and track payments.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Lessons
Plan and move lessons.
Students
Follow progress per student.
Invoices
Send and track payments.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>