Layout
Display, positioning, z-index, overflow, visibility, object fit, columns and containers.
Display#
d accepts every display value: block, inline-block, flex, inline-flex, grid, contents, none, …
<div nib="d=flex; g=8px">
<span nib="d=inline-block; p=6px 10px; bgc=#EEEFFE; cl=#312e81; bdrd=6px">inline-block</span>
<span nib="d=none">hidden</span>
<span nib="d=inline-block; p=6px 10px; bgc=#ecfeff; cl=#155e75; bdrd=6px">visible</span>
</div>Positioning#
<div nib="pos=relative; w=260px; h=120px; bdrd=12px; bgc=#f1f5f9; dark:bgc=#1e293b">
<span nib="pos=absolute; t=10px; r=10px; p=2px 8px; bdrd=999px; bgc=#ef4444; cl=#fff; fts=12px; ftw=700">3</span>
<span nib="pos=absolute; b=10px; l=12px; fts=13px; cl=#64748b">pos=absolute · t / r / b / l</span>
</div>ins=0 sets all four sides at once — handy for overlays: pos=fixed; ins=0.
Overflow and object fit#
<div nib="ovfy=auto; mxh=320px">…scrollable…</div>
<img nib="w=100%; asp=16/9; objf=cover; objp=center" src="…" alt="">Multi-column text#
NibCSS writes CSS as attributes. Each rule becomes one class, each distinct rule is emitted once, and the output is deterministic across builds, machines and frameworks, so it is safe to cache and to render on the server.
<p nib="colc=2; colg=24px; colr=1px solid #e2e8f0; mxw=420px; fts=13px; lh=1.6; m=0">NibCSS writes CSS as attributes. Each rule becomes one class, each distinct rule is emitted once, and the output is deterministic across builds, machines and frameworks, so it is safe to cache and to render on the server.</p>All layout shorthands#
Shorthand | CSS property |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|