CSS Design Calc

Aspect ratio of a width and height (simplified, nearest common ratio) or the missing side for a ratio, with CSS values.

CSS box model sizes: content, padding, border and margin boxes from a width and height under content-box or border-box.

Generate a CSS clamp() that scales a size linearly between a min and max viewport width, in rem, with the exact slope.

CSS selector specificity (ids, classes, types) per Selectors Level 4, including :is(), :not(), :where() and :has(); compare two.

Convert a CSS length between px, rem, em, pt, pc, in, cm, mm, Q, vw, vh, vmin, vmax and % with your root and viewport sizes.

Split a length into major and minor parts by the golden ratio (or silver, root-2, custom) with matching rectangle sizes.

Column and span widths for an N-column grid from container width, columns and gutter, or the container for a column width.

Estimate characters per line from column width and font size and rate it for readability (45-75 ideal, WCAG max 80).

Screen pixel density (PPI) from resolution and diagonal, physical size, CSS viewport at a device pixel ratio, and image widths.

Check a click or touch target against WCAG 2.2 target size (24 px AA, 44 px AAA) including the spacing exception.

Modular type scale: sizes in px and rem for steps below and above a base size, by named ratio (major third, golden) or number.

Snap line-heights for font sizes to a baseline grid: baseline unit, lines per element, unitless line-height and margins.