Skip to main content

basalt. · Component library

Layouts overview

Compositions that organize content, navigation and application structure.

Design thinking

Layouts coordinate children; they do not invent another visual density scale. This family includes navigation, tables and conversation composites, plus nonvisual theme and link providers that establish application-wide behavior.

Size and spacing

Intrinsic layout; children retain their own sizing rules. Layout spacing has four tiers: sm .75rem, md 1rem, lg 1.5rem and xl 2rem. Grids default to md; page sections use lg and section content uses sm. ContentIsland uses sm on mobile and md on desktop. Use intrinsic sizing and one scroll owner. Child actions, rows and labels keep compact control spacing.

Interaction and motion

Uppercase group labels and extra group spacing separate sidebar sections from destinations. Bright selected rows retain their fill while another row is hovered. Shared moving backgrounds belong to the list, not every row. Initial selection and layout changes snap; established user selections animate with transform and opacity. Disclosure chevrons rotate with shared nonlinear motion, and hidden content must not remain focusable.

Best practices

  • Assign each outer inset to one owner. Sticky wrappers only position panels; LayerCard slots own their insets. Use row/cell spacing for edge-to-edge lists instead of cancelling Body padding.
  • Keep routing, permissions, sorting and chat transport in Models/ViewModels. Views compose controls; only Views measure DOM geometry.
  • Preserve semantic table headers, stable row identity, numeric alignment and accessible names in compact layouts.
  • On narrow screens, adapt the composition instead of shrinking its text. Verify scroll reachability, keyboard navigation and five-line chat input behavior.

In this group