Overview

<x-box> maps common CSS properties to HTML attributes. Spacing numbers use an 8px scale; string values pass through as-is.

Use it for cards, constrained page wrappers, and flex children (grow, self) inside <x-row>/<x-col>.

Sidebar + growing main

Fixed-width sidebar box beside a grow="1" main panel.

import { html, renderApp } from 'mates';
import { registerLayoutElements } from 'mates-ui';

registerLayoutElements();

const App = () => {
return () => html`
<div class="card card-body m-w-full">
<x-row spacing="1" fill>
<x-box w="140px" p="1" bgcolor="var(--m-bg)" br="var(--m-r)">Sidebar</x-box>
<x-box grow="1" p="2" bgcolor="var(--m-surface)" br="var(--m-r)">
<strong>Main panel</strong>
<p class="hint m-t-10">
grow="1" fills remaining space.
</p>
</x-box>
</x-row>
</div>
`;
};

renderApp(App, document.getElementById('app'));