Utility classes for spacing, sizing, display, flexbox, text, colour, borders, and more. Most ship from @keenmate/pure-css; the rest from core. For heights in real layouts see Sizing & Layout, for text styles Typography, for the 1–9 colour slots Colors.

Spacing - Margin & Padding

Two scales

Scale Steps Values
Numeric 0–6, 8, 10, 12, 16, 20 (no 7, 9, 11…) 0 / .25 / .5 / .75 / 1 / 1.25 / 1.5 / 2 / 2.5 / 3 / 4 / 5 rem
Semantic 0, xs, sm, md, base, lg, xl, 2xl 0 / .4 / .8 / 1.2 / 1.6 / 2.4 / 3.2 / 4.8 rem

Sides

Sides Margin Padding Scales
All / axis m-*, mx-*, my-* p-*, px-*, py-* numeric + semantic
Top / bottom mt-*, mb-* pt-*, pb-* numeric + semantic
Start / end ms-*, me-* ps-*, pe-* numeric + semantic

Horizontal sides are start / end: they follow the writing direction, so under dir="rtl" the spacing mirrors with the layout (ms-* is the left in LTR, the right in RTL). There are no ml-* / mr-* / pl-* / pr-* classes.

Auto Margins

m-auto, mx-auto, my-auto, mt-auto, mb-auto, ms-auto, me-auto

Live Examples

ms-auto pushes an item to the end of a flex row (the start in RTL):

normal ms-auto (pushed to end)

Semantic padding:

p-xs
p-sm
p-md
p-lg
p-xl

Gap Utilities

For flex and grid containers. Same two scales as spacing.

Scale Both axes Columns only Rows only
Semantic gap-{0|xs|sm|md|base|lg|xl|2xl} column-gap-* row-gap-*
Numeric gap-{0-6|8|10|12|16|20} gap-x-* gap-y-*

Live Example

gap-xs

A B C

gap-md

A B C

column-gap-xl row-gap-xs (wrapping)

A B C D E F

Width Utilities

Type Width Min-width Max-width
Percent (5% steps) w-{5-100}, w-auto minw-{5-100} maxw-{5-100}
Fraction w-{1-2|1-3|2-3|1-4|3-4} minw-{1-3|2-3} maxw-{1-2|1-3|2-3|1-4|3-4}
REM wr-{1-10}, then wr-{15|20|…|50} minwr-* (same steps) maxwr-* (same steps)
Fixed (min-width + width) w-{25|50|75|100}-fixed — won't shrink below its width in a flex row

Live Example

w-25
w-50
w-2-3
wr-20 (20rem)

Height Utilities

Type Height Min-height Max-height
Percent h-{25|50|75|100}, h-auto minh-{5-100} (5% steps) maxh-{5-100} (5% steps)
Fraction h-{1-2|1-3|2-3|1-4|3-4} minh-{1-2|1-3|2-3|1-4|3-4} maxh-{1-2|1-3|2-3|1-4|3-4}
REM hr-{1-10}, then hr-{15|20|…|50} minhr-* (same, plus 60|70|80|90|100) maxhr-* (same steps as hr-*)
Viewport / parent h-full, h-screen min-h-full, min-h-screen max-h-full, max-h-screen

Percent heights only work when the parent has a height. Full-height layouts, scrollable regions and minhr-* in context are on Sizing & Layout.

Live Example

hr-3
hr-5
hr-8

Display Utilities

Classes: d-none, d-inline, d-inline-block, d-block, d-flex, d-inline-flex

Live Example

d-inline vs d-block:

Inline 1 Inline 2 Inline 3
Block 1
Block 2
Block 3

Flexbox Utilities

Category Classes
Direction & Wrap flex-row, flex-column, flex-wrap, flex-nowrap
Justify Content justify-content-{start|end|center|between|around}
Align Items align-items-{start|end|center|baseline|stretch}
Align Self self-{start|center|end|stretch|baseline}
Flex shorthand flex-1 (grow from 0), flex-auto (grow from content), flex-initial (shrink only), flex-none (rigid), flex-fill
Grow / Shrink flex-grow, flex-grow-{0|1}, flex-shrink, flex-shrink-{0|1}

Live Examples

justify-content-between:

Start Middle End

flex-none + flex-1 + flex-none:

flex-none
flex-1 takes the rest
flex-none

align-items-center with different heights:

Small
Large
Medium

Text & Font Utilities

Category Classes
Alignment text-start, text-center, text-end
Wrapping text-nowrap, text-truncate
Size text-{2xs|xs|sm|md|base|lg|xl|2xl|3xl|4xl}
Colour text-body (main), text-muted (muted), text-{primary|success|danger|warning|info}
Weight font-weight-{normal|medium|semibold|bold} (400 / 500 / 600 / 700)
Style font-style-{normal|italic}
Family font-family-{system|sans|serif|mono}
Vertical text text-vertical (reads top → bottom), text-vertical-up (bottom → top)

Live Examples

normal medium semibold bold italic serif mono text-muted vertical vertical-up

Role Colour Utilities

The six roles: primary, secondary, success, danger, warning, info. The same three families exist for the 1–9 colour slots (bg-color-N, surface-color-N, text-on-color-N) — see Colors.

Class Sets Use
surface-{role} background + readable text Coloured blocks — the default choice
bg-{role} background only When the text colour is handled separately
text-on-{role} text only (the readable colour on that role) Pair with bg-{role}, or for text on a role-coloured parent

Live Example

surface-primary
surface-secondary
surface-success
surface-danger
surface-warning
surface-info

Overflow & Cursor Utilities

Overflow

overflow-{auto|hidden|visible}, overflow-{x|y}-auto

