How to compose a page
PimentCSS documents atoms (buttons, fields, alerts) and molecules (forms, tables, modals). Patterns show how to wire them into flows you ship: a contact panel, a list screen with actions, or a data table with paging.
Each recipe is a short, copy-pasteable stack with links to the underlying component pages. Start here, then dive into Form, Navigation, or Feedback sections for API detail.
Recipes
Forms
Contact form
.form + fields, radios, checkbox, and submit.
Feedback + actions
Toolbar + modal
Status alert, .btn-group, and a dialog for a focused task.
Content
Table + pagination
Scrollable table, selection, and page controls under the grid.
Layout primitives
When you need empty regions before content exists (wireframes, CMS slots, blank cards), use dashed .slot placeholders and .slots-layout grids.
Slots & layouts
Column and row slot grids, fluid stacks, and blank card composition.
Layout
Container, 12-column grid, and spacing utilities.
Cards
Copy, newsletter, and blank slot cards.
Browse by domain
| Domain | Start with | Typical stack |
|---|---|---|
| Forms | Contact form | .form, .field, .btn |
| Feedback | Toolbar + modal | .alert, .btn-group, .modal |
| Data lists | Table + pagination | .table-scroll, .pagination |
| Navigation | Navigation | .header-nav, .tabs, .breadcrumb |