Class Reference

Generated from dist/sulphuris.css — 1231 base classes across 82 properties. Rebuild with npm run build to refresh.

Direction and breakpoint variants are not listed row by row. A ✅ in the Dir or Bp column means that class also exists in the forms described below.

Directions

The direction token is glued to the prefix, before the value: .m-16 → .mx-16.

Breakpoints

The breakpoint token sits between the prefix and the value: .m-16 → .m-md-16. Combined with a direction: .mx-md-16. All queries are min-width, so the bare class is the mobile-first default.

Utilities

align-items

// src/core/layout/_flex.scss:14
@include generators.utility-class-generator('align', 'align-items', ('normal', 'center', 'start', 'end', 'baseline', 'stretch'));

align-self

// src/core/layout/_flex.scss:16
@include generators.utility-class-generator('align-self', 'align-self', ('normal', 'center', 'start', 'end', 'baseline', 'stretch'));

appearance

Hand-written in src/core/layout/_misc.scss.

aspect-ratio

// src/core/layout/_aspect.scss:4
@include generators.utility-class-generator((
  prefix: 'aspect',
  property: 'aspect-ratio',
  values: (
    '1x1': '1 / 1',
    '4x3': '4 / 3',
    '3x2': '3 / 2',
    '16x9': '16 / 9',
    '21x9': '21 / 9',
    '9x16': '9 / 16'
  ),
  responsive: false
));

background

Hand-written in src/core/layout/_misc.scss.

background-color

// src/core/style/_color.scss:53
@include generators.utility-class-generator((
  prefix: 'bg',
  property: 'background-color',
  values: $colors,
  responsive: false,
  variable: 'color'
));

Config values it reads:

// src/core/_config.scss:124
$colors: (
  foreground: #1a1a1d,
  background: #fff,
  black: #1a1a1d,
  white: #fff,
  primary: #f6c026,
  // Its own token rather than `primary`, because everything that reads it —
  // links, focus rings, an active control — is foreground and has a contrast
  // floor a brand color does not: `primary` is free to be a yellow that only
  // ever sits behind text, while this has to stay readable as text on
  // `background`. 8.6:1 here, 8:1 on the dark counterpart below.
  // Called `link` before 4.1, which named one of those uses and read as wrong
  // for the others; `--color-link` and `.text-link` still resolve, see
  // style/_color.scss.
  accent: #0f4eb3,
  // Status roles. Every value is a grade that $palettes already generates —
  // these name one, they do not add a hue, so a project that retunes `red`
  // and re-picks `danger` from the new ladder stays in one palette.
  // They are label and body text on `background`, not just a border on a
  // tinted callout, so each clears 4.5:1 in its own mode. Since $palette-grades
  // pins every palette to the same lightness ladder, that is now one grade for
  // all four rather than four hand-picked ones: 600 on white, and 400 on the
  // dark background — see the `dark` entry in $color-modes below.
  danger: #c40d20,   // red-600,    6.1:1
  success: #077f1e,  // green-600,  5.2:1
  warning: #98560e,  // orange-600, 5.7:1
  info: #2563ca      // blue-600,   5.7:1
);

// src/core/_config.scss:193
$palettes: (
  gray: #8c8c8e,
  yellow: #f6c026,
  orange: #f4912a,
  red: #e41328,
  violet: #752a6f,
  purple: #472573,
  indigo: #3f00ff,
  blue: #0f4eb3,
  teal: #00a4a4,
  green: #10af2e,
  lime: #a4c400,
);

border

// src/core/style/_border.scss:63
@include generators.utility-class-generator('border-', 'border', (0), '', '', config.$orientations);

Config values it reads:

// src/core/_config.scss:84
$orientations: (
  't': ('top'),
  'r': ('right'),
  'b': ('bottom'),
  'l': ('left'),
  'x': ('right', 'left'),
  'y': ('top', 'bottom')
);

border-bottom-left-radius

Hand-written in src/core/style/_border.scss.

border-bottom-radius

Hand-written in src/core/style/_border.scss.

border-bottom-right-radius

Hand-written in src/core/style/_border.scss.

border-color

// src/core/style/_color.scss:61
@include generators.utility-class-generator((
  prefix: 'border',
  property: 'border-color',
  values: $colors,
  responsive: false,
  variable: 'color'
));

Config values it reads:

