32-Utilities — Utility Classes
Single-purpose utility classes for rapid styling adjustments.
Spacing Utilities
Margin and padding utilities following the naming convention .ss-{property}-{size}.
.ss-m-2
.ss-m-4
.ss-m-6
| Class Pattern | Description |
|---|---|
.ss-m-{0-8} | Margin all sides |
.ss-mt-{0-8} | Margin top |
.ss-mr-{0-8} | Margin right |
.ss-mb-{0-8} | Margin bottom |
.ss-ml-{0-8} | Margin left |
.ss-mx-{0-8} | Margin horizontal |
.ss-my-{0-8} | Margin vertical |
.ss-p-{0-8} | Padding all sides |
Display Utilities
| Class | CSS |
|---|---|
.ss-hidden | display: none |
.ss-block | display: block |
.ss-f-inline | display: inline |
.ss-f-inline-block | display: inline-block |
.ss-flex | display: flex |
.ss-f-inline-flex | display: inline-flex |
.ss-l-grid | display: grid |
Text Utilities
.ss-text-left
.ss-text-center
.ss-text-right
.ss-font-bold
.ss-italic
.ss-uppercase
Flexbox Utilities
| Class | CSS |
|---|---|
.ss-flex-row | flex-direction: row |
.ss-flex-col | flex-direction: column |
.ss-justify-start | justify-content: flex-start |
.ss-justify-center | justify-content: center |
.ss-justify-end | justify-content: flex-end |
.ss-justify-between | justify-content: space-between |
.ss-items-start | align-items: flex-start |
.ss-items-center | align-items: center |
.ss-items-end | align-items: flex-end |
.ss-gap-{0-8} | gap: var(--ss-space-{n}) |
Visibility & SR
| Class | Description |
|---|---|
.ss-visible | visibility: visible |
.ss-invisible | visibility: hidden |
.ss-sr-only | Screen reader only |
.ss-not-sr-only | Undo screen reader only |