dryui-build

DryUI Layout Blocks: Proportion Weights

Create only labelled colored layout blocks. The output proves region hierarchy, not finished UI.

Allowed edits:

• src/routes/+page.svelte
• src/layout.css

No imports, components, icons, images, charts, tables, forms, buttons, inputs, avatars, or realistic widgets.

Region Weighting

Before coding, classify every visible region:

• primary: the dominant workspace, board, reader, canvas, or form.
• secondary: inspector, AI panel, account detail, task detail, help panel.
• chrome: top bar, nav, rails, tabs, action bar.
• summary: KPI strips, filters, quick stats.
• utility: activity, recent updates, footer tools.

The generated layout must preserve these weights:

• primary is largest at every breakpoint.
• Desktop primary normally gets minmax(0, 1fr) or larger.
• secondary is narrower than primary unless the reference shows equal panes.
• chrome is compact but persistent when visible in the reference.
• Utility regions must not push the primary workspace below the fold on desktop.

Page Structure

Use exactly one shell:

<main data-layout="<name>-shell">
	<div data-layout-area="page">...</div>
</main>

Use direct semantic child regions with meaningful data-layout-area names.

Layout CSS

Only src/layout.css may contain grid/flex/container rules.

[data-layout='<name>-shell'] {
	container: <name> / inline-size;
}

[data-layout='<name>-shell'] [data-layout-area='page'] {
	display: grid;
	grid-template-areas:
		'topbar'
		'navigation'
		'primary'
		'secondary';
}

@container <name> (min-width: 48rem) {
}
@container <name> (min-width: 72rem) {
}

Container name and query name must match exactly.

Proportion Tools

Use these in src/layout.css when they match the reference:

• grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.32fr);
• grid-template-columns: 14rem minmax(0, 1fr) 18rem;
• grid-template-rows: auto auto minmax(24rem, 1fr) auto;
• min-block-size on primary reader/board/workspace regions.
• align-items: stretch for pane layouts.