Helpers

Utilities

Helper classes for spacing, display, visibility, borders, dimensions, text wrapping, and animations.

Display

Display Utilities

Flex

Flex Alignment

Use with display-flex to align children along both axes.

Legacy Alignment Classes

These older alignment classes are also available. The shorter items-* and justify-* classes above are preferred.

<div class="display-flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

<div class="display-flex items-center gap-sm">
  <img src="avatar.jpg" alt="">
  <span>Username</span>
</div>

Position

Position Utilities

Spacing

Margin & Padding

All-Sides Scale

Directional Scale

Works for both margin and padding. Replace * below with either.

Visual Demo

Gap

Gap Utilities

Apply consistent spacing between flex or grid children without margin hacks.

Visual Demo

<div class="display-flex gap-lg">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Borders

Border Utilities

Other: no-border, border-radius, circle

Dimensions

Width & Height

Percentage-based width classes: width-10, width-20, width-25, width-33, width-40, width-50, width-66, width-70, width-75, width-80, width-90, width-100.

Height utilities use the same increments: height-100, height-90, height-80, height-75, height-70, height-50, height-33, height-25, height-10.

Responsive width variants: tablet-width-*, phone-width-*, small-desktop-width-*, large-phone-width-*.

Visibility

Show & Hide

Text Wrap

Text Wrap Utilities

Control how text breaks across lines — prevent orphaned words or balance heading line lengths.

Visual Demo

<h2 class="text-balance">Balanced heading text</h2>
<p class="no-orphan">Paragraph without orphaned words.</p>

Links

Link Reset

Suppress link color and underline on all anchor elements inside a container. Useful for card grids and clickable containers.

<div class="no-link-style">
  <a href="/page" class="border border-radius padding display-block">
    <h3>Card Title</h3>
    <p>Card text renders as plain text, not link-blue.</p>
  </a>
</div>

Color

Text Color

Semantic Text Colors

Named Colors

Opacity Scales

Black at 10–90% opacity: color-gray-10, color-gray-20, color-gray-30, color-gray-40, color-gray-50, color-gray-60, color-gray-70, color-gray-80, color-gray-90.

White at 10–90% opacity: color-white-10, color-white-20, color-white-30, color-white-40, color-white-50, color-white-60, color-white-70, color-white-80, color-white-90.

Background

Background Utilities

Elevation

Layers & Shadows

Layer classes (layer-0, layer-1, layer-2, layer-3) combine a background color with a matching shadow for consistent elevation. Shadow classes (shadow-1, shadow-2, shadow-3) apply box-shadow only.

Fonts

Font Family

Legacy class: code applies inline code styling (prefer the native <code> element).

Cursors

Cursor Utilities

Also: cursor-n-resize, cursor-e-resize, cursor-s-resize, cursor-w-resize, cursor-ne-resize, cursor-nw-resize, cursor-sw-resize, cursor-se-resize

Components

Component Utilities

Pre-built component classes for common UI patterns. These require JavaScript for interactivity but ply provides all the styling.

Accordion

Dropdown

Modal

For most use cases, prefer the native <dialog> element which ply auto-styles. These classes are for custom modal implementations.

Tooltip

Loader & Embed

Animation

Animation Utilities

<div class="spinning">Loading spinner</div>
<div class="fade-in">Fades in on load</div>