General Utilities

High-frequency one-liner utilities: aspect ratios, overflow, cursors, opacity, object-fit, positioning, blend modes, columns, writing modes and more.

Aspect ratio

aspect="square"   → 1:1
aspect="video"    → 16:9
aspect="photo"    → 4:3
aspect="portrait" → 3:4
aspect="wide"     → 21:9
aspect="golden"   → φ (1.618)
aspect="story"    → 9:16

square

16/9

portrait

Overflow

overflow="hidden|auto|scroll|clip|visible"
overflow="x"      → overflow-x: auto
overflow="y"      → overflow-y: auto
overflow="x-scroll|y-scroll"

Cursor

pointer

grab

crosshair

not-allowed

text

move

zoom-in

wait

help

<button cursor="pointer">click me</button>
<div cursor="grab">draggable</div>
<div cursor="not-allowed" pointer="none">disabled</div>

Opacity

10%

25%

50%

75%

90%

100%

<div opacity="50">…</div>
<div opacity="0">hidden but in DOM</div>
<div opacity="100">fully visible</div>

Blend modes

multiply

screen

overlay

difference

exclusion

<img blend="multiply" />
<div blend="screen">…</div>
<div blend="overlay">…</div>

Z-index

z="0|1|10|20|50|100|auto|-1"

Positioning

pos="relative|absolute|fixed|sticky|static"
inset="0|auto"

<!-- Sticky header example -->
<nav pos="sticky" inset="0" z="50">…</nav>

Columns (text)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div columns="2">Long text flows into 2 columns…</div>
<div columns="3">Three column layout…</div>

Writing mode

Vertical LR

Vertical RL

<p writing="vertical">Vertical text LR</p>
<p writing="vertical-rl">Vertical text RL</p>

List styles

list="none"    → no bullets
list="disc"    → bullet points
list="decimal" → numbers
list="check"   → ✓ checkmarks (green)

Select & pointer-events

select="none"  → can't select text
select="all"   → click selects all
pointer="none" → click-through element
pointer="auto" → restore pointer events

resize="none|both|horizontal|vertical"
isolate        → isolation: isolate (new stacking context)