Fit to Size
The Fit engine (fit.js) shrinks a horizontal row to fit its
container — degrading the least-important slots first, lowest priority first,
and restoring them as space returns. It powers the navbar, but it's not
navbar-only: call pureAdmin.components.fit.init(el) (or attach
the PureAdminNavFit hook) on any flex row.
data-pc-fit="hide|steps|sidebar" makes an element a slot;
data-pc-fit-priority orders them (lower goes first);
data-pc-fit-auto on a container folds in every child
without tagging each; data-pc-fit-ignore pins one out entirely.
Drag the sliders — or open this page on a narrow phone — to
watch each row fold.
1 · Card toolbar — shrink, don't lose
A steps slot degrades full label → icon-only → gone
instead of vanishing outright. Here Save is pinned full
(data-pc-fit-ignore); Duplicate and
Export shrink to icons; Delete is un-tagged,
so it inherits the toolbar's data-pc-fit-default-priority="20" and
drops first.
Sales Overview
Drag left: Delete drops → Export shrinks to its icon, then drops → Duplicate shrinks → only Save remains, always full.
2 · Product card — chart ↔ KPI
Swapping a rich chart for compact KPI numbers
is a 2-D layout change, not a 1-D row fold — so this one is a pure CSS
container query on the card, no JS engine. The right half
shows the Chart.js sparkline while there's room and swaps to a
pa-stat KPI once the card narrows past 45rem (450px).
Arabica Cold Brew
SKU-4471 · 1 L bottle
Drag left (or view on a phone): past 45rem the chart gives way to
the KPI stat — same data, denser. Drag right to bring the chart back.
Same card, no slider — resize your browser window
Identical card, but with no .fit-stage wrapper and no
slider — full-width in the page. The container query reads the card's
real width, so drag your browser window narrower and the chart becomes
the KPI on its own. This is the production behaviour; the slider above only
simulated it.
Arabica Cold Brew
SKU-4471 · 1 L bottle
3 · Rich product card — degrade on multiple levels
One card restyling on several axes at once. This is a single CSS container query with three widths. As it narrows, the three data panels (Orders · Stock · Sales) collapse from a 3-column grid into tabs, then the tab labels drop to icons only; in step, the header sheds its supplier, then its packaging line and trend badge.
Arabica Cold Brew
Orders
Stock
Sales
Three levels, one query. ≥640px → the 3-panel grid; 340–640px → tabbed with labels; <340px → icon-only tabs. Nothing is re-fetched or re-rendered — the same markup re-flows.
4 · Same card, on the engine — with a chart it builds on demand
Example 3's card again — the same three-level degrade — but driven by the
Container Breakpoint engine instead of a CSS
@container. Two things CSS can't do: the engine toggles a
real .d-none class you can watch hop in devtools,
and it fires a per-flip callback — so the grid-only revenue chart
is built only when the card is wide enough to show it, and destroyed
otherwise. Watch the log.
10px, so
34 = 340px and 64 = 640px. The engine picks the
largest mode whose width the card has passed.