// src/core/_config.scss:124
$colors: (
  foreground: #1a1a1d,
  background: #fff,
  black: #1a1a1d,
  white: #fff,
  primary: #f6c026,
  // Its own token rather than `primary`, because everything that reads it —
  // links, focus rings, an active control — is foreground and has a contrast
  // floor a brand color does not: `primary` is free to be a yellow that only
  // ever sits behind text, while this has to stay readable as text on
  // `background`. 8.6:1 here, 8:1 on the dark counterpart below.
  // Called `link` before 4.1, which named one of those uses and read as wrong
  // for the others; `--color-link` and `.text-link` still resolve, see
  // style/_color.scss.
  accent: #0f4eb3,
  // Status roles. Every value is a grade that $palettes already generates —
  // these name one, they do not add a hue, so a project that retunes `red`
  // and re-picks `danger` from the new ladder stays in one palette.
  // They are label and body text on `background`, not just a border on a
  // tinted callout, so each clears 4.5:1 in its own mode. Since $palette-grades
  // pins every palette to the same lightness ladder, that is now one grade for
  // all four rather than four hand-picked ones: 600 on white, and 400 on the
  // dark background — see the `dark` entry in $color-modes below.
  danger: #c40d20,   // red-600,    6.1:1
  success: #077f1e,  // green-600,  5.2:1
  warning: #98560e,  // orange-600, 5.7:1
  info: #2563ca      // blue-600,   5.7:1
);

// src/core/_config.scss:193
$palettes: (
  gray: #8c8c8e,
  yellow: #f6c026,
  orange: #f4912a,
  red: #e41328,
  violet: #752a6f,
  purple: #472573,
  indigo: #3f00ff,
  blue: #0f4eb3,
  teal: #00a4a4,
  green: #10af2e,
  lime: #a4c400,
);

border-left-radius

Hand-written in src/core/style/_border.scss.

border-radius

// src/core/style/_border.scss:99
@include generators.utility-class-generator('rounded', 'border-radius', config.$border-radiuses, 'px', '', false, false);

Config values it reads:

// src/core/_config.scss:74
$border-radiuses: 0,4,6,8,16,24,32;

border-right-radius

Hand-written in src/core/style/_border.scss.

border-style

// src/core/style/_border.scss:62
@include generators.utility-class-generator('border', 'border-style', ('solid', 'dashed', 'dotted'), '', '', false, false);

border-top-left-radius

Hand-written in src/core/style/_border.scss.

border-top-radius

Hand-written in src/core/style/_border.scss.

border-top-right-radius

Hand-written in src/core/style/_border.scss.

border-width

// src/core/style/_border.scss:61
@include generators.utility-class-generator('border', 'border-width', config.$border-sizes, 'px', '', $rem: false);

Config values it reads:

// src/core/_config.scss:73
$border-sizes: 2,3,4,6,8;

bottom

// src/core/layout/_position.scss:6
@include generators.utility-class-generator('b', 'bottom', config.$sizes, 'px');
// src/core/layout/_position.scss:11
@include generators.utility-class-generator('b', 'bottom', config.$negative-sizes, 'px');
// src/core/layout/_position.scss:16
@include generators.utility-class-generator('b', 'bottom', config.$percent-sizes, '%', 'p');
// src/core/layout/_position.scss:21
@include generators.utility-class-generator('b', 'bottom', config.$negative-percent-sizes, '%', 'p');

Config values it reads:

// src/core/_config.scss:27
$sizes:          0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;
$negative-sizes: -1,-2,-3,-4,-8,-12,-14,-16,-24,-32,-40,-48,-56,-64;
$percent-sizes:  5,10,15,20,25,50,75,100;

// src/core/_config.scss:35
$negative-percent-sizes: -25,-50,-75,-100;

box-shadow

// src/core/style/_effects.scss:15
@include generators.utility-class-generator((
  prefix: 'shadow',
  property: 'box-shadow',
  values: config.$shadows,
  responsive: false,
  variable: 'shadow'
));

Config values it reads:

// src/core/_config.scss:432
$shadows: (
  'sm': 0 1px 2px rgb(0 0 0 / 5%),
  'md': 0 4px 6px -1px rgb(0 0 0 / 10%),
  'lg': 0 10px 15px -3px rgb(0 0 0 / 10%),
  'xl': 0 20px 25px -5px rgb(0 0 0 / 10%),
  'none': none
);

box-sizing

Hand-written in src/core/layout/_misc.scss.

color

// src/core/style/_color.scss:27
@include generators.utility-class-generator((
  prefix: 'text',
  property: 'color',
  values: $colors,
  // Color per breakpoint is a fringe need; every color × grade × breakpoint ×
  // 3 properties was ~23% of the build. Theme changes go through the CSS
  // variables instead.
  responsive: false,
  variable: true
));

Config values it reads:

