Layout patterns

hypersig::style::pattern has functions that return the styles of common layouts. Merge the returned style with your own.

use hypersig::html::{div, span};
use hypersig::style::Media;
use hypersig::style::pattern::{center, circle, container, grid, hstack, spacer, stack, visually_hidden};
use hypersig::style::value::rem;
use hypersig::Signals;
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
struct Gallery {
    count: i32,
}

let page = div::<Gallery>()
    // At most 64rem wide, centered, with 1rem on both sides.
    .css(container(rem(64), rem(1)))
    .child(
        div()
            .css(hstack(rem(0.5)))
            .child(div().css(circle(rem(2)).merge(center())).text("A"))
            .child(span().text("Ada"))
            .child(div().css(spacer()))
            .child(span().css(visually_hidden()).text("3 new messages")),
    )
    .child(
        // One column, then three from the medium breakpoint.
        div()
            .css(grid(1, rem(1)).on(Media::Md, grid(3, rem(1))))
            .children((1..=6).map(|n| div().css(stack(rem(0.25))).text(n.to_string()))),
    );

Pattern	Lays out
`stack(gap)`, `vstack(gap)`	Children in a column, the second centered across it
`hstack(gap)`	Children in a row, centered on its line
`wrap(gap)`	Children in rows that wrap onto new lines
`grid(columns, gap)`, `grid_item(columns)`	A grid of equal columns, and a child spanning several
`container(max, padding)`	A block no wider than `max`, centered, with padding on both sides
`center()`, `spacer()`	Children centered on both axes, and an empty flex child that takes the free space
`square(size)`, `circle(size)`, `aspect_ratio(ratio)`	Boxes of a fixed shape
`divider(width, color)`	A line across the box
`visually_hidden()`	Hidden from sight but read by screen readers
`link_overlay()`	A link that covers its positioned ancestor, so a whole card is clickable

Result

layout.rs

use hypersig::html::{div, span};
use hypersig::style::Style;
use hypersig::style::pattern::{center, circle, grid, hstack, spacer, stack};
use hypersig::style::value::{Color, FontWeight, px, rem};
use hypersig::{Page, Signals};
use hypersig_ui::{BadgeVariant, ButtonSize, ButtonVariant, badge, button, token};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Team {
    columns: i32,
}

pub fn page() -> Page<Team> {
    let tile = || {
        div().css(
            center()
                .height(rem(3))
                .border_radius(px(6))
                .background_color(token::muted().var()),
        )
    };
    Page::new(
        "Team",
        Team { columns: 0 },
    )
    .child(
        div()
            .css(stack(rem(1.25)))
            .child(
                div()
                    .css(hstack(rem(0.75)))
                    .child(
                        div()
                            .css(
                                circle(rem(2.5))
                                    .background_color(Color::hex(0x0018_181b))
                                    .color(Color::WHITE),
                            )
                            .text("AL"),
                    )
                    .child(
                        span()
                            .css(Style::new().font_weight(FontWeight::Number(600.0)))
                            .text("Ada Lovelace"),
                    )
                    .child(badge(BadgeVariant::Secondary).text("Admin"))
                    .child(div().css(spacer()))
                    .child(
                        button(ButtonVariant::Outline, ButtonSize::Sm).text("Message"),
                    ),
            )
            .child(
                div()
                    .css(grid(3, rem(0.75)))
                    .children((1..=6).map(|n| tile().text(n.to_string()))),
            ),
    )
}