Final adjustments
Utilities are for small corrections, not a second design system.
WebBlocks includes display, flex, spacing, typography, color, border, shadow, positioning, and visibility helpers. They are there to finish a composition, not replace the component and layout layers.
Groups
The helpers cover the common finishing moves.
They follow the same naming rhythm as the rest of the project: short, literal, and prefixed.
- display
- flex
- gap
- margin
- padding
- text
- font
- color
- border
- radius
- shadow
- position
- cursor
- opacity
- responsive visibility
Example
A few utilities can finish a layout without obscuring it.
This kind of usage is healthy: a component is doing most of the work, and utilities only refine spacing and alignment.
<div class="wb-card wb-mt-4">
<div class="wb-card-header wb-flex wb-items-center wb-justify-between wb-gap-3">
<strong class="wb-text-lg">Activity</strong>
<span class="wb-badge wb-badge-success wb-badge-dot">Live</span>
</div>
<div class="wb-card-body wb-p-4">...</div>
</div>
Boundary
When utilities start to look like the whole page, stop.
If the markup becomes a wall of helpers, move the decision back into the component or layout layer. The library is easier to read when utilities stay modest.
Use utilities to adjust. Use components and layouts to define.