Utilities

Utility classes give one-off styling without writing CSS. Apply them in markdown with the attribute syntax: {: .fs-4 .fw-300 }.

Font size

.fs-1 through .fs-10 set an explicit font size. Sizes are fluid: the small value on phones, the larger value from 768px up.

Big claim here{: .fs-8 .fw-700 }

Font weight

.fw-300, .fw-400, .fw-500, .fw-700.

A light lede{: .fw-300 }

Text alignment

.text-center, .text-left, .text-right.

Font family

.text-mono switches to Space Mono. .text-delta renders the small-uppercase section-label style used across these docs:

SECTION LABEL

Display

.d-inline-block for inline block layout, plus .d-block, .d-inline, .d-none, .d-flex, .d-inline-flex.

Spacing

The just-the-docs spacing scale: 0-8 map to 0, 0.25, 0.5, 0.75, 1, 1.5, 2, 3 and 4rem. Apply to all sides or one:

Padded card{: .p-4 }
Bottom margin only{: .mb-5 }
Centered block{: .mx-auto }

• all sides: .m-<n>, .p-<n>
• one side: .mt-, .mb-, .ml-, .mr-, .pt-, .pb-, .pl-, .pr-
• axis: .mx-, .my-, .px-, .py-
• .m-auto, .mx-auto, .my-auto

Flex layout

.d-flex plus the arrangement helpers:

• direction: .flex-row, .flex-column
• wrapping: .flex-wrap, .flex-nowrap
• main axis: .flex-justify-start, .flex-justify-center, .flex-justify-end, .flex-justify-between, .flex-justify-around
• cross axis: .flex-items-start, .flex-items-center, .flex-items-end, .flex-items-baseline, .flex-items-stretch
• sizing: .flex-1, .flex-auto, .flex-none, .flex-grow-1

Vertical alignment

.v-align-baseline, .v-align-top, .v-align-middle, .v-align-bottom.

Color utilities

Text and background variants for the just-the-docs palette. Levels 000 (lightest) through 300 (darkest); grey-dk also has 250.

This is purple text{: .text-purple-100 }
A tinted swatch: <span class="d-inline-block bg-purple-000" style="padding:0.55rem 1rem;border-radius:0.25rem"></span>

Available families: grey-lt, grey-dk, purple, blue, green, yellow, red. Examples:

• .text-blue-200
• .bg-green-000
• .text-grey-dk-300
• .bg-yellow-100

<span class="d-inline-block bg-blue-000">block</span> inline chip

What is not ported yet

The layout spacing matrix is fully ported (see Spacing above). Tracked gaps live in GAP-ANALYSIS.md.