Learn 34 Utilities concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Adds outer space around an element using the product spacing scale.
Create margin utility classes backed by named spacing tokens rather than arbitrary values. Include logical block and inline variants, responsive variants only where justified, a zero reset, and documentation showing that margins affect space outside an element.Adds inner space between an element's content and its boundary.
Create padding utility classes using the shared spacing scale. Provide logical block and inline directions, preserve comfortable touch targets, avoid fixed heights that clip content, and document how padding creates space inside an element.Controls consistent spacing between flex or grid children without child margins.
Create gap utilities for grid and flex layouts using the spacing token scale. Include row-gap and column-gap variants, let wrapping layouts keep consistent gutters, and prefer gap over compensating margins on child elements.Sets intrinsic, fractional, full, or token-based element widths.
Create width utilities for auto, intrinsic, fractional, full and token-based widths. Use relative units where possible, pair fixed choices with max-width safeguards, and ensure content can reflow without horizontal page scrolling at narrow viewports.Controls element height while distinguishing fixed, full, screen, and automatic sizing.
Create height utilities for auto, full, minimum viewport and token-based heights. Prefer min-height for content regions, use dynamic viewport units for full-screen mobile layouts, and avoid clipping when text grows or the browser chrome changes.Constrains an element without forcing one rigid width or height.
Create min-width, max-width, min-height and max-height utilities using content and layout tokens. Include readable text measures and full-size escape values, allow shrinking in grid and flex children, and test zoom plus long localized content.Positions an inset element from logical or physical edges.
Create inset utilities for positioned elements with token-based offsets, zero and auto values. Include logical inset-inline and inset-block variants, account for safe-area insets when pinned to a viewport edge, and avoid covering focused content.Preserves a predictable width-to-height ratio while the element resizes.
Create aspect-ratio utilities for common square, portrait, landscape and video ratios. Let replaced media fill the box with an intentional object-fit value, reserve layout space before loading, and allow content-led components to opt out of a forced ratio.Chooses whether declared dimensions include an element's border and padding.
Create a box-sizing utility and a global border-box baseline whose pseudo-elements inherit it. Document the difference between border-box and content-box, and reserve content-box for deliberate exceptions rather than mixing sizing models accidentally.Switches an element among block, inline, flex, grid, or none display modes.
Create display utilities for block, inline, inline-block, flex, inline-flex, grid and none. Support breakpoint variants, make hidden content unavailable to all users only when intended, and do not use display none when content must remain available to assistive technology.Controls flexible direction, wrapping, growth, shrinkage, and basis.
Create composable flex utilities for direction, wrap, grow, shrink and basis. Use gap for spacing, provide min-width zero where long content must shrink, keep source order meaningful, and document the responsive variants that are actually enabled.Creates reusable column, row, span, and auto-placement rules for CSS Grid.
Create grid utilities for common column counts, spans, auto-flow and intrinsic minmax tracks. Use design-token gaps, collapse responsibly on narrow screens, avoid visual reordering that conflicts with DOM order, and let content determine track height.Aligns and distributes children along flex or grid axes.
Create alignment utilities for justify-content, align-items, align-content, place-items and individual self-alignment. Name start and end values logically for bidirectional interfaces, and show that main-axis behavior changes with flex direction.Changes visual order in flex or grid without changing document order.
Create a small set of order utilities for exceptional responsive layouts. Keep the DOM order logical for reading and keyboard navigation, never use visual order to repair semantic structure, and document the accessibility risk beside every example.Controls clipping or scrolling when content exceeds an element's box.
Create overflow utilities for visible, hidden, clip, auto and directional scrolling. Keep scroll containers keyboard reachable when needed, preserve visible focus, use stable scrollbars where layout shift matters, and never hide essential content without another path to it.Chooses static, relative, absolute, fixed, or sticky positioning behavior.
Create position utilities for static, relative, absolute, fixed and sticky. Pair non-static positions with intentional inset and z-index tokens, prevent overlays from obscuring focus or content, and prefer normal document flow unless positioning adds clear value.Wraps content around media or clears legacy floated content.
Create float-start, float-end and clear utilities for the limited cases where text should wrap around media or legacy floats must be contained. Use logical directions, include a modern flow-root clearfix, and prefer flex or grid for general page layout.Applies semantic foreground colors for default, muted, success, warning, or danger text.
Create semantic text-color utilities backed by theme tokens such as default, muted, link, success, warning and danger. Verify contrast against every supported surface, do not communicate status by color alone, and support forced-colors mode.Applies tokenized surfaces and semantic background colors.
Create background utilities from semantic surface tokens rather than raw brand colors. Pair each surface with compatible foreground and border tokens, test light and dark themes, and avoid background-only distinctions when state must remain perceivable.Controls border presence, side, width, style, and semantic color.
Create border utilities for all sides and logical block or inline edges, with a restrained width and semantic color scale. Keep focus indicators separate from decorative borders and ensure high-contrast mode can still reveal important boundaries.Rounds selected corners using a consistent radius scale.
Create border-radius utilities for none, small, medium, large, full and logical corner variants. Use a short token scale that expresses the design language, avoid clipping visible focus, and do not apply pill shapes to controls whose label may wrap.Applies a consistent elevation shadow or removes an existing one.
Create a restrained shadow utility scale for raised, floating and overlay surfaces plus a none reset. Back it with design tokens, combine elevation with boundaries or position rather than shadow alone, and tune values for both light and dark themes.Adjusts the transparency of an entire element and its descendants.
Create opacity utilities from a small token scale and document that they affect an element plus its descendants. Do not use low opacity for essential text or disabled-state semantics alone, preserve required contrast, and use color alpha tokens when only a background should be translucent.Draws a non-layout-shifting line around an element, commonly for focus or debugging.
Create outline utilities for accessible focus rings and temporary layout debugging. Use sufficient contrast and offset for focus, preserve the native outline unless replacing it with an equally visible indicator, and support forced-colors mode without relying on box-shadow alone.Shows an appropriate pointer cue for selectable, draggable, busy, or unavailable content.
Create cursor utilities for default, pointer, text, grab, grabbing, wait and not-allowed states. Match the cursor to real behavior, never imply clickability without keyboard access, and pair unavailable cursors with semantic disabled state and explanatory text when needed.Applies a utility only at or above a named responsive breakpoint.
Create mobile-first breakpoint variants for the utility system using content-driven named breakpoints. Keep the unprefixed utility as the small-screen default, generate only approved combinations to control CSS size, and test reflow at intermediate widths rather than device labels alone.Applies a utility conditionally on hover, focus, active, disabled, or checked state.
Create state variants for hover, focus-visible, active, disabled and checked conditions where the utility is meaningful. Keep keyboard focus at least as clear as hover, avoid hover-only information, expose state semantically, and generate a deliberate allowlist rather than every possible combination.Switches semantic utility tokens for light, dark, or system color preference.
Create light and dark color-scheme variants using semantic tokens and a system-preference default. Persist an explicit user choice, set the color-scheme property for native controls, prevent a flash of the wrong theme, and recheck text, border, focus and status contrast in both modes.Shows or hides selected content only in printed output.
Create print-only and print-hidden utilities with an @media print stylesheet. Preserve document meaning and URLs needed on paper, remove nonessential controls rather than merely fading them, avoid blank space from hidden regions, and verify in print preview at common paper sizes.Provides a strong keyboard focus indicator without suppressing native focus behavior.
Create a focus-visible utility using a high-contrast outline, sufficient thickness and offset. Ensure the focused component is not fully obscured by sticky or overlay content, support forced-colors mode, and never remove the browser outline without an equivalent replacement.Reduces or removes nonessential animation when the user requests less motion.
Create reduced-motion variants that remove nonessential animation, parallax and smooth scrolling while preserving state changes. Prefer short fades or instant updates, keep essential progress understandable, and test with the operating-system reduced-motion preference enabled.Adapts important boundaries and states to system-controlled high-contrast colors.
Create forced-colors variants using system color keywords for text, backgrounds, borders and focus indicators. Restore boundaries normally drawn only with shadows or background images, avoid unnecessary forced-color-adjust overrides, and test Windows High Contrast themes.Maps spacing, sizing, borders, and positioning to writing direction instead of fixed left or right edges.
Create logical-property utilities for margin, padding, border, inset and size using block, inline, start and end terminology. Support left-to-right and right-to-left content without duplicate overrides, and test mixed-direction text plus vertical writing where the product requires it.