NibCSS

Sizing

Width, height, their limits, aspect ratio and logical sizes.

1 min readv1
HTML
<div nib="d=flex; g=12px; ali=flex-end">
  <div nib="w=64px; asp=1; bdrd=12px; bgc=#4F52D9"></div>
  <div nib="w=112px; asp=16/9; bdrd=12px; bgc=#0891b2"></div>
  <div nib="w=48px; h=96px; bdrd=12px; bgc=#16a34a"></div>
</div>

Patterns#

Goal

Rules

readable text column

mxw=65ch

centred page container

w=100%; mxw=1200px; mi=auto; px=24px

full viewport height, mobile-safe

mnh=100dvh

square avatar

w=40px; asp=1; bdrd=999px; objf=cover

fluid width with limits

w=clamp(280px, 50vw, 640px)

All sizing shorthands#

Shorthand

CSS property

w

width

h

height

mnw

min-width

mxw

max-width

mnh

min-height

mxh

max-height

asp

aspect-ratio

inl

inline-size

blks

block-size

mininl

min-inline-size

maxinl

max-inline-size

minblk

min-block-size

maxblk

max-block-size

Next steps#