// src/core/_config.scss:124
$colors: (
  foreground: #1a1a1d,
  background: #fff,
  black: #1a1a1d,
  white: #fff,
  primary: #f6c026,
  // Its own token rather than `primary`, because everything that reads it —
  // links, focus rings, an active control — is foreground and has a contrast
  // floor a brand color does not: `primary` is free to be a yellow that only
  // ever sits behind text, while this has to stay readable as text on
  // `background`. 8.6:1 here, 8:1 on the dark counterpart below.
  // Called `link` before 4.1, which named one of those uses and read as wrong
  // for the others; `--color-link` and `.text-link` still resolve, see
  // style/_color.scss.
  accent: #0f4eb3,
  // Status roles. Every value is a grade that $palettes already generates —
  // these name one, they do not add a hue, so a project that retunes `red`
  // and re-picks `danger` from the new ladder stays in one palette.
  // They are label and body text on `background`, not just a border on a
  // tinted callout, so each clears 4.5:1 in its own mode. Since $palette-grades
  // pins every palette to the same lightness ladder, that is now one grade for
  // all four rather than four hand-picked ones: 600 on white, and 400 on the
  // dark background — see the `dark` entry in $color-modes below.
  danger: #c40d20,   // red-600,    6.1:1
  success: #077f1e,  // green-600,  5.2:1
  warning: #98560e,  // orange-600, 5.7:1
  info: #2563ca      // blue-600,   5.7:1
);

// src/core/_config.scss:193
$palettes: (
  gray: #8c8c8e,
  yellow: #f6c026,
  orange: #f4912a,
  red: #e41328,
  violet: #752a6f,
  purple: #472573,
  indigo: #3f00ff,
  blue: #0f4eb3,
  teal: #00a4a4,
  green: #10af2e,
  lime: #a4c400,
);

column-gap

// src/core/layout/_gap.scss:9
@include generators.utility-class-generator('gap-x', 'column-gap', $gap-sizes, 'px');

Config values it reads:

// src/core/_config.scss:27
$sizes: 0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;

cursor

// src/core/style/_effects.scss:32
@include generators.utility-class-generator(
  'cursor',
  'cursor',
  ('auto', 'default', 'pointer', 'wait', 'text', 'move', 'grab', 'grabbing', 'not-allowed', 'help', 'progress', 'none'),
  '',
  '',
  false,
  false
);

display

// src/core/layout/_display.scss:3
@include generators.utility-class-generator('d', 'display', ('block', 'inline', 'flex', 'inline-block', 'none', 'table', 'table-cell', 'inline-flex', 'grid', 'inline-grid'));

filter

Hand-written in src/core/style/_filters.scss.

flex

// src/core/layout/_flex.scss:9
@include generators.utility-class-generator('flex', 'flex', (1: '1 1 0%', 'auto': '1 1 auto', 'none': 'none'));

flex-direction

// src/core/layout/_flex.scss:3
@include generators.utility-class-generator('flex', 'flex-direction', ('row', 'row-reverse', 'column', 'column-reverse'));

flex-grow

// src/core/layout/_flex.scss:11
@include generators.utility-class-generator('flex-grow', 'flex-grow', (0, 1, 2, 3));

flex-shrink

// src/core/layout/_flex.scss:13
@include generators.utility-class-generator('flex-shrink', 'flex-shrink', (0, 1));

flex-wrap

// src/core/layout/_flex.scss:4
@include generators.utility-class-generator('flex', 'flex-wrap', ('wrap', 'nowrap', 'wrap-reverse'));

font-family

Hand-written in src/core/style/_typography.scss.

font-size

// src/core/style/_typography.scss:116
@include generators.utility-class-generator('fs', 'font-size', $font-size-map);

font-style

Hand-written in src/core/style/_typography.scss.

font-weight

Hand-written in src/core/style/_typography.scss.

gap

// src/core/layout/_gap.scss:8
@include generators.utility-class-generator('gap', 'gap', $gap-sizes, 'px');

Config values it reads:

// src/core/_config.scss:27
$sizes: 0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;

grid-auto-flow

// src/core/layout/_grid.scss:60
@include generators.utility-class-generator('grid-flow', 'grid-auto-flow', (
  'row': 'row',
  'column': 'column',
  'dense': 'dense',
  'row-dense': 'row dense',
  'column-dense': 'column dense'
));

grid-column

// src/core/layout/_grid.scss:58
@include generators.utility-class-generator('grid-column-span', 'grid-column', generators.grid-span-map(config.$columns));

Config values it reads:

// src/core/_config.scss:114
$columns: 12;

grid-row

// src/core/layout/_grid.scss:59
@include generators.utility-class-generator('grid-row-span', 'grid-row', generators.grid-span-map(config.$rows));

Config values it reads:

// src/core/_config.scss:119
$rows: 6;

grid-template-columns

// src/core/layout/_grid.scss:56
@include generators.utility-class-generator('grid-cols', 'grid-template-columns', generators.grid-track-map(config.$columns));

Config values it reads:

// src/core/_config.scss:114
$columns: 12;

grid-template-rows

// src/core/layout/_grid.scss:57
@include generators.utility-class-generator('grid-rows', 'grid-template-rows', generators.grid-track-map(config.$rows));

Config values it reads:

// src/core/_config.scss:119
$rows: 6;

height

// src/core/layout/_dimension.scss:38
@include generators.utility-class-generator('h', 'height', $height-sizes, 'px');

Config values it reads:

// src/core/_config.scss:27
$sizes: 0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;

inset

// src/core/layout/_position.scss:25
@include generators.utility-class-generator('inset', 'inset', config.$sizes, 'px');
// src/core/layout/_position.scss:26
@include generators.utility-class-generator('inset', 'inset', config.$negative-sizes, 'px');
// src/core/layout/_position.scss:27
@include generators.utility-class-generator('inset', 'inset', config.$percent-sizes, '%', 'p');
// src/core/layout/_position.scss:28
@include generators.utility-class-generator('inset', 'inset', ('auto'));

Config values it reads:

// src/core/_config.scss:27
$sizes:          0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;
$negative-sizes: -1,-2,-3,-4,-8,-12,-14,-16,-24,-32,-40,-48,-56,-64;
$percent-sizes:  5,10,15,20,25,50,75,100;

justify-content

// src/core/layout/_flex.scss:15
@include generators.utility-class-generator('justify', 'justify-content', ('normal', 'center', 'start', 'end', 'space-between', 'space-around', 'space-evenly'));

justify-self

// src/core/layout/_flex.scss:17
@include generators.utility-class-generator('justify-self', 'justify-self', ('normal', 'center', 'start', 'end', 'stretch'));

left

// src/core/layout/_position.scss:7
@include generators.utility-class-generator('l', 'left', config.$sizes, 'px');
// src/core/layout/_position.scss:12
@include generators.utility-class-generator('l', 'left', config.$negative-sizes, 'px');
// src/core/layout/_position.scss:17
@include generators.utility-class-generator('l', 'left', config.$percent-sizes, '%', 'p');
// src/core/layout/_position.scss:22
@include generators.utility-class-generator('l', 'left', config.$negative-percent-sizes, '%', 'p');

Config values it reads:

// src/core/_config.scss:27
$sizes:          0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;
$negative-sizes: -1,-2,-3,-4,-8,-12,-14,-16,-24,-32,-40,-48,-56,-64;
$percent-sizes:  5,10,15,20,25,50,75,100;

// src/core/_config.scss:35
$negative-percent-sizes: -25,-50,-75,-100;

line-height

// src/core/style/_typography.scss:117
@include generators.utility-class-generator('lh', 'line-height', config.$line-heights);

Config values it reads:

// src/core/_config.scss:335
$line-heights: (
  1: 1,
  'tight': 1.25,
  'normal': 1.6,
  'loose': 1.75
);

margin

// src/core/layout/_grid.scss:49
@include generators.grid-offset-generator(config.$columns);
// src/core/layout/_margin.scss:14
@include generators.utility-class-generator((
  prefix: 'm',
  property: 'margin',
  values: $margin-sizes,
  unit: 'px',
  orientations: config.$orientations
));

Config values it reads:

// src/core/_config.scss:27
$sizes:          0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;
$negative-sizes: -1,-2,-3,-4,-8,-12,-14,-16,-24,-32,-40,-48,-56,-64;

// src/core/_config.scss:84
$orientations: (
  't': ('top'),
  'r': ('right'),
  'b': ('bottom'),
  'l': ('left'),
  'x': ('right', 'left'),
  'y': ('top', 'bottom')
);

// src/core/_config.scss:114
$columns: 12;

max-height

// src/core/layout/_dimension.scss:45
@include generators.utility-class-generator('max-h', 'max-height', $max-height-sizes, 'px');

Config values it reads:

// src/core/_config.scss:27
$sizes: 0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;

max-width

// src/core/layout/_dimension.scss:44
@include generators.utility-class-generator('max-w', 'max-width', $max-width-sizes, 'px');
// src/core/layout/_grid.scss:50
@include generators.grid-column-max-generator(config.$columns);

Config values it reads:

// src/core/_config.scss:27
$sizes: 0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;

// src/core/_config.scss:114
$columns: 12;

min-height

// src/core/layout/_dimension.scss:43
@include generators.utility-class-generator('min-h', 'min-height', $min-height-sizes, 'px');

Config values it reads:

// src/core/_config.scss:27
$sizes: 0,1,2,3,4,6,8,12,14,16,24,32,40,48,56,64,80,96,128,256;