A comprehensive set of single-purpose utility classes that cover spacing, sizing, display, positioning, backgrounds, borders, shadows, visual effects, overflow, cursors, loading states, and responsive modifiers. Every utility maps directly to one or a few CSS declarations – add the class, get the style.
Padding and margin utilities use a 10-step spacing scale driven by CSS custom properties
--wf-space-1
through
--wf-space-10
. Step 0 sets the value to
0
. Directional shorthands cover inline (x), block (y), and individual sides (t/b/l/r).
wf-mx-auto
centres a block element horizontally.
All spacing utilities are available with four breakpoint prefixes. Classes without a prefix apply at all sizes; prefixed classes override only within their breakpoint.
wf-fluid
forces an element to full width and auto height inside a phone or mobile viewport.
Prefix
Breakpoint
Example
wf-phone-*
≤ 41.999 rem (≤ 671 px)
wf-phone-p-4
wf-mobile-*
42 – 61.999 rem (672 – 991 px)
wf-mobile-mt-3
wf-tablet-*
62 – 79.999 rem (992 – 1279 px)
wf-tablet-px-6
wf-screen-*
≥ 80rem (≥ 1280 px)
wf-screen-py-8
Each prefix supports the full set of
p, px, py, pt, pb, pl,
pr
and
m, mx, my, mt, mb, ml, mr, mx-auto
variants with steps 0-10.
wf-border-split-l
and
wf-border-split-r
convert side borders to top/bottom borders on phone and mobile.
HTML
<!-- Full padding on desktop, reduced on phone -->
<div class="wf-p-8 wf-phone-p-3">...</div>
<!-- Centre on all sizes, add top margin only on tablet+ -->
<div class="wf-mx-auto wf-tablet-mt-6">...</div>
<!-- Fluid (full-width) on phone only -->
<div class="wf-fluid">...</div>
Sizing
Control the width and height of any element with keyword, fractional, or fixed-step classes.
wf-size-*
sets both width and height to a fixed step simultaneously.
auto full screen fit min max · fractions: 1-2 1-3 2-3 1-4 3-4 1-5 2-5 3-5 4-5
wf-width
Width via --wf-width CSS variable
-
wf-min-w-*
Min-width
0 full
wf-max-w-*
Max-width
none full xs sm md lg xl 2xl 3xl 4xl 5xl 6xl screen
wf-h-*
Height
auto full screen svh fit min max
wf-height
Height via --wf-height CSS variable
-
wf-min-h-*
Min-height
0 full screen svh
wf-max-h-*
Max-height
none full screen
wf-size-*
Sets width and height equally
1–12 · 2xl 3xl 4xl full
Display & Visibility
Set the CSS
display
property with a single class.
wf-hidden
hides an element (removes from flow);
wf-show
and
wf-hide
toggle visibility via a JS-friendly convention.
Set the CSS
position
property and control
inset
offsets and stacking order with utility classes. Inset sides also have a CSS-variable-driven form (
wf-top
,
wf-right
, etc.) that read from
--wf-top
etc.
Background utilities cover semantic surface tokens, the full palette, inverted variants, opacity-adjusted tints, and gradient classes. Add a direction modifier or
wf-soft
to gradient classes to adjust appearance.
Add borders on all sides or individual sides, set width, style, and color – all composable. Border-radius scales from
wf-rounded-1
(2px) to
wf-rounded-10
(24px) plus
wf-rounded-full
for pills and circles, with per-corner control.
sage indigo earth forest plum lavender dusk light dark grey
wf-border-split-l/r
Converts a side border to top/bottom at phone/mobile breakpoints
-
wf-rounded-*
Border radius (all corners)
1–10 full
wf-rounded-tl/tr/br/bl-*
Border radius per corner
1–10 full
Shadows
Seven levels of box-shadow depth from
wf-shadow-none
to
wf-shadow-xl
, all driven by the
--shadow-color
CSS variable so they adapt to dark mode automatically.
Adjust opacity, apply CSS filters (blur, grayscale), rotate elements, and enable hover transitions with composable classes. Pair
wf-hover
with any
wf-hoverable-*
modifier to animate on mouse-over.
Combine
wf-hover
(adds CSS transition) with one
wf-hoverable-*
modifier. The
wf-attached-*
classes clip an element to one edge of its positioned parent for overlay panels.
Add
wf-hover-reveal
to any child inside a
wf-hover
parent to hide it by default and reveal it smoothly on
:hover
or
:focus-within
. Useful for action links and secondary controls that should not clutter the idle state.
TJ
This startup is revolutionizing the industry with AI
<!-- wf-hover parent triggers reveal on :hover and :focus-within -->
<div class="wf-hover">
<div>
<p>Title</p>
<p>Subtitle</p>
</div>
<!-- hidden by default, fades + slides in on hover -->
<a href="#" class="wf-hover-reveal">Read →</a>
</div>
Shapes & Transform
Create geometric shapes, rotate elements by fixed angles, translate to center an element in its positioned parent, and lock an element to a specific aspect ratio.
auto default pointer wait text move not-allowed grab grabbing zoom-in zoom-out crosshair help none
wf-pointer-events-*
Pointer event capture
none auto
wf-select-*
User text selection
none text all auto
Loading States
wf-loading
overlays any container with a blurred backdrop and an animated dot spinner while blocking interaction.
wf-button-loading
turns a button into an animated three-dot loader – useful for async form submissions.
Container loading
Content hidden
HTML
<!-- Container loading overlay -->
<div class="wf-loading">
<p>Content hidden while loading</p>
</div>
<!-- Button loading state -->
<button class="wf-button-loading"></button>
Breadcrumb
A lightweight breadcrumb component built entirely with utility classes. The
wf-breadcrumb
wrapper handles flex layout and text casing;
wf-crumb
marks each item,
is_active
highlights the current page, and
wf-separator
renders the delimiter.
Individual breadcrumb item – link opacity 50%, 100% on hover
wf-separator
Delimiter between crumbs (flex-grow: 1)
is_active
Current/active breadcrumb - full opacity, font-weight 600
Responsive Visibility
Show or hide elements at specific breakpoints without writing media queries.
wf-{bp}-hidden
hides with
display: none
!important
;
wf-{bp}-visible
restores with
display: revert !important
.
HTML
<!-- Hidden on phone, visible everywhere else -->
<div class="wf-phone-hidden">...</div>
<!-- Hidden on mobile only -->
<div class="wf-mobile-hidden">...</div>
<!-- Visible only on tablet -->
<div class="wf-phone-hidden wf-mobile-hidden wf-screen-hidden wf-tablet-visible">...</div>
<!-- Hidden on large screens -->
<div class="wf-screen-hidden">...</div>
Class
Breakpoint
Effect
wf-phone-hidden
≤ 41.999 rem
display: none !important
wf-phone-visible
≤ 41.999 rem
display: revert !important
wf-mobile-hidden
42 – 61.999 rem
display: none !important
wf-mobile-visible
42 – 61.999 rem
display: revert !important
wf-tablet-hidden
62 – 79.999 rem
display: none !important
wf-tablet-visible
62 – 79.999 rem
display: revert !important
wf-screen-hidden
≥ 80 rem
display: none !important
wf-screen-visible
≥ 80 rem
display: revert !important
Class Reference
Complete listing of all utility classes grouped by category. Numeric suffixes and named variants are listed inline in the Values column.
Class
Description
Values
Spacing
wf-p-*
Padding all sides
0–10, x
wf-px-*
Padding inline
0–10, x
wf-py-*
Padding block
0–10, x
wf-pt/pb/pl/pr-*
Padding per side
0–10, x
wf-m-*
Margin all sides
0–10, x
wf-mx-*
Margin inline
0–10, x, auto
wf-my-*
Margin block
0–10, x
wf-mt/mb/ml/mr-*
Margin per side
0–10, x
Responsive Spacing
wf-phone-p/px/py/pt/pb/pl/pr-*
Phone breakpoint padding
0–10
wf-phone-m/mx/my/mt/mb/ml/mr-*
Phone breakpoint margin
0–10, mx-auto
wf-mobile-p/px/py/pt/pb/pl/pr-*
Mobile breakpoint padding
0–10
wf-mobile-m/mx/my/mt/mb/ml/mr-*
Mobile breakpoint margin
0–10, mx-auto
wf-tablet-p/px/py/pt/pb/pl/pr-*
Tablet breakpoint padding
0–10
wf-tablet-m/mx/my/mt/mb/ml/mr-*
Tablet breakpoint margin
0–10, mx-auto
wf-screen-p/px/py/pt/pb/pl/pr-*
Screen breakpoint padding
0–10
wf-screen-m/mx/my/mt/mb/ml/mr-*
Screen breakpoint margin
0–10, mx-auto
wf-fluid
Force full-width/auto-height (phone & mobile)
-
Sizing
wf-w-*
Width
auto full screen fit min max · fractions: 1-2 1-3 2-3 1-4 3-4 1-5 2-5 3-5 4-5
wf-width
Width via CSS variable
Set --wf-width
wf-min-w-*
Min-width
0 full
wf-max-w-*
Max-width
none full xs sm md lg xl 2xl 3xl 4xl 5xl 6xl screen
