@slate/utility or slate.utility.min.css
Flex classes exist at each device breakpoint. Add @device to any class to target a device.
| Class | CSS |
|---|---|
| .flex | display: flex; |
| flex-direction | |
| .flex-col | flex-direction: column; |
| .flex-col-r | flex-direction: column-reverse; |
| .flex-row | flex-direction: row; |
| .flex-row-r | flex-direction: row-reverse; |
| justify-content | |
| .flex-just-start | justify-content: flex-start; |
| .flex-just-center | justify-content: center; |
| .flex-just-end | justify-content: flex-end; |
| .flex-just-around | justify-content: space-around; |
| .flex-just-between | justify-content: space-between; |
| .flex-just-even | justify-content: space-evenly; |
| align-items | |
| .flex-align-items-start | align-items: flex-start; |
| .flex-align-items-center | align-items: flex-center; |
| .flex-align-items-end | align-items: flex-end; |
| order | |
| .order-first | order: -1; |
| .order-last | order: 1; |
| Class | Description |
|---|---|
| .p | padding: var(--space) |
| .px | padding: 0 var(--space) |
| .py | padding: var(--space) 0 |
| .pl | padding-left: var(--space) |
| .pr | padding-right: var(--space) |
| .pt | padding-top: var(--space) |
| .pb | padding-bottom: var(--space) |
| Sizes | |
| .p{side}-2 | padding: calc( 2 * var(--space) ) |
| ... | |
| .p{side}-12 | padding: calc( 12 * var(--space) ) |
| Class | Description |
|---|---|
| .m | margin: var(--space) |
| .mx | margin: 0 var(--space) |
| .my | margin: var(--space) 0 |
| .ml | margin-left: var(--space) |
| .mr | margin-right: var(--space) |
| .mt | margin-top: var(--space) |
| .mb | margin-bottom: var(--space) |
| Sizes | |
| .m{side}-2 | margin: calc( 2 * var(--space) ) |
| ... | |
| .m{side}-12 | margin: calc( 12 * var(--space) ) |
The space utility classes modify the space unit on the given element. All children will then use the new space unit.
| Class | Description |
|---|---|
| .space-xxxs | --space: var(--space-xxxs); |
| .space-xxs | --space: var(--space-xxs); |
| .space-xs | --space: var(--space-xs); |
| .space-s | --space: var(--space-s); |
| .space-m | --space: var(--space-m); |
| .space-l | --space: var(--space-l); |
| .space-xl | --space: var(--space-xl); |
| .space-xxl | --space: var(--space-xxl); |
| .space-xxxl | --space: var(--space-xxxl); |
| Class | CSS |
|---|---|
| .text-left | text-align: left; |
| .text-center | text-align: center; |
| .text-right | text-align: right; |
| .text-base | font-size: var(--text-base); |
| .text-xs | font-size: var(--text-xs); |
| .text-s | font-size: var(--text-s); |
| .text-m | font-size: var(--text-m); |
| .text-l | font-size: var(--text-l); |
| .text-xxl | font-size: var(--text-xxl); |
| .text-xxxl | font-size: var(--text-xxxl); |
| .h1 | font-size: var(--text-h1); |
| .h2 | font-size: var(--text-h2); |
| .h3 | font-size: var(--text-h3); |
| .h4 | font-size: var(--text-h4); |
| .h5 | font-size: var(--text-h5); |
| .h6 | font-size: var(--text-h6); |