Utilities
A small set of atomic classes, Tailwind-style — 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, the same way Tailwind works layered on top of any base CSS.
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
Same idea as Tailwind, 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.