Module pattern 

Layouts used often enough to name, each a function that returns a Style.

Each pattern is a starting point. Add to it with the property methods, or merge it into another style with Style::merge, and a later value for the same property wins.

use hypersig_style::pattern::{center, hstack, stack};
use hypersig_style::value::{JustifyContent, rem};

let toolbar = hstack(rem(0.5)).justify_content(JustifyContent::SpaceBetween);
let column = stack(rem(1));
let badge = center();

Functions

aspect_ratio

A box whose height follows its width at ratio (width over height), with its content clipped to it.

center

Children centered on both axes.

circle

A circle size across that centers its children.

container

A block no wider than max, centered, with padding on both sides.

divider

A line across the box, width thick.

grid

A grid of columns equal columns, gap apart.

grid_item

A grid child spanning columns columns.

hstack

Children in a row, centered on its line, gap apart.

link_overlay

Makes a link cover the nearest positioned ancestor, so a whole card is clickable. Put aspect_ratio or position: relative on the card.

spacer

An empty flex child that takes the free space, pushing its siblings apart.

square

A size square that centers its children.

stack

Children in a column, gap apart.

visually_hidden

Hidden from sight but read by screen readers, as the sr-only utility of Tailwind CSS and Panda CSS’s visuallyHidden pattern write it.

vstack

Children in a column, centered across it, gap apart.

wrap

Children in rows that wrap onto new lines, gap apart.