Utilities
USWDS ships utility classes for layout and type. QFlow ships none: the same jobs are done by the
data-* axes of Box (P-01) and Text (P-02), which are also the React props. This page maps
each USWDS utility family to its axis.
Layout axes
| USWDS utility | QFlow | Notes |
|---|---|---|
| Layout grid |
Box data-display="grid" · data-cols
|
No 12-column page grid: app screens are panes. Split panes use Resizable. |
| Display | Box data-display |
flex · inline-flex · grid · inline · none |
| Flex |
Box data-direction · data-align ·
data-justify · data-wrap · data-flex
|
Gap replaces margins between children. |
| Margin and padding |
Box data-gap · data-p ·
data-px · data-py
|
Values are the spacing scale (0–8). There is no margin axis: space between things is the parent’s gap. |
| Height and width | Box data-w · data-h |
full only; fixed sizes come from the component, not the page. |
| Overflow | Box data-overflow |
Scrolling regions use ScrollArea. |
| Position | Box data-position |
Floating content uses Layer, never a raw z-index. |
| Font, text align, line height |
Text data-size · data-weight ·
data-align · data-truncate · data-mono
|
The type scale on the Typography tokens page. |
| Text color | Text data-tone · data-color |
Tones are semantic, so both themes stay in contrast. |
| Background color, border, radius, shadow |
Surface data-elevation ·
data-radius
|
Surfaces pair a background with its ink; see the Color and Elevation tokens. |
| Opacity, order, z-index | — | Not offered. Reordering with CSS breaks reading order (WCAG 1.3.2), and stacking is the Layer tokens’ job. |
Why there are no utility classes
- An axis is an enumerated attribute, so a typo is caught by the markup contract and the React types instead of silently doing nothing.
- Every value is a token, so the light and dark themes and the root size scale everything at once.
- A screen is composed from elements, not styled from scratch, so most layout lives inside components.