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), Grid adds .grid-autofitPattern--_gap-size: var(--site-gutter)--_column-count: 12display: grid. 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;
… |
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. |
.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. |