The rules — one vocabulary, no inventions
- These classes are the template's ADDITIONS to Bootstrap — everything else on this site is stock Bootstrap. Before writing custom css or inventing a class, check this page: the vocabulary probably already covers the need.
- They behave like Bootstrap's own utilities: same naming, same responsive infixes and
!importantsemantics where Bootstrap uses them (w-*), theme-aware always. - Each class has ONE law page where usage is settled — the reference table below links it. This page shows the samples; the law page says when.
- A NEW class earns its place only through the add-a-new-style contract (
templates/app/docs/components/foundation.md): control-panel tokens, the template scss, foundation.md and THIS page — all in the same change.
Width utilities — .w-1 … .w-100, responsive
Percentage widths in 1% steps with responsive variants (
.w-sm-* / .w-md-* / .w-lg-* / .w-xl-* / .w-xxl-*) — stock Bootstrap stops at 25/50/75/100. Primary job: the lister column standard..w-25
.w-40
.w-63
.w-100 .w-md-55 — full width on phones, 55% from md up (resize me)
Button extras — the full catalog lives at /components/buttons
.btn-xs — the size below .btn-sm, on every variant.btn-contrast — dark on light theme, light on dark theme (row-action dropdowns, expand toggles).btn-icon-round — a perfect circle whose diameter follows the size class; the standard expand toggle is btn btn-xs btn-contrast btn-icon-round.btn-soft-* — subtle background + emphasis text; .btn-soft-outline-* — transparent with a subtle border (the button-row Cancel)Badges & inputs
.badge-count — the notification pill on tabs/menu items; governed by the tab-pill law (/components/tabs): something NEW awaiting the user, never a plain size
Invitations
3
Notifications
12
.verify-code-input — the verification-code box (centered, spaced digits); collected via g.codePrompt in-app, inline panels on the auth pages only (/libs/dialog).offcanvas-size-sm/-lg/-xl/-full + .offcanvas-footer — the offcanvas widths (default 30rem, all clamp to 100vw on mobile) and the sticky button row of the offcanvas form standardReference — class → law
| Class | What it is | The law + live reference |
|---|---|---|
.w-1 … .w-100 (+ .w-{bp}-*) |
Percentage widths, 1% steps, responsive | foundation.md "Width utilities"; the lister column standard (lister.md) — /pages/list |
.btn-xs |
The size below .btn-sm, every variant |
foundation.md; the catalog — /components/buttons |
.btn-contrast |
Theme-flipping dark/light button | foundation.md; row-action shapes (lister.md) — /pages/list |
.btn-icon-round |
Round icon button, diameter from the size class | foundation.md; the expand-toggle standard — /standards/ui |
.btn-soft-* / .btn-soft-outline-* |
Subtle-background / subtle-border button families | foundation.md; the button-row standard's Cancel (forms.md) — /components/forms |
.badge-count |
The notification count pill | cards.md "Tabs" + the tab-pill law — /components/tabs |
.offcanvas-size-sm/-lg/-xl/-full, .offcanvas-footer |
Offcanvas widths + the sticky button row | forms.md "Offcanvas forms" — /pages/list |
.verify-code-input |
The verification-code box | dialog.md "g.codePrompt" — /libs/dialog; the auth panels (auth.md) |
.page-header / .page-header-actions |
The page title row + its action zone | the page skeleton — /standards/page |
.auth-card / .auth-card-wide |
The auth-layout card shells | auth.md — /pages/auth/login, /pages/auth/complete |
Standard offcanvas
The default width is 30rem; .offcanvas-size-sm/-lg/-xl/-full re-size it and every size clamps to 100vw on mobile. The footer below is .offcanvas-footer — the standard button row, sticky under the scrolling body.