Usage

We suggest layout rules and allow the browser to make the right judgements based on its context. Instead of specifying a fixed breakpoint at which a layout should change, the layouts define restrictions that the browser should adhere to in order to arrange content on its own. The layouts are designed to facilitate this process by providing a skeletal structure that should not interfere with featured components, while also supporting any component variant.

Configuration #

If you want to change the value of a custom property, you can either set a value in your context, or target the composition itself (E.G .sidebar) for extra specificity. Please read the configuration section in the relevant layout documentation.

The default values are fallbacks for custom properties, so are easily overridden.

Gutters and Spacing #

Most layouts use a consistent --gutter Custom Property to manage spacing between items. You can either set a value for this in context, just like in the configuration section above, or you can use the gutter utility classes.

For example, you could increase the gutter on the sidebar like this:

<div class="sidebar" style="--gutter: var(--spacing-xl);">
	<div>Sidebar</div>
	<div>Content</div>
</div>

or this

<div class="sidebar gutter-xl">
	<div>Sidebar</div>
	<div>Content</div>
</div>

Justification and alignment #

Each composition has a vertical and horizontal alignment Custom Property if applicable, but you can also use the items and justify Tailwind utility classes like this:

<div class="repel items-start">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>