Reference

Authoritative, terse, exhaustive. Look things up here. Reference pages do not teach: for that, read the tutorial or a how-to guide. Subcategories below mirror the framework's src/<category>/ directory shape.

Base

  • Reset: Foundational normalisation pass: zeroes margins, list bullets, form gaps and box-sizing across the user-agent palette.
  • Global: Roots the page in theme tokens: sets html bg/fg from --kc-bg / --kc-fg and applies the forced-colors palette remap.

Layout

  • Container: Horizontally-centered wrapper with per-breakpoint max-width.
  • Flex container: Horizontal layout primitive built on native flex gap. Auto-distributes columns; pair with grid for fractional layouts.
  • Grid: CSS Grid container: auto-fit responsive flow plus explicit fixed-column mode.
  • Hero: Full-width banner with head / body / foot slots, size + height modifiers, and shared colour combinations.
  • Footer: Page-anchoring surface with generous block-end padding and shared colour combinations.

Typography

  • Typography: Five plugins: base, title, link, content, table.
  • Blockquote: Pull-quote styling for the native blockquote element with optional attribution footer.
  • Lead: Intro-paragraph styling for the first line of an article or section.
  • Figure: Inline-block media container with responsive child image and softened caption.
  • List: Helper classes to strip list styling and lay items out inline.

Element

  • Badge: Inline pill indicator for counts, statuses, or tags.
  • Box: Flat surface affordance with subtle elevation. Tracks the active theme by default; opts into brand-pinned surfaces via .is-* combinations and their light variants.
  • Button: Tag-and-class component, .is-* combination scheme, AAA touch targets.
  • Spinner: Indeterminate progress indicator. Rotating ring (default) or pulsing disc (.is-grow), three sizes, brand-tinted via .is-* combinations.
  • Image: Responsive media wrapper with aspect-ratio and fixed-square modifiers, rounded / circle / thumbnail decorations, and a standalone .img-fluid utility.
  • Divider: Logical hairline rule. Horizontal by default, vertical and text-flanked variants for inline separators and labelled section breaks.
  • Progress: Determinate progress bar styled for native <progress> and a div-pair fallback.
  • Forms: Index of the eight per-control form pages plus the field wrapper.
  • Checkbox: Native HTML checkbox repainted with appearance:none, primary-tinted check glyph, and theme-aware focus ring.
  • Radio: Native radio button repainted with appearance:none, inner dot drawn via radial-gradient (no extra pseudo-elements).
  • Switch: Toggle-style checkbox painted as a sliding pill. Same native semantics as a checkbox, with an animated thumb.
  • Text input: Single-line text-flavoured inputs (text, email, search, password, tel, url, number) sharing one selector list.
  • Textarea: Multi-line text input with a minimum height floor and vertical-only resize by default.
  • Select: Single and multi-option select control with a custom caret SVG inlined as data URL, RTL-flipped.
  • File: Styled native file input with a polished vendor button (::file-selector-button) sitting in its own rule block.
  • Range: Native range slider with track + thumb repainted across WebKit and Gecko vendor pseudos.

Module

  • Alert: Sectional status banner with optional icon slot and accent stripe.
  • Buttons: Flex wrapper that groups button elements with consistent spacing, optional addon-collapse, and three alignment modifiers.
  • Card: Structured surface with header / image / content / footer subparts. Themed via the shared .is-* combinations.
  • Section: Vertically-padded page section with density variants and an auto-stripped trailing border.
  • Breadcrumb: Navigation trail with a single themed pseudo-element separator and current-page disambiguation.
  • Pagination: Numbered navigation strip with prev/next slots, ellipsis, current-page surface pinned to the primary combination, and disabled-state hooks.
  • Dropdown: Reusable click / hover / aria-driven disclosure panel. Hidden-checkbox toggle, zero JS by default.
  • Popover: Anchored disclosure panel with a CSS arrow, four placements, and four reveal modes — hover, focus-within, .is-active, and [data-open].
  • Toast: Stacking notification surface. Fixed container with six placement variants, light/dark combination pairs, and dual CSS / JS dismiss support.
  • Modal: Native <dialog> styling with two open mechanisms: showModal() (full a11y, one line of JS) and :target (zero JS, partial modal contract).
  • Navbar: Horizontal site navigation with click-toggle dropdowns and a details-driven mobile toggle. Zero JS by default.
  • Tabs: Hidden-radio + adjacent-sibling pattern for JS-free tabs. No index cap; any number of tabs.
  • Field: Wrapper for label + control + help text with a non-colour invalid glyph cue and disabled dimming.

Helper

  • State icons: Non-colour cue for status: prepends a glyph to elements carrying [data-state="success|warning|danger"].
  • Visibility: Display modifiers, hidden, invisible, and screen-reader-only utilities with per-breakpoint scopes.
  • Spacing: Margin and padding utilities on a six-step rem scale, RTL-safe via CSS logical properties.
  • Text: Typography utilities for alignment, transform, weight, decoration, wrap, and font family.
  • Color: Theme-aware text and background colour utilities for each combination in the palette.
  • Flex: Flexbox child utilities: direction, justify, align, wrap, grow/shrink, and gap on the framework spacing scale.
  • Sizing: Width, height, and viewport-relative sizing utilities for quick layout overrides.
  • Position: CSS position utilities plus fixed and sticky bar recipes with a Bootstrap-aligned z-index scale.
  • Shadow: Four-step elevation scale (none, sm, base, lg) for box-shadow overrides.
  • Border: Border, border-radius, and shadow-reset utilities, including pill and circle shorthands.
  • Interactions: Pointer, selection, float, clearfix, and stretched-link utilities for escape-hatch interaction tweaks.
  • Aspect ratio: Aspect-ratio container primitive driven by the modern aspect-ratio property and the --kc-ratio custom property.
  • Object fit: Utility classes wrapping the CSS object-fit property for replaced elements (img, video, canvas).
  • Overflow: Overflow utilities on all three axes, plus the .is-clipped Bulma-compatibility alias.
  • Stack: Bootstrap-inspired .hstack / .vstack flex primitives with gap driven by a CSS custom property.
  • Font size: Fixed font-size utilities .is-size-1 through .is-size-6.
  • Line height: Bootstrap-style line-height utilities .lh-1, .lh-sm, .lh-base, .lh-lg.
  • Tooltip: CSS-only tooltip driven by [data-tooltip] with hover and focus-within reveal across four positions.
  • Breakpoints: The $responsive-breakpoints map and the from/until/containerFrom/containerUntil mixins, keyed by device class (mobile/tablet/desktop/widescreen/fullhd).

Tokens & theming

  • --kc-* tokens: Every required and optional CSS custom property the framework reads, plus the pnpm tokens:build JSON export.
  • Color combinations: Deep-accent palette (AAA body text) and the (background, foreground) tuples driving every themed component.
  • Themes: Bundled palettes (default, dark, high-contrast), per-tuple contrast scores.
  • Theme contract: theme() mixin signature, tokens consumed by the framework, fallback semantics.