Utilities

A small set of atomic classes, hand-written, not generated: only what the Vanelton Media ecosystem itself actually needed. It grows on demand.

These come from joy-utilities.css, which needs to load after joy.css — that way a utility always wins over a component style. This page covers the original, most-used core set. For everything added since — position, overflow, the rest of flex/grid, full margin/padding, sizing — see Layout & position, Flexbox & grid, and Sizing & spacing.

Flex

Item A Item B

<div class="joy-flex joy-items-center joy-justify-between joy-gap-3" style="background:rgba(127,127,127,.08);padding:12px;border-radius:12px;">
    <span>Item A</span>
    <span>Item B</span>
</div>

Class	CSS
`.joy-flex`	display: flex
`.joy-flex-col`	display: flex; flex-direction: column
`.joy-flex-wrap`	flex-wrap: wrap
`.joy-items-center`	align-items: center
`.joy-items-start`	align-items: flex-start
`.joy-justify-center`	justify-content: center
`.joy-justify-between`	justify-content: space-between

Grid

Class	CSS	Note
`.joy-grid-2`	grid-template-columns: repeat(2, 1fr)	collapses to 1 column at ≤900px
`.joy-grid-3`	grid-template-columns: repeat(3, 1fr)	collapses to 1 column at ≤900px
`.joy-grid-4`	grid-template-columns: repeat(4, 1fr)	collapses to 1 column at ≤900px

Gap

Class	Value
`.joy-gap-1`	4px
`.joy-gap-2`	8px
`.joy-gap-3`	12px
`.joy-gap-4`	16px
`.joy-gap-5`	24px
`.joy-gap-6`	32px

Margin & padding

Class	CSS
`.joy-mt-2` … `.joy-mt-6`	margin-top (8px to 32px)
`.joy-mb-2` … `.joy-mb-5`, `.joy-mb-0`	margin-bottom (8px to 24px, or 0)
`.joy-py-2` / `.joy-py-4`	vertical padding (8px / 16px)
`.joy-px-4`	horizontal padding (16px)

Text

Highlighted text

Smaller, secondary text

<p class="joy-text-accent joy-font-bold">Highlighted text</p>
<p class="joy-text-muted joy-text-sm">Smaller, secondary text</p>

Class	Effect
`.joy-text-center` / `.joy-text-left`	text alignment
`.joy-text-accent`	`--joy-accent` color
`.joy-text-muted`	`--joy-text-muted` color
`.joy-text-sm` … `.joy-text-3xl`	0.9rem up to 2.75rem
`.joy-font-semibold` / `.joy-font-bold`	weight 600 / 700

Width & display

Class	Effect
`.joy-w-full`	width: 100%
`.joy-max-w-sm`	max-width: 480px
`.joy-max-w-md`	max-width: 720px
`.joy-mx-auto`	auto inline margin (centers the element)
`.joy-hidden` / `.joy-block`	display: none / block
`.joy-relative`	position: relative

Radius & order

Class	Effect
`.joy-rounded-sm/md/lg/pill`	maps to the `--joy-radius-*` tokens
`.joy-order-first` / `.joy-order-last`	order: -1 / order: 999 (flex/grid)

Responsive prefix

A breakpoint prefix on any class, written by hand — it only covers what the ecosystem has actually needed so far, not the full combinatorial set:

Prefix	Breakpoint
`md:`	@media (max-width: 900px) — tablet and below
`sm:`	@media (max-width: 600px) — phone and below

Side by side on desktop Stacked on phone

<div class="joy-flex sm:joy-flex-col joy-gap-3">
    <span class="joy-chip">Side by side on desktop</span>
    <span class="joy-chip">Stacked on phone</span>
</div>

Only hidden, block, flex, flex-col, text-center, text-left, w-full, order-first and order-last have md:/sm: variants today. gap, margin, radius and grid-N don't yet — add the one you need if it's missing.