Core

Helpers

Single-responsibility utilities: spacing, color, visibility, flex, responsive, print. Compose them on the markup, no CSS to write.

Before writing one-off CSS, look here: the helper almost always already exists. Color helpers are brand-aware (they read the --ng-* tokens, so they follow theme and rebrand).

Spacing

Pattern <prop><side>-<size>. Prop: m (margin) / p (padding). Side: t b l r, x y (axis), xy (all). Margins also have a negative version (-mt-…) and zero-resets (my-zero, pyx-zero…).

Prefixes

mt-{n} mb-{n} ml-{n} mr-{n} mx-{n} my-{n} mxy-{n} -mt-{n} pt-{n} pb-{n} pl-{n} pr-{n} px-{n} py-{n} pxy-{n} my-zero pyx-zero

Scale (px → rem)

`4px`	0.25rem
`8px`	0.5rem
`10px`	0.625rem
`12px`	0.75rem
`16px`	1rem
`20px`	1.25rem
`24px`	1.5rem
`32px`	2rem
`40px`	2.5rem
`48px`	3rem
`64px`	4rem
`80px`	5rem
`96px`	6rem
`110px`	6.875rem
`120px`	7.5rem
`130px`	8.125rem
`140px`	8.75rem

Color

Text, background and border from every color token (semantic + extended) and the grey scale. Via the --ng-* variable: a rebrand in :root updates them all.

Per color

text-{color} bg-{color} border-{color}

Grey scale

text-g-{n} bg-g-{n} border-g-{n}

Available color tokens

primary secondary success info warning danger mute

Visibility & position

hidden visible mx-auto ml-auto mr-auto fixed-top fixed-bottom sticky-top sticky-bottom center-text center-auto center-block center-center-auto

Flex

Essential set for flex containers. Note: there are no jc-between/jc-around or ai-* helpers — to align grid rows use ng-row-justify-* and ng-row-align-* (see Grid — Flex).

f-row f-column jc-start jc-center jc-end ji-start ji-center ji-end no-shrink

Structural & cursor

ng-100 dd-block ng-density-compact c-point c-def c-auto

Box shadow

bs-main-main bs-main-alt

Responsive & print

Show/hide per breakpoint (lg threshold) and print control.

ng-hide-mobile ng-hide-desktop ng-print-show ng-print-hide ng-print-break-before ng-print-break-after ng-print-avoid-break

Example

Several helpers combined on the markup, zero CSS:

helpers.html

<div class="mt-24 px-16 c-point center-text">…</div>