AniK UI Playground

Row & columns (nested, >12 children)

12 children, no column class

Children without a column class take one track each (auto placement).

Spans

More than 12 columns of children — wraps to a new line

Seven children spanning 24 columns: the highlighted ones start a new row, no ak-row wrapper per line needed.

Nested rows

Flush grid — ak-gap-0

Wide content cannot blow out a track

const wide = "a <pre> much wider than its column scrolls inside it";

minmax(0, 1fr) tracks plus min-width: 0 on every child: the <pre> scrolls instead of widening the column.

Page wrapper & layout tokens

ak-page caps width at --ak-page-max (75rem) with --ak-page-gutter side padding. Both are plain custom properties, overridable per element (D-041).

Mind the width: a 12-track row always has 11 gaps, even when every child spans all 12. At 3xl (64px) the row needs 704px before any content, so wide gaps belong behind a breakpoint — see the escape hatch under Spacing.

Responsive layout (viewport)

Mobile-first: the unprefixed class applies everywhere, each -sm/-md/-lg/-xl variant takes over from its breakpoint up. Resize the window.

Cards: 1 → 2 (sm) → 4 (lg) per line

ak-col-12 ak-col-sm-6 ak-col-lg-3

Main + aside: stacked, side by side from md

Flex direction: column, row from md

ak-flex ak-dir-column ak-dir-md-row

Container queries (ak-cq + ak-row together)

Drag the bottom-end corner of the blue frame. The layout follows the width of the ak-cq element, not the window. Thresholds are their own scale: c-sm 320, c-md 480, c-lg 640, c-xl 800px (D-023).

ak-cq and ak-row on the same element

Children use ak-col-12 ak-col-c-md-6 ak-col-c-lg-3. The row's children query the row itself, because a container query looks at the nearest ancestor container.

Same component, two containers

Identical markup in a narrow and a wide column. On a wide window the card stacks in the narrow column and goes horizontal in the wide one — same viewport, different containers. Below md both columns are full width, so both cards follow the page width.

Container variants beat viewport variants

On a large viewport, narrow the frame below 640px and the box goes to half width (the viewport variant); widen it past 640px and the container variant wins with a third. @container blocks are emitted after every @media block, so at equal specificity the container variant takes precedence.

ak-fixed inside ak-cq — containment caveat

The original container-query specification made an ak-cq element the containing block for position: fixed descendants. Browsers at the support floor (Chrome 111, Firefox 113, Safari 16.4) still do; current ones do not (D-048). This frame is a live test: it shows what your browser does, next to a contain: layout control that always captures.

Spacing & the --ak-row-gap escape hatch

Scale: ak-p-*

2, 4, 8, 16, 24, 32, 48, 64px — all through --ak-space-*.

Per-side and axis utilities

Gap: independent axes

ak-flex ak-flex-wrap ak-gap-x-xl ak-gap-y-2xs

Auto margins: ak-ms-auto pushes to the end

Responsive spacing escape hatch

Spacing utilities have no breakpoint variants by design. The row below has no gap class at all; the consumer CSS in demo.css moves --ak-row-gap from 2xs to 2xl at md:

.demo-card-grid { --ak-row-gap: var(--ak-space-2xs); }
@media (min-width: 768px) {
  .demo-card-grid { --ak-row-gap: var(--ak-space-2xl); }
}

Flex — fixed sidebar + filling main (ak-flex-1)

Grow, shrink and auto

Wrap vs. nowrap

Inline flex

Text with an ● ak-inline-flex chip in the middle of a sentence.

Alignment

ak-items-* (cross axis)

ak-justify-* (main axis)

ak-self-* per item

The same classes on ak-row (grid)

The values are start/end, not flex-start/flex-end, so they work in grid and flex alike.

Typography

Text scale with paired line-heights

Weight and alignment

ak-font-bold Bold text

ak-font-normal on a heading

ak-text-start

ak-text-center

ak-text-end

Display type, tracking & prose (D-043)

Fluid display sizes — resize the window

Tracking

ak-tracking-tight

ak-tracking-normal

ak-tracking-wide — for small caps and labels

ak-measure + ak-flow

ak-section — fluid block padding (64 → 120px)

Positioning

Start / bottom offsets

Offsets are logical: ak-start-0 is the left edge in LTR and the right edge in RTL (see the RTL section).

Visibility — hide at one size, restore at another

Resize the window and watch which boxes exist. Each box names the viewport range it is visible in.

By container width

Display utilities

ak-block on a span ak-inline-block ak-inline-block ak-inline

ak-sr-only

Visually hidden, still in the accessibility tree. Open the browser's accessibility inspector, or use a screen reader, to check that these controls have names.

The button's accessible name is “Close dialog”; the search field's is “Search the docs”.

Sizing

ak-w-full / ak-w-fit

ak-w-full — fills the inline axis.

ak-w-fit — shrinks to content, capped by the parent.

ak-min-w-0 — the flex overflow fix

Both rows hold the same wide <pre>. A flex child's automatic minimum size is its min-content width, so without ak-min-w-0 the main region refuses to shrink and the row overflows (the dashed frame scrolls to show it). With it, the main region takes its share and the <pre> scrolls. ak-row does this for its children automatically.

Without ak-min-w-0 — the row overflows:

const config = { breakpoints: { sm: "576px", md: "768px", lg: "992px", xl: "1200px" }, containerBreakpoints: { "c-sm": "320px", "c-md": "480px", "c-lg": "640px", "c-xl": "800px" } };

With ak-min-w-0 — the pre scrolls:

const config = { breakpoints: { sm: "576px", md: "768px", lg: "992px", xl: "1200px" }, containerBreakpoints: { "c-sm": "320px", "c-md": "480px", "c-lg": "640px", "c-xl": "800px" } };

ak-h-full inside a sized parent

ak-min-h-screen vs ak-h-screen

Both read --ak-viewport-block (default 100dvb). The min- variant is the one you usually want: it fills the viewport but still grows for taller content instead of clipping it. Resize / scroll on a phone to see dvb track the browser chrome.

RTL — logical properties flip

The same markup twice, the second inside dir="rtl". Every inline-axis utility is logical, so start/end swap sides with no extra classes.

Reset on vs. off

The reset is global, so each side is its own document. The two frames load the same markup; only the left one loads anik-reset.css. Look at the body margin (dashed outline), headings, the long word, role="list", the dd indent, the fixed-width box, the button font and the SVG.