Next: (hygguile components media), Previous: (hygguile components input), Up: API
Reserve a box with a fixed shape for its content, before that content arrives.
The reserved box is what keeps a page from jumping when an image, a video or an embed finally loads: the browser knows the shape from the first byte and lays out around it. A ratio the component does not understand is written through as given, so CSS’s own syntax is always available.
The children, as a list of nodes.
The shape: 'video (default), 'square, 'photo,
'wide, 'golden, a pair, a number, or a CSS string.
A list of rounding utilities. Defaults to (rounded-xl).
Whether the box hides anything that outgrows it. Defaults to true.
The element to build. Defaults to div.
Extra classes for the box.
Extra attributes, as pairs of name and value.
(aspect-ratio (list (img #:src "hero.jpg" #:alt ""))
#:ratio 'video)
Centre content horizontally (and optionally vertically) with a maximum reading width.
Horizontal centring is the default, because that is the one that keeps a
page readable: prose stops growing at max-w-prose and the gutter
on either side grows instead. Vertical centring – a sign-in form in
the middle of a page – is asked for with #:axis 'both.
The children, as a list of nodes.
A list of max-width utilities. Defaults to (max-w-prose).
A list of horizontal padding utilities. Defaults to (px-4).
'horizontal (default) or 'both.
The element to build. Defaults to div.
Extra classes for the wrapper.
Extra attributes, as pairs of name and value.
(center (list (h1 "Sign in") (form ...)) #:max-width '(max-w-md) #:axis 'both)
Lay children out in a row that wraps when it runs out of room.
A cluster is for the things that belong beside each other but not in a grid: a row of badges, a toolbar, a list of tags. It wraps rather than overflowing, which is what keeps a toolbar usable on a phone without a breakpoint of its own.
The children, as a list of nodes.
A list of gap utilities. Defaults to (gap-2).
Cross-axis alignment. Defaults to 'center.
Main-axis distribution: 'start (default), 'center,
'end or 'between.
The element to build. Defaults to div.
Extra classes for the cluster itself.
Extra attributes, as pairs of name and value.
(cluster (list (badge "new") (badge "beta" #:variant 'warning)))
Lay children out in a responsive grid.
Two modes, and the difference matters. Given columns, the grid is one column on a phone, two from the small breakpoint and the requested number from the medium one – the familiar shape, expressed with Olive’s breakpoint variants. Given min-column, the browser fits as many columns as the track can hold at that minimum width, which is what a gallery of cards wants: no breakpoint has to guess how wide a card should be, and a wide screen simply shows more of them.
The children, as a list of nodes.
The number of columns from the medium breakpoint up. Defaults to
2.
A list of gap utilities. Defaults to (gap-4).
An optional CSS length, such as "16rem", switching the grid to
intrinsic sizing instead of breakpoints.
Whether the grid may backfill holes left by items spanning several tracks.
The element to build. Defaults to div.
Extra classes for the grid itself.
Extra attributes, as pairs of name and value.
(grid (list (card ...) (card ...) (card ...)) #:columns 3) (grid (list (card ...) (card ...)) #:min-column "18rem")
Return ratio as the CSS aspect-ratio value it denotes, or
#f when the value is not a ratio this component understands.
Accepts 'video (16/9), 'square (1/1), 'photo (4/3),
'wide (21/9), 'golden, a pair such as '(16 . 9), a
number, or any string CSS already accepts.
A symbol, pair, number or string.
(ratio-label 'video) ;; => "16 / 9" (ratio-label '(4 . 3)) ;; => "4 / 3"
Insert deliberate empty space, or a flexible gap, between siblings.
A spacer is better than a margin on the thing after it, because it is
visible in the markup as a decision rather than looking like an accident
of one component’s defaults. In flexible layouts, #:grow? #t is
the spacer that pushes what follows to the far end of the row.
'vertical (default), 'horizontal or 'both.
A list of sizing utilities, such as (h-8). Ignored when
grow? is true.
Whether the spacer takes the free space on the main axis instead.
Extra classes for the spacer.
Extra attributes, as pairs of name and value.
(spacer #:size '(h-12)) (cluster (list (brand) (spacer #:grow? #t) (ui-mode-button)))
Lay out a main pane beside a secondary one, collapsing to one column on narrow screens.
The ratio is the contract: '(1 2) gives the start pane a third
and the end pane two thirds from the breakpoint up, and each pane simply
takes the whole row below it. That is a sidebar and its content, but
also a summary beside a form and a figure beside its caption.
The first pane’s nodes.
The second pane’s nodes.
A pair of positive integers, start then end. Defaults to (1 2).
A list of gap utilities. Defaults to (gap-6).
The breakpoint from which the panes sit side by side: 'md or
'lg (the default).
The element to build. Defaults to div.
Extra classes for the wrapper.
Extra attributes, as pairs of name and value.
(split #:start (list (sidebar ...))
#:end (list (main ...))
#:ratio '(1 3))
Stack children vertically with one rhythm between them.
This is the most-used layout in an interface: a heading, a paragraph, a button, all separated by the same gap. Writing the gap once, in the component, is what keeps two stacks on the same page from being four pixels apart in one place and six in another.
The children, as a list of nodes.
A list of gap utilities. Defaults to (gap-4).
Cross-axis alignment: 'stretch (default), 'start,
'center, 'end or 'baseline.
The element to build. Defaults to div.
Extra classes for the stack itself.
Extra attributes, as pairs of name and value.
(stack (list (h2 "Account")
(p "Signed in as Ada.")
(submit-button "Save"))
#:gap '(gap-2))
Next: (hygguile components media), Previous: (hygguile components input), Up: API