overflow-overlay, overflow-{x|y}-overlay — the scrollbar floats over the content instead of taking width (Chromium; elsewhere falls back to auto)

Cursor

Hover to see cursor change:

cursor-pointer cursor-help cursor-wait cursor-not-allowed cursor-text cursor-move cursor-default cursor-grab cursor-grabbing cursor-zoom-in cursor-zoom-out

Position & Border Utilities

Category Classes
Position position-{static|relative|absolute|fixed|sticky}
Border (add) border, border-top, border-bottom, border-start, border-end
Border (remove) border-0, border-top-0, border-bottom-0, border-start-0, border-end-0
Border style border-{solid|dashed|dotted|none}
Radius rounded, rounded-lg, rounded-circle, rounded-0
Radius (sides) rounded-top, rounded-bottom, rounded-start, rounded-end

Start / end follow the writing direction like the logical spacing, so they mirror under dir="rtl". There are no -left / -right variants.

Live Examples

rounded-0
rounded
rounded-lg
rounded-start
circle
border-start
border-dashed

Shadow Utilities

Classes: shadow-none, shadow-sm, shadow, shadow-lg

shadow-none
shadow-sm
shadow
shadow-lg

Miscellaneous

Class What it does
rotate-{90|180|270} Rotates the element (the box stays horizontal — for a narrow vertical label use text-vertical)
unstyled On a <ul> / <ol>: no bullets, no indent
compact-mode On a container (or <body>): tighter card bodies, table cells, sidebar links and form groups
font-size-{small|default|large|xlarge} On <html>: scales the whole UI (9 / 10 / 11 / 12px root). Responsive variant: pa-font-base-N + pa-font-mobile-N, or pa-font-responsive. See Getting Started.

Live Example

  • unstyled list
  • no bullets

CSS Classes Reference

Spacing (Margin & Padding)

  • m-{0-6|8|10|12|16|20}, p-* — Numeric scale (0.25rem steps, rem)
  • m-{0|xs|sm|md|base|lg|xl|2xl}, p-* — Semantic scale
  • mt-*, mb-*, mx-*, my-* (and p equivalents) — Sides / axes, both scales
  • ms-*, me-*, ps-*, pe-* — Start / end (mirror under RTL), both scales
  • m-auto, mx-auto, my-auto, mt-auto, mb-auto, ms-auto, me-auto — Auto margins

Gap

  • gap-{0|xs|sm|md|base|lg|xl|2xl}, row-gap-*, column-gap-* — Semantic
  • gap-{0-6|8|10|12|16|20}, gap-x-*, gap-y-* — Numeric

Width

  • w-{5-100} (5% steps), w-auto, w-{1-2|1-3|2-3|1-4|3-4}
  • minw-{5-100}, minw-{1-3|2-3}, maxw-{5-100}, maxw-{1-2|1-3|2-3|1-4|3-4}
  • wr-, minwr-, maxwr-{1-10|15|20|25|30|35|40|45|50} — REM
  • w-{25|50|75|100}-fixed — Fixed width (min-width + width)

Height

  • h-{25|50|75|100|auto}, h-{1-2|1-3|2-3|1-4|3-4}
  • minh-, maxh-{5-100} (5% steps) and fractions
  • hr-, maxhr-{1-10|15|20|25|30|35|40|45|50}, minhr- (same + 60|70|80|90|100) — REM
  • h-full, h-screen, min-h-{full|screen}, max-h-{full|screen}

Display

  • d-none, d-block, d-inline, d-inline-block, d-flex, d-inline-flex

Flexbox

  • flex-row, flex-column, flex-wrap, flex-nowrap
  • justify-content-{start|end|center|between|around}
  • align-items-{start|end|center|baseline|stretch}, self-{start|center|end|stretch|baseline}
  • flex-{1|auto|initial|none|fill}, flex-grow, flex-grow-{0|1}, flex-shrink, flex-shrink-{0|1}

Text & Font

  • text-{start|center|end}, text-nowrap, text-truncate
  • text-{2xs|xs|sm|md|base|lg|xl|2xl|3xl|4xl} — Font size
  • text-body, text-muted (muted), text-{primary|success|danger|warning|info}
  • font-weight-{normal|medium|semibold|bold}, font-style-{normal|italic}, font-family-{system|sans|serif|mono}
  • text-vertical, text-vertical-up

Colour

  • surface-{role}, bg-{role}, text-on-{role} — role = primary|secondary|success|danger|warning|info
  • surface-color-N, bg-color-N, text-color-N, text-on-color-N, border-color-N — Colour slots 1–9 (see Colors)

Overflow & Cursor

  • overflow-{auto|hidden|visible}, overflow-{x|y}-auto, overflow-overlay, overflow-{x|y}-overlay
  • cursor-{pointer|help|wait|not-allowed|text|move|default|grab|grabbing|zoom-in|zoom-out}

Position & Border

  • position-{static|relative|absolute|fixed|sticky}
  • border, border-{top|bottom|start|end}, border-0, border-{top|bottom|start|end}-0
  • border-{solid|dashed|dotted|none}
  • rounded, rounded-lg, rounded-circle, rounded-0, rounded-{top|bottom|start|end}

Shadow & Misc

  • shadow-none, shadow-sm, shadow, shadow-lg
  • rotate-{90|180|270}, unstyled (lists), compact-mode, html.font-size-*
Type / for commands, : to search a category, or just start typing
↑↓ Navigate
↵ Select
Esc Close

Settings

Press Ctrl+K to preview the palette.
Body text size. All elements scale proportionally.

John Doe

Administrator
  • Dashboard
  • Forms
  • Tables
  • Data Grid