ClassesLumos 0.0.1
Patterns
The multi-property classes components share: containers, flex and grid layouts, the leading-trim helpers.
A pattern sets several properties at once and is shared by more than one component. It sits between the base layer and components, so a component can override a pattern it uses, and a utility can override both.
Most patterns are applied for you by the component that owns them: Section adds .sectionPatternpadding-top: var(--section-space-medium)padding-bottom: var(--section-space-medium)background-color: var(--background)color: var(--text)display: flexflex-direction: columnalign-items: stretchjustify-content: centerposition: relative, Grid adds .grid-autofitPattern--_gap-size: var(--site-gutter)--_column-count: 12display: gridgrid-column-gap: var(--_gap-size)grid-row-gap: var(--_gap-size)grid-template-rows: autogrid-auto-columns: minmax(0, 1fr)grid-template-columns: repeat(auto-fit, minmax(min(max(8rem, (100% - ((var(--_column-count) - 1) * var(--_gap-size))) / var(--_column-count)), 100%), 1fr)). They are listed here because they are also usable directly when you are building something the components do not cover. Generated from patterns.css.
Text & layout
| Name | Value | Notes |
|---|---|---|
.heading | margin-top: var(--_margin-top);
max-width: var(--_mw, none); | |
.text | margin-top: var(--_margin-top);
max-width: var(--_mw, none); | |
.section | padding-top: var(--section-space-medium);
padding-bottom: var(--section-space-medium);
background-color: var(--background);
… | |
.container | width: var(--site-width);
max-width: var(--max-width-main);
display: flex;
… | |
.button-wrapper | margin-top: var(--space-6);
display: flex;
flex-flow: wrap;
… | |
.image | background-color: var(--background-skeleton); | |
.video | background-color: var(--background-skeleton);
height: auto; |
Flex
| Name | Value | Notes |
|---|---|---|
.flex-horizontal-wrap | display: flex;
flex-flow: wrap;
align-content: center;
… | |
.flex-horizontal-nowrap | display: flex;
flex-flow: row;
align-content: center;
… | |
.flex-vertical-wrap | display: flex;
flex-flow: column wrap;
justify-content: center;
… | |
.flex-vertical-nowrap | display: flex;
flex-flow: column;
justify-content: center;
… |
Grid
| Name | Value | Notes |
|---|---|---|
.grid-autofit | --_gap-size: var(--site-gutter);
--_column-count: 12;
display: grid;
… | |
.grid-autofill | --_gap-size: var(--site-gutter);
--_column-count: 12;
display: grid;
… |
Trim, clamp & cover
| Name | Value | Notes |
|---|---|---|
.cover-absolute | width: 100%;
height: 100%;
position: absolute;
… | Same fill, positioned absolutely against the nearest positioned ancestor. |
.display-contents | display: contents;
align-items: inherit;
justify-content: inherit;
… | Removes the element's own box but keeps its children in the parent's layout. For a wrapper that must not become a flex or grid item itself. |
.field | display: flex;
flex-direction: column;
gap: var(--space-2);
… | |
.field-label | display: flex; | |
.field-star | color: var(--text-2); | |
.field-control | --field-pad-block: 0.75em;
--field-pad-inline: 1em;
width: 100%;
… |