ClassesLumos 0.0.1
Utilities
Every single-property class in the framework, with the value it sets. Utilities are the last layer in the cascade, so they always win.
A utility does one thing to one property. It sits in the last cascade layer, so it beats a component's own styles without needing !important or a more specific selector. It is the same job a combo class does in Webflow, without the risk of it being edited somewhere else and changing everything.
Reach for a utility for a one-off adjustment. When you find yourself repeating the same four utilities together, that combination wants to be a pattern or a component prop instead. This page is generated from utilities.css, so it is never out of date.
Flex
| Name | Value | Notes |
|---|---|---|
.flex-grow | flex: 1; | Takes the free space in a flex row or column. |
.flex-shrink | flex: 0 auto; | Gives up space when the container runs short. |
.flex-noshrink | flex: none; | Keeps its size whatever happens around it. |
Padding: all sides
| Name | Value | Notes |
|---|---|---|
.padding-0 | padding: 0; | |
.padding-1 | padding: var(--space-1); | |
.padding-2 | padding: var(--space-2); | |
.padding-3 | padding: var(--space-3); | |
.padding-4 | padding: var(--space-4); | |
.padding-5 | padding: var(--space-5); | |
.padding-6 | padding: var(--space-6); | |
.padding-7 | padding: var(--space-7); | |
.padding-8 | padding: var(--space-8); | |
.padding-sitemargin | padding: var(--site-margin); | |
.padding-gutter | padding: var(--site-gutter); | |
.padding-small | padding: var(--section-space-small); | |
.padding-medium | padding: var(--section-space-medium); | |
.padding-large | padding: var(--section-space-large); |
Padding: block (top + bottom)
| Name | Value | Notes |
|---|---|---|
.padding-block-0 | padding-block: 0; | |
.padding-block-1 | padding-block: var(--space-1); | |
.padding-block-2 | padding-block: var(--space-2); | |
.padding-block-3 | padding-block: var(--space-3); | |
.padding-block-4 | padding-block: var(--space-4); | |
.padding-block-5 | padding-block: var(--space-5); | |
.padding-block-6 | padding-block: var(--space-6); | |
.padding-block-7 | padding-block: var(--space-7); | |
.padding-block-8 | padding-block: var(--space-8); | |
.padding-block-sitemargin | padding-block: var(--site-margin); | |
.padding-block-gutter | padding-block: var(--site-gutter); | |
.padding-block-small | padding-block: var(--section-space-small); | |
.padding-block-medium | padding-block: var(--section-space-medium); | |
.padding-block-large | padding-block: var(--section-space-large); |
Padding: inline (left + right)
| Name | Value | Notes |
|---|---|---|
.padding-inline-0 | padding-inline: 0; | |
.padding-inline-1 | padding-inline: var(--space-1); | |
.padding-inline-2 | padding-inline: var(--space-2); | |
.padding-inline-3 | padding-inline: var(--space-3); | |
.padding-inline-4 | padding-inline: var(--space-4); | |
.padding-inline-5 | padding-inline: var(--space-5); | |
.padding-inline-6 | padding-inline: var(--space-6); | |
.padding-inline-7 | padding-inline: var(--space-7); | |
.padding-inline-8 | padding-inline: var(--space-8); | |
.padding-inline-sitemargin | padding-inline: var(--site-margin); | |
.padding-inline-gutter | padding-inline: var(--site-gutter); |
Padding: top
| Name | Value | Notes |
|---|---|---|
.padding-top-0 | padding-top: 0; | |
.padding-top-1 | padding-top: var(--space-1); | |
.padding-top-2 | padding-top: var(--space-2); | |
.padding-top-3 | padding-top: var(--space-3); | |
.padding-top-4 | padding-top: var(--space-4); | |
.padding-top-5 | padding-top: var(--space-5); | |
.padding-top-6 | padding-top: var(--space-6); | |
.padding-top-7 | padding-top: var(--space-7); | |
.padding-top-8 | padding-top: var(--space-8); | |
.padding-top-sitemargin | padding-top: var(--site-margin); | |
.padding-top-gutter | padding-top: var(--site-gutter); | |
.padding-top-small | padding-top: var(--section-space-small); | |
.padding-top-medium | padding-top: var(--section-space-medium); | |
.padding-top-large | padding-top: var(--section-space-large); | |
.padding-top-navoverlap | padding-top: var(--section-space-nav-overlap); |
Padding: bottom
| Name | Value | Notes |
|---|---|---|
.padding-bottom-0 | padding-bottom: 0; | |
.padding-bottom-1 | padding-bottom: var(--space-1); | |
.padding-bottom-2 | padding-bottom: var(--space-2); | |
.padding-bottom-3 | padding-bottom: var(--space-3); | |
.padding-bottom-4 | padding-bottom: var(--space-4); | |
.padding-bottom-5 | padding-bottom: var(--space-5); | |
.padding-bottom-6 | padding-bottom: var(--space-6); | |
.padding-bottom-7 | padding-bottom: var(--space-7); | |
.padding-bottom-8 | padding-bottom: var(--space-8); | |
.padding-bottom-sitemargin | padding-bottom: var(--site-margin); | |
.padding-bottom-gutter | padding-bottom: var(--site-gutter); | |
.padding-bottom-small | padding-bottom: var(--section-space-small); | |
.padding-bottom-medium | padding-bottom: var(--section-space-medium); | |
.padding-bottom-large | padding-bottom: var(--section-space-large); | |
.padding-bottom-navoverlap | padding-bottom: var(--section-space-nav-overlap); |
Padding: left
| Name | Value | Notes |
|---|---|---|
.padding-left-0 | padding-left: 0; | |
.padding-left-1 | padding-left: var(--space-1); | |
.padding-left-2 | padding-left: var(--space-2); | |
.padding-left-3 | padding-left: var(--space-3); | |
.padding-left-4 | padding-left: var(--space-4); | |
.padding-left-5 | padding-left: var(--space-5); | |
.padding-left-6 | padding-left: var(--space-6); | |
.padding-left-7 | padding-left: var(--space-7); | |
.padding-left-8 | padding-left: var(--space-8); | |
.padding-left-sitemargin | padding-left: var(--site-margin); | |
.padding-left-gutter | padding-left: var(--site-gutter); |
Padding: right
| Name | Value | Notes |
|---|---|---|
.padding-right-0 | padding-right: 0; | |
.padding-right-1 | padding-right: var(--space-1); | |
.padding-right-2 | padding-right: var(--space-2); | |
.padding-right-3 | padding-right: var(--space-3); | |
.padding-right-4 | padding-right: var(--space-4); | |
.padding-right-5 | padding-right: var(--space-5); | |
.padding-right-6 | padding-right: var(--space-6); | |
.padding-right-7 | padding-right: var(--space-7); | |
.padding-right-8 | padding-right: var(--space-8); | |
.padding-right-sitemargin | padding-right: var(--site-margin); | |
.padding-right-gutter | padding-right: var(--site-gutter); |
Margin
| Name | Value | Notes |
|---|---|---|
.margin-top-auto | margin-top: auto; | |
.margin-top-0 | margin-top: 0; | |
.margin-top-1 | margin-top: var(--space-1); | |
.margin-top-2 | margin-top: var(--space-2); | |
.margin-top-3 | margin-top: var(--space-3); | |
.margin-top-4 | margin-top: var(--space-4); | |
.margin-top-5 | margin-top: var(--space-5); | |
.margin-top-6 | margin-top: var(--space-6); | |
.margin-top-7 | margin-top: var(--space-7); | |
.margin-top-8 | margin-top: var(--space-8); | |
.margin-top-gutter | margin-top: var(--site-gutter); | |
.margin-top-text | margin-top: var(--_margin-top); | |
.margin-bottom-auto | margin-bottom: auto; | |
.margin-bottom-0 | margin-bottom: 0; | |
.margin-bottom-1 | margin-bottom: var(--space-1); | |
.margin-bottom-2 | margin-bottom: var(--space-2); | |
.margin-bottom-3 | margin-bottom: var(--space-3); | |
.margin-bottom-4 | margin-bottom: var(--space-4); | |
.margin-bottom-5 | margin-bottom: var(--space-5); | |
.margin-bottom-6 | margin-bottom: var(--space-6); | |
.margin-bottom-7 | margin-bottom: var(--space-7); | |
.margin-bottom-8 | margin-bottom: var(--space-8); | |
.margin-bottom-gutter | margin-bottom: var(--site-gutter); | |
.margin-bottom-text | margin-bottom: var(--_margin-bottom); | |
.margin-block-auto | margin-block: auto; | |
.margin-block-0 | margin-block: 0; | |
.margin-block-1 | margin-block: var(--space-1); | |
.margin-block-2 | margin-block: var(--space-2); | |
.margin-block-3 | margin-block: var(--space-3); | |
.margin-block-4 | margin-block: var(--space-4); | |
.margin-block-5 | margin-block: var(--space-5); | |
.margin-block-6 | margin-block: var(--space-6); | |
.margin-block-7 | margin-block: var(--space-7); | |
.margin-block-8 | margin-block: var(--space-8); | |
.margin-block-gutter | margin-block: var(--site-gutter); | |
.margin-block-text | margin-block: var(--_margin-top) var(--_margin-bottom); | |
.margin-inline-auto | margin-inline: auto; | |
.line-clamp-2 | line-clamp: 2;
-webkit-line-clamp: 2; | Truncates to two lines with an ellipsis. |
.line-clamp-3 | line-clamp: 3;
-webkit-line-clamp: 3; | Truncates to three lines with an ellipsis. |
.line-clamp-4 | line-clamp: 4;
-webkit-line-clamp: 4; | Truncates to four lines with an ellipsis. |
Gap
| Name | Value | Notes |
|---|---|---|
.gap-inherit | grid-column-gap: inherit;
grid-row-gap: inherit; | Takes the gap of the layout it sits inside rather than setting its own. |
.gap-0 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: 0rem; | |
.gap-1 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-1); | |
.gap-2 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-2); | |
.gap-3 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-3); | |
.gap-4 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-4); | |
.gap-5 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-5); | |
.gap-6 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-6); | |
.gap-7 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-7); | |
.gap-8 | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-8); | |
.gap-gutter | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--site-gutter); | The site gutter, so the spacing matches the grid around it. |
.gap-small | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--section-space-small); | |
.gap-medium | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--section-space-medium); | |
.gap-large | grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--section-space-large); | |
.gap-row-inherit | grid-row-gap: inherit; | |
.gap-row-0 | grid-row-gap: 0rem; | |
.gap-row-1 | grid-row-gap: var(--space-1); | |
.gap-row-2 | grid-row-gap: var(--space-2); | |
.gap-row-3 | grid-row-gap: var(--space-3); | |
.gap-row-4 | grid-row-gap: var(--space-4); | |
.gap-row-5 | grid-row-gap: var(--space-5); | |
.gap-row-6 | grid-row-gap: var(--space-6); | |
.gap-row-7 | grid-row-gap: var(--space-7); | |
.gap-row-8 | grid-row-gap: var(--space-8); | |
.gap-row-gutter | grid-row-gap: var(--site-gutter); |
Align & justify
| Name | Value | Notes |
|---|---|---|
.alignment-start | --_alignment: start;
text-align: start; | Sets the alignment custom property that patterns read, aligning the container's children to the start. |
.alignment-center | --_alignment: center;
text-align: center; | Same, centred. |
.alignment-end | --_alignment: end;
text-align: end; | Same, aligned to the end. |
.align-self-inherit | align-self: inherit; | |
.align-self-start | align-self: flex-start; | |
.align-self-center | align-self: center; | |
.align-self-end | align-self: flex-end; | |
.align-self-stretch | align-self: stretch; | |
.align-items-stretch | align-items: stretch; | |
.align-items-start | align-items: flex-start; | |
.align-items-center | align-items: center; | |
.align-items-end | align-items: flex-end; | |
.align-items-inherit | align-items: inherit; | |
.justify-content-start | justify-content: flex-start; | |
.justify-content-center | justify-content: center; | |
.justify-content-end | justify-content: flex-end; | |
.justify-content-between | justify-content: space-between; | |
.justify-content-around | justify-content: space-around; | |
.justify-content-inherit | justify-content: inherit; |
Sizing
| Name | Value | Notes |
|---|---|---|
.width-full | width: 100%; | |
.width-auto | width: auto; | |
.min-width-auto | min-width: auto; | Lets a flex or grid child shrink below its content size, which it refuses to do by default. |
.height-full | height: 100%; | |
.height-auto | height: auto; | |
.cover | width: 100%;
height: 100%; | Fills its parent completely and sits behind everything else in it. Used for a background image or video. |
.max-width-none | max-width: none; | Removes a max width inherited from a component. |
.max-width-small | max-width: var(--max-width-small); | Caps the width at --max-width-small, the comfortable reading measure. |
.max-width-full | max-width: var(--max-width-full); | |
.min-height-screen | min-height: 100svh; | At least the height of the viewport, using svh so mobile browser chrome does not cause a jump. |
Aspect ratio & object fit
| Name | Value | Notes |
|---|---|---|
.ratio-auto | aspect-ratio: auto; | Lets the media set its own height. The page shifts when it loads, so prefer a fixed ratio above the fold. |
.ratio-1-1 | aspect-ratio: 1; | |
.ratio-16-9 | aspect-ratio: 16 / 9; | |
.ratio-3-2 | aspect-ratio: 3 / 2; | |
.ratio-2-3 | aspect-ratio: 2 / 3; | |
.ratio-2-1 | aspect-ratio: 2; | |
.ratio-5-4 | aspect-ratio: 5 / 4; | |
.ratio-4-5 | aspect-ratio: 4 / 5; | |
.object-fit-cover | object-fit: cover; | |
.object-fit-contain | object-fit: contain; |
Typography
| Name | Value | Notes |
|---|---|---|
.line-height-small | line-height: var(--line-height-small); | |
.line-height-medium | line-height: var(--line-height-medium); | |
.line-height-large | line-height: var(--line-height-large); | |
.line-height-huge | line-height: var(--line-height-huge); | |
.letter-spacing-tight | letter-spacing: var(--letter-spacing-tight); | |
.letter-spacing-normal | letter-spacing: var(--letter-spacing-normal); | |
.weight-regular | font-family: var(--primary-family);
font-weight: var(--primary-regular); | |
.weight-medium | font-family: var(--primary-family);
font-weight: var(--primary-medium); | |
.weight-bold | font-family: var(--primary-family);
font-weight: var(--primary-bold); | |
.text-transform-none | text-transform: none; | |
.text-transform-uppercase | text-transform: uppercase; | |
.text-transform-capitalize | text-transform: capitalize; | |
.text-transform-lowercase | text-transform: lowercase; | |
.text-wrap-default | text-wrap: wrap; | |
.text-wrap-balance | text-wrap: balance; | |
.text-wrap-pretty | text-wrap: pretty; | |
.color-inherit | color: inherit; | Takes the color of whatever it sits inside rather than the theme default. |
.color-faded | color: color-mix(in srgb, currentColor 70%, transparent); | Drops the text to a muted version of the current color, for secondary copy. |
Background & radius
| Name | Value | Notes |
|---|---|---|
.background-transparent | background-color: transparent; | Removes the surface color, letting the theme behind show through. |
.background-1 | background-color: var(--background); | |
.background-2 | background-color: var(--background-2); | |
.background-skeleton | background-color: var(--background-skeleton); | The faint tint an image or video sits on while it loads, so the layout does not flash white. |
.radius-none | border-radius: 0; | |
.radius-inherit | border-radius: inherit; | Takes the corner radius of its parent, so a child sitting inside a rounded card matches it. |
.radius-small | border-radius: var(--radius-small); | |
.radius-main | border-radius: var(--radius-main); | |
.radius-round | border-radius: var(--radius-round); | Fully rounded ends, for pills and circular buttons. |
Display
| Name | Value | Notes |
|---|---|---|
.display-block | display: block; | |
.display-inline | display: inline; | |
.display-inline-block | display: inline-block; | |
.display-inline-flex | display: inline-flex; | |
.display-inline-grid | display: inline-grid; | |
.display-none | display: none; |
Overflow
| Name | Value | Notes |
|---|---|---|
.overflow-visible | overflow: visible; | |
.overflow-clip | overflow: clip; | |
.overflow-x-auto | overflow: auto clip; | |
.overflow-y-auto | overflow: clip auto; |
Position & z-index
| Name | Value | Notes |
|---|---|---|
.position-static | position: static; | |
.position-relative | position: relative; | |
.position-absolute | position: absolute; | |
.position-sticky | position: sticky;
top: 0; | |
.position-fixed | position: fixed; | |
.zindex-negative | z-index: -1;
position: relative; | |
.zindex-0 | z-index: 0;
position: relative; | |
.zindex-unset | z-index: unset;
position: relative; | |
.zindex-1 | z-index: 1;
position: relative; | |
.zindex-2 | z-index: 2;
position: relative; | |
.zindex-3 | z-index: 3;
position: relative; |
Interaction & order
| Name | Value | Notes |
|---|---|---|
.pointer-on | pointer-events: auto; | Takes clicks back, for a child of something set to pointer-off. |
.pointer-off | pointer-events: none; | Ignores the mouse entirely; clicks pass through to whatever is underneath. |
.order-first | order: -1; | Moves to the start visually without moving in the markup. The reading order for assistive tech does not change, so only use it where the two still agree. |
.order-last | order: 1; | Moves to the end visually without moving in the markup, with the same caveat. |
Accessibility
| Name | Value | Notes |
|---|---|---|
.sr-only | white-space: nowrap;
clip: rect(0, 0, 0, 0);
border-width: 0;
… | Visible to screen readers, invisible on screen. For labels and headings that the layout communicates visually but assistive tech cannot see. |