Layout

Flex and box layout utilities — custom elements and directives.

import { registerLayoutElements, row, col, stack, box } from 'mates-ui';
import { html } from 'mates';

// Custom elements — call once at app startup
registerLayoutElements(); // defines <x-row>, <x-col>, <x-box>

html`
  <x-col spacing="2" fill>
    <x-row spacing="1" align="between center">
      <h1>Logo</h1>
      <nav>Menu</nav>
    </x-row>
    <x-box p="2" bgcolor="var(--md-color-surface)" br="8px">
      Content
    </x-box>
  </x-col>
`

// Directives — no registration; apply flex/box to existing elements
html`
  <header ${row('between', 'center', { gap: '1rem', py: '0.75rem' })}>
    <h1>Logo</h1>
    <nav>Menu</nav>
  </header>
`;

Overview

Choose custom elements when you want a dedicated layout node that wraps children, or directives when you already have a semantic element and want flex/box styles without an extra DOM node.

Both share the same spacing scale (numbers × 8px) and alignment keywords.

Elements vs directives

API	DOM	Registration
`<x-row> / <x-col> / <x-box>`	Adds a node	Call `registerLayoutElements()` once.
`row / col / stack / box`	No extra node	Import and apply — no registration.

API — Layout system

import { registerLayoutElements, row, col, stack, box } from 'mates-ui';

Prop / Option	Type	Default	Description
`registerLayoutElements()`	`void`	—	Registers custom elements , , and . Idempotent — call once at startup.
`<x-row> / <x-col>`	`custom element`	—	Flex containers with fixed direction. Attributes: spacing, gap, align, wrap, inline, fill, p/px/py.
`<x-box>`	`custom element`	—	Generic box-model element — padding, margin, size, color, radius, shadow, flex child props, …
`row() / col() / stack() / box()`	`directive`	—	Apply the same layout styles to any existing element without an extra DOM node.