system.cssthe engine GitHub

Don't hand-roll layout

Menu
HomeHow-toEngineComponentsLand & streamChartsAdvancedLabDemosSkills
OverviewThe recipeDatastar bindings these components useState belongs in `data-ui-*`, not `data-*`Don't hand-roll layoutContainer-responsiveAnchored popoverThe six componentsRocket componentsThe stepped dialogMorph armorThe .active utilityThe rocket state canonPre-ship checklistOne bad expression takes the whole page downDialogs on a live page

Don't hand-roll layout — compose primitives

A well-built component is almost no custom CSS. Push every layout decision into system.css classes in the markup; keep only shape and the type/color API in your stylesheet.

  • Layout → primitives in markup: .card (surface), .column/.row, .spread (space-between), .lcr (start/center/end), .ngrid with style="--cols:7" (fixed-column grid), .grid (auto-fit), .menu (anchored popover; note .center is TEXT centering, a utility — not a box-centering primitive). Never write display/flex/grid in component CSS.
  • Type & color → the API only: --type (size), --bg (surfaces), --fg (ink). E.g. .cal b { --type:-1; --fg:-0.9 }.
  • State → data-ui-* attributes (above) + .tag[data-ui-state="on|off"].
  • Shape → aspect-ratio. This is the one geometric thing you set yourself (square day cells, square keys). Add min-inline-size:0 so 1fr grid tracks can shrink, and display:grid; place-items:center to center the glyph.

Rule of thumb: a component rarely needs more than ~10 lines of custom CSS. The month calendar is 8–9 lines total (square + number color + the two data-ui-* outlines + the --bg in/out tints). If you're writing flexbox, you're fighting the system — reach for a primitive.