Utilities

Single-purpose classes, all !important. Spacing / border / float utilities use logical axes (i = inline, b = block; s = start, e = end). The old physical names (.ml, .text-right…) still work as deprecated aliases — they may be dropped in later versions.

Spacing & border

Text-weight, style and size utilities are on Typography.

Floats & text alignment

A block that directly contains a floated .align-* child contains the float itself (display: flow-root via :has()) — no .clearfix. The rule is wrapped in :where() on purpose, giving it zero specificity: any other display declaration on that same element wins, no matter how it got there — a plugin's, an explicit flex / grid of your own, Jellyfish's own .grid / .row, or even .boxed itself (display: inherit). Put .boxed only on the floated children, not the containing box, or its display: inherit silently cancels the auto-containment and you're back to setting flow-root by hand. Prefer flex / grid over floats.

Display

Two families, two mental models. .hide-{bp} hides within one band only and lets everything either side through — five bands, xs through xl, covering the whole range with no gaps. .hide-above-{bp} / .hide-below-{bp} are open-ended and stack, so combine them for a custom span: .hide-below-md .hide-above-lg hides everywhere except 900–1199px.

Flex & grid alignment

On a .row or .grid unless noted. Values are writing-mode-relative, so they work on both engines.

align-items (on the container), one row per value, with a taller item in each to make the effect visible:

justify-content (on the container):

.flex / .flex-column on a plain element (not a .row):

Object fit

Both need the image to have been given a size — a width and height, an aspect-ratio, or a .ratio-* class. Both also zero the image's trailing --jf-flow margin. A .ratio-* already applies cover, so pair it with .object-contain to letterbox within that ratio. See Images and media.

Width

.full-width → width: 100%.

Icons

.icon paints an SVG in the current text colour, sized to the font. Point --jf-icon at a url() — a data: URI or a path — per instance or in your own rule:

Three inline data-URI SVGs, so no external file is needed for this demo — they inherit color from their surrounding text, and scale with font-size:

In your own CSS the class isn't needed — @include icon() emits the same rules on any selector, a pseudo-element included. Set --jf-icon in the same rule, and pass a size if you want something other than 1em. An arrow after external links:

    a[target="_blank"]::after {
      @include icon(0.8em);
      content: "";
      --jf-icon: url("data:image/svg+xml,…");
    }