Spacing Utilities
The spacing utilities provide a set of classes to adjust the gap, row-gap, column-gap, padding, padding-top, padding-right, padding-bottom, padding-left, margin, margin-top, margin-right, margin-bottom and margin-left properties of elements.
Gap
| Class Name | Property | Value |
|---|---|---|
.g-0 | gap | var(--graupl-spacer-0) |
.g-1 | gap | var(--graupl-spacer-1) |
.g-2 | gap | var(--graupl-spacer-2) |
.g-3 | gap | var(--graupl-spacer-3) |
.g-4 | gap | var(--graupl-spacer-4) |
.g-5 | gap | var(--graupl-spacer-5) |
.g-6 | gap | var(--graupl-spacer-6) |
.g-7 | gap | var(--graupl-spacer-7) |
.g-8 | gap | var(--graupl-spacer-8) |
.g-9 | gap | var(--graupl-spacer-9) |
.g-10 | gap | var(--graupl-spacer-10) |
.g-auto | row-gap | auto |
Row Gap
| Class Name | Property | Value |
|---|---|---|
.rg-0 | row-gap | var(--graupl-spacer-0) |
.rg-1 | row-gap | var(--graupl-spacer-1) |
.rg-2 | row-gap | var(--graupl-spacer-2) |
.rg-3 | row-gap | var(--graupl-spacer-3) |
.rg-4 | row-gap | var(--graupl-spacer-4) |
.rg-5 | row-gap | var(--graupl-spacer-5) |
.rg-6 | row-gap | var(--graupl-spacer-6) |
.rg-7 | row-gap | var(--graupl-spacer-7) |
.rg-8 | row-gap | var(--graupl-spacer-8) |
.rg-9 | row-gap | var(--graupl-spacer-9) |
.rg-10 | row-gap | var(--graupl-spacer-10) |
.rg-auto | row-gap | auto |
Column Gap
| Class Name | Property | Value |
|---|---|---|
.cg-0 | column-gap | var(--graupl-spacer-0) |
.cg-1 | column-gap | var(--graupl-spacer-1) |
.cg-2 | column-gap | var(--graupl-spacer-2) |
.cg-3 | column-gap | var(--graupl-spacer-3) |
.cg-4 | column-gap | var(--graupl-spacer-4) |
.cg-5 | column-gap | var(--graupl-spacer-5) |
.cg-6 | column-gap | var(--graupl-spacer-6) |
.cg-7 | column-gap | var(--graupl-spacer-7) |
.cg-8 | column-gap | var(--graupl-spacer-8) |
.cg-9 | column-gap | var(--graupl-spacer-9) |
.cg-10 | column-gap | var(--graupl-spacer-10) |
.cg-auto | column-gap | auto |
Padding
| Class Name | Property | Value |
|---|---|---|
.p-0 | padding | var(--graupl-spacer-0) |
.p-1 | padding | var(--graupl-spacer-1) |
.p-2 | padding | var(--graupl-spacer-2) |
.p-3 | padding | var(--graupl-spacer-3) |
.p-4 | padding | var(--graupl-spacer-4) |
.p-5 | padding | var(--graupl-spacer-5) |
.p-6 | padding | var(--graupl-spacer-6) |
.p-7 | padding | var(--graupl-spacer-7) |
.p-8 | padding | var(--graupl-spacer-8) |
.p-9 | padding | var(--graupl-spacer-9) |
.p-10 | padding | var(--graupl-spacer-10) |
.p-auto | padding | auto |
Padding Top
| Class Name | Property | Value |
|---|---|---|
.pt-0 | padding-top | var(--graupl-spacer-0) |
.pt-1 | padding-top | var(--graupl-spacer-1) |
.pt-2 | padding-top | var(--graupl-spacer-2) |
.pt-3 | padding-top | var(--graupl-spacer-3) |
.pt-4 | padding-top | var(--graupl-spacer-4) |
.pt-5 | padding-top | var(--graupl-spacer-5) |
.pt-6 | padding-top | var(--graupl-spacer-6) |
.pt-7 | padding-top | var(--graupl-spacer-7) |
.pt-8 | padding-top | var(--graupl-spacer-8) |
.pt-9 | padding-top | var(--graupl-spacer-9) |
.pt-10 | padding-top | var(--graupl-spacer-10) |
.pt-auto | padding-top | auto |
Padding Right
| Class Name | Property | Value |
|---|---|---|
.pr-0 | padding-right | var(--graupl-spacer-0) |
.pr-1 | padding-right | var(--graupl-spacer-1) |
.pr-2 | padding-right | var(--graupl-spacer-2) |
.pr-3 | padding-right | var(--graupl-spacer-3) |
.pr-4 | padding-right | var(--graupl-spacer-4) |
.pr-5 | padding-right | var(--graupl-spacer-5) |
.pr-6 | padding-right | var(--graupl-spacer-6) |
.pr-7 | padding-right | var(--graupl-spacer-7) |
.pr-8 | padding-right | var(--graupl-spacer-8) |
.pr-9 | padding-right | var(--graupl-spacer-9) |
.pr-10 | padding-right | var(--graupl-spacer-10) |
.pr-auto | padding-right | auto |
Padding Bottom
| Class Name | Property | Value |
|---|---|---|
.pb-0 | padding-bottom | var(--graupl-spacer-0) |
.pb-1 | padding-bottom | var(--graupl-spacer-1) |
.pb-2 | padding-bottom | var(--graupl-spacer-2) |
.pb-3 | padding-bottom | var(--graupl-spacer-3) |
.pb-4 | padding-bottom | var(--graupl-spacer-4) |
.pb-5 | padding-bottom | var(--graupl-spacer-5) |
.pb-6 | padding-bottom | var(--graupl-spacer-6) |
.pb-7 | padding-bottom | var(--graupl-spacer-7) |
.pb-8 | padding-bottom | var(--graupl-spacer-8) |
.pb-9 | padding-bottom | var(--graupl-spacer-9) |
.pb-10 | padding-bottom | var(--graupl-spacer-10) |
.pb-auto | padding-bottom | auto |
Padding Left
| Class Name | Property | Value |
|---|---|---|
.pl-0 | padding-left | var(--graupl-spacer-0) |
.pl-1 | padding-left | var(--graupl-spacer-1) |
.pl-2 | padding-left | var(--graupl-spacer-2) |
.pl-3 | padding-left | var(--graupl-spacer-3) |
.pl-4 | padding-left | var(--graupl-spacer-4) |
.pl-5 | padding-left | var(--graupl-spacer-5) |
.pl-6 | padding-left | var(--graupl-spacer-6) |
.pl-7 | padding-left | var(--graupl-spacer-7) |
.pl-8 | padding-left | var(--graupl-spacer-8) |
.pl-9 | padding-left | var(--graupl-spacer-9) |
.pl-10 | padding-left | var(--graupl-spacer-10) |
.pl-auto | padding-left | auto |
Padding X
| Class Name | Property | Value |
|---|---|---|
.px-0 | padding-left, padding-right | var(--graupl-spacer-0) |
.px-1 | padding-left, padding-right | var(--graupl-spacer-1) |
.px-2 | padding-left, padding-right | var(--graupl-spacer-2) |
.px-3 | padding-left, padding-right | var(--graupl-spacer-3) |
.px-4 | padding-left, padding-right | var(--graupl-spacer-4) |
.px-5 | padding-left, padding-right | var(--graupl-spacer-5) |
.px-6 | padding-left, padding-right | var(--graupl-spacer-6) |
.px-7 | padding-left, padding-right | var(--graupl-spacer-7) |
.px-8 | padding-left, padding-right | var(--graupl-spacer-8) |
.px-9 | padding-left, padding-right | var(--graupl-spacer-9) |
.px-10 | padding-left, padding-right | var(--graupl-spacer-10) |
.px-auto | padding-left, padding-right | auto |
Padding Y
| Class Name | Property | Value |
|---|---|---|
.py-0 | padding-top, padding-bottom | var(--graupl-spacer-0) |
.py-1 | padding-top, padding-bottom | var(--graupl-spacer-1) |
.py-2 | padding-top, padding-bottom | var(--graupl-spacer-2) |
.py-3 | padding-top, padding-bottom | var(--graupl-spacer-3) |
.py-4 | padding-top, padding-bottom | var(--graupl-spacer-4) |
.py-5 | padding-top, padding-bottom | var(--graupl-spacer-5) |
.py-6 | padding-top, padding-bottom | var(--graupl-spacer-6) |
.py-7 | padding-top, padding-bottom | var(--graupl-spacer-7) |
.py-8 | padding-top, padding-bottom | var(--graupl-spacer-8) |
.py-9 | padding-top, padding-bottom | var(--graupl-spacer-9) |
.py-10 | padding-top, padding-bottom | var(--graupl-spacer-10) |
.py-auto | padding-top, padding-bottom | auto |
Padding Block Start
| Class Name | Property | Value |
|---|---|---|
.pbs-0 | padding-block-start | var(--graupl-spacer-0) |
.pbs-1 | padding-block-start | var(--graupl-spacer-1) |
.pbs-2 | padding-block-start | var(--graupl-spacer-2) |
.pbs-3 | padding-block-start | var(--graupl-spacer-3) |
.pbs-4 | padding-block-start | var(--graupl-spacer-4) |
.pbs-5 | padding-block-start | var(--graupl-spacer-5) |
.pbs-6 | padding-block-start | var(--graupl-spacer-6) |
.pbs-7 | padding-block-start | var(--graupl-spacer-7) |
.pbs-8 | padding-block-start | var(--graupl-spacer-8) |
.pbs-9 | padding-block-start | var(--graupl-spacer-9) |
.pbs-10 | padding-block-start | var(--graupl-spacer-10) |
.pbs-auto | padding-block-start | auto |
Padding Block End
| Class Name | Property | Value |
|---|---|---|
.pbe-0 | padding-block-end | var(--graupl-spacer-0) |
.pbe-1 | padding-block-end | var(--graupl-spacer-1) |
.pbe-2 | padding-block-end | var(--graupl-spacer-2) |
.pbe-3 | padding-block-end | var(--graupl-spacer-3) |
.pbe-4 | padding-block-end | var(--graupl-spacer-4) |
.pbe-5 | padding-block-end | var(--graupl-spacer-5) |
.pbe-6 | padding-block-end | var(--graupl-spacer-6) |
.pbe-7 | padding-block-end | var(--graupl-spacer-7) |
.pbe-8 | padding-block-end | var(--graupl-spacer-8) |
.pbe-9 | padding-block-end | var(--graupl-spacer-9) |
.pbe-10 | padding-block-end | var(--graupl-spacer-10) |
.pbe-auto | padding-block-end | auto |
Padding Block
| Class Name | Property | Value |
|---|---|---|
.pbse-0 | padding-block | var(--graupl-spacer-0) |
.pbse-1 | padding-block | var(--graupl-spacer-1) |
.pbse-2 | padding-block | var(--graupl-spacer-2) |
.pbse-3 | padding-block | var(--graupl-spacer-3) |
.pbse-4 | padding-block | var(--graupl-spacer-4) |
.pbse-5 | padding-block | var(--graupl-spacer-5) |
.pbse-6 | padding-block | var(--graupl-spacer-6) |
.pbse-7 | padding-block | var(--graupl-spacer-7) |
.pbse-8 | padding-block | var(--graupl-spacer-8) |
.pbse-9 | padding-block | var(--graupl-spacer-9) |
.pbse-10 | padding-block | var(--graupl-spacer-10) |
.pbse-auto | padding-block | auto |
Padding Inline Start
| Class Name | Property | Value |
|---|---|---|
.pis-0 | padding-inline-start | var(--graupl-spacer-0) |
.pis-1 | padding-inline-start | var(--graupl-spacer-1) |
.pis-2 | padding-inline-start | var(--graupl-spacer-2) |
.pis-3 | padding-inline-start | var(--graupl-spacer-3) |
.pis-4 | padding-inline-start | var(--graupl-spacer-4) |
.pis-5 | padding-inline-start | var(--graupl-spacer-5) |
.pis-6 | padding-inline-start | var(--graupl-spacer-6) |
.pis-7 | padding-inline-start | var(--graupl-spacer-7) |
.pis-8 | padding-inline-start | var(--graupl-spacer-8) |
.pis-9 | padding-inline-start | var(--graupl-spacer-9) |
.pis-10 | padding-inline-start | var(--graupl-spacer-10) |
.pis-auto | padding-inline-start | auto |
Padding Inline End
| Class Name | Property | Value |
|---|---|---|
.pie-0 | padding-inline-end | var(--graupl-spacer-0) |
.pie-1 | padding-inline-end | var(--graupl-spacer-1) |
.pie-2 | padding-inline-end | var(--graupl-spacer-2) |
.pie-3 | padding-inline-end | var(--graupl-spacer-3) |
.pie-4 | padding-inline-end | var(--graupl-spacer-4) |
.pie-5 | padding-inline-end | var(--graupl-spacer-5) |
.pie-6 | padding-inline-end | var(--graupl-spacer-6) |
.pie-7 | padding-inline-end | var(--graupl-spacer-7) |
.pie-8 | padding-inline-end | var(--graupl-spacer-8) |
.pie-9 | padding-inline-end | var(--graupl-spacer-9) |
.pie-10 | padding-inline-end | var(--graupl-spacer-10) |
.pie-auto | padding-inline-end | auto |
Padding Inline
| Class Name | Property | Value |
|---|---|---|
.pise-0 | padding-inline | var(--graupl-spacer-0) |
.pise-1 | padding-inline | var(--graupl-spacer-1) |
.pise-2 | padding-inline | var(--graupl-spacer-2) |
.pise-3 | padding-inline | var(--graupl-spacer-3) |
.pise-4 | padding-inline | var(--graupl-spacer-4) |
.pise-5 | padding-inline | var(--graupl-spacer-5) |
.pise-6 | padding-inline | var(--graupl-spacer-6) |
.pise-7 | padding-inline | var(--graupl-spacer-7) |
.pise-8 | padding-inline | var(--graupl-spacer-8) |
.pise-9 | padding-inline | var(--graupl-spacer-9) |
.pise-10 | padding-inline | var(--graupl-spacer-10) |
.pise-auto | padding-inline | auto |
Margin
| Class Name | Property | Value |
|---|---|---|
.m-0 | margin | var(--graupl-spacer-0) |
.m-1 | margin | var(--graupl-spacer-1) |
.m-2 | margin | var(--graupl-spacer-2) |
.m-3 | margin | var(--graupl-spacer-3) |
.m-4 | margin | var(--graupl-spacer-4) |
.m-5 | margin | var(--graupl-spacer-5) |
.m-6 | margin | var(--graupl-spacer-6) |
.m-7 | margin | var(--graupl-spacer-7) |
.m-8 | margin | var(--graupl-spacer-8) |
.m-9 | margin | var(--graupl-spacer-9) |
.m-10 | margin | var(--graupl-spacer-10) |
.m-auto | margin | auto |
Margin Top
| Class Name | Property | Value |
|---|---|---|
.mt-0 | margin-top | var(--graupl-spacer-0) |
.mt-1 | margin-top | var(--graupl-spacer-1) |
.mt-2 | margin-top | var(--graupl-spacer-2) |
.mt-3 | margin-top | var(--graupl-spacer-3) |
.mt-4 | margin-top | var(--graupl-spacer-4) |
.mt-5 | margin-top | var(--graupl-spacer-5) |
.mt-6 | margin-top | var(--graupl-spacer-6) |
.mt-7 | margin-top | var(--graupl-spacer-7) |
.mt-8 | margin-top | var(--graupl-spacer-8) |
.mt-9 | margin-top | var(--graupl-spacer-9) |
.mt-10 | margin-top | var(--graupl-spacer-10) |
.mt-auto | margin-top | auto |
Margin Right
| Class Name | Property | Value |
|---|---|---|
.mr-0 | margin-right | var(--graupl-spacer-0) |
.mr-1 | margin-right | var(--graupl-spacer-1) |
.mr-2 | margin-right | var(--graupl-spacer-2) |
.mr-3 | margin-right | var(--graupl-spacer-3) |
.mr-4 | margin-right | var(--graupl-spacer-4) |
.mr-5 | margin-right | var(--graupl-spacer-5) |
.mr-6 | margin-right | var(--graupl-spacer-6) |
.mr-7 | margin-right | var(--graupl-spacer-7) |
.mr-8 | margin-right | var(--graupl-spacer-8) |
.mr-9 | margin-right | var(--graupl-spacer-9) |
.mr-10 | margin-right | var(--graupl-spacer-10) |
.mr-auto | margin-right | auto |
Margin Bottom
| Class Name | Property | Value |
|---|---|---|
.mb-0 | margin-bottom | var(--graupl-spacer-0) |
.mb-1 | margin-bottom | var(--graupl-spacer-1) |
.mb-2 | margin-bottom | var(--graupl-spacer-2) |
.mb-3 | margin-bottom | var(--graupl-spacer-3) |
.mb-4 | margin-bottom | var(--graupl-spacer-4) |
.mb-5 | margin-bottom | var(--graupl-spacer-5) |
.mb-6 | margin-bottom | var(--graupl-spacer-6) |
.mb-7 | margin-bottom | var(--graupl-spacer-7) |
.mb-8 | margin-bottom | var(--graupl-spacer-8) |
.mb-9 | margin-bottom | var(--graupl-spacer-9) |
.mb-10 | margin-bottom | var(--graupl-spacer-10) |
.mb-auto | margin-bottom | auto |
Margin Left
| Class Name | Property | Value |
|---|---|---|
.ml-0 | margin-left | var(--graupl-spacer-0) |
.ml-1 | margin-left | var(--graupl-spacer-1) |
.ml-2 | margin-left | var(--graupl-spacer-2) |
.ml-3 | margin-left | var(--graupl-spacer-3) |
.ml-4 | margin-left | var(--graupl-spacer-4) |
.ml-5 | margin-left | var(--graupl-spacer-5) |
.ml-6 | margin-left | var(--graupl-spacer-6) |
.ml-7 | margin-left | var(--graupl-spacer-7) |
.ml-8 | margin-left | var(--graupl-spacer-8) |
.ml-9 | margin-left | var(--graupl-spacer-9) |
.ml-10 | margin-left | var(--graupl-spacer-10) |
.ml-auto | margin-left | auto |
Margin X
| Class Name | Property | Value |
|---|---|---|
.mx-0 | margin-left, margin-right | var(--graupl-spacer-0) |
.mx-1 | margin-left, margin-right | var(--graupl-spacer-1) |
.mx-2 | margin-left, margin-right | var(--graupl-spacer-2) |
.mx-3 | margin-left, margin-right | var(--graupl-spacer-3) |
.mx-4 | margin-left, margin-right | var(--graupl-spacer-4) |
.mx-5 | margin-left, margin-right | var(--graupl-spacer-5) |
.mx-6 | margin-left, margin-right | var(--graupl-spacer-6) |
.mx-7 | margin-left, margin-right | var(--graupl-spacer-7) |
.mx-8 | margin-left, margin-right | var(--graupl-spacer-8) |
.mx-9 | margin-left, margin-right | var(--graupl-spacer-9) |
.mx-10 | margin-left, margin-right | var(--graupl-spacer-10) |
.mx-auto | margin-left, margin-right | auto |
Margin Y
| Class Name | Property | Value |
|---|---|---|
.my-0 | margin-top, margin-bottom | var(--graupl-spacer-0) |
.my-1 | margin-top, margin-bottom | var(--graupl-spacer-1) |
.my-2 | margin-top, margin-bottom | var(--graupl-spacer-2) |
.my-3 | margin-top, margin-bottom | var(--graupl-spacer-3) |
.my-4 | margin-top, margin-bottom | var(--graupl-spacer-4) |
.my-5 | margin-top, margin-bottom | var(--graupl-spacer-5) |
.my-6 | margin-top, margin-bottom | var(--graupl-spacer-6) |
.my-7 | margin-top, margin-bottom | var(--graupl-spacer-7) |
.my-8 | margin-top, margin-bottom | var(--graupl-spacer-8) |
.my-9 | margin-top, margin-bottom | var(--graupl-spacer-9) |
.my-10 | margin-top, margin-bottom | var(--graupl-spacer-10) |
.my-auto | margin-top, margin-bottom | auto |
Margin Block Start
| Class Name | Property | Value |
|---|---|---|
.mbs-0 | margin-block-start | var(--graupl-spacer-0) |
.mbs-1 | margin-block-start | var(--graupl-spacer-1) |
.mbs-2 | margin-block-start | var(--graupl-spacer-2) |
.mbs-3 | margin-block-start | var(--graupl-spacer-3) |
.mbs-4 | margin-block-start | var(--graupl-spacer-4) |
.mbs-5 | margin-block-start | var(--graupl-spacer-5) |
.mbs-6 | margin-block-start | var(--graupl-spacer-6) |
.mbs-7 | margin-block-start | var(--graupl-spacer-7) |
.mbs-8 | margin-block-start | var(--graupl-spacer-8) |
.mbs-9 | margin-block-start | var(--graupl-spacer-9) |
.mbs-10 | margin-block-start | var(--graupl-spacer-10) |
.mbs-auto | margin-block-start | auto |
Margin Block End
| Class Name | Property | Value |
|---|---|---|
.mbe-0 | margin-block-end | var(--graupl-spacer-0) |
.mbe-1 | margin-block-end | var(--graupl-spacer-1) |
.mbe-2 | margin-block-end | var(--graupl-spacer-2) |
.mbe-3 | margin-block-end | var(--graupl-spacer-3) |
.mbe-4 | margin-block-end | var(--graupl-spacer-4) |
.mbe-5 | margin-block-end | var(--graupl-spacer-5) |
.mbe-6 | margin-block-end | var(--graupl-spacer-6) |
.mbe-7 | margin-block-end | var(--graupl-spacer-7) |
.mbe-8 | margin-block-end | var(--graupl-spacer-8) |
.mbe-9 | margin-block-end | var(--graupl-spacer-9) |
.mbe-10 | margin-block-end | var(--graupl-spacer-10) |
.mbe-auto | margin-block-end | auto |
Margin Block
| Class Name | Property | Value |
|---|---|---|
.mbse-0 | margin-block | var(--graupl-spacer-0) |
.mbse-1 | margin-block | var(--graupl-spacer-1) |
.mbse-2 | margin-block | var(--graupl-spacer-2) |
.mbse-3 | margin-block | var(--graupl-spacer-3) |
.mbse-4 | margin-block | var(--graupl-spacer-4) |
.mbse-5 | margin-block | var(--graupl-spacer-5) |
.mbse-6 | margin-block | var(--graupl-spacer-6) |
.mbse-7 | margin-block | var(--graupl-spacer-7) |
.mbse-8 | margin-block | var(--graupl-spacer-8) |
.mbse-9 | margin-block | var(--graupl-spacer-9) |
.mbse-10 | margin-block | var(--graupl-spacer-10) |
.mbse-auto | margin-block | auto |
Margin Inline Start
| Class Name | Property | Value |
|---|---|---|
.mis-0 | margin-inline-start | var(--graupl-spacer-0) |
.mis-1 | margin-inline-start | var(--graupl-spacer-1) |
.mis-2 | margin-inline-start | var(--graupl-spacer-2) |
.mis-3 | margin-inline-start | var(--graupl-spacer-3) |
.mis-4 | margin-inline-start | var(--graupl-spacer-4) |
.mis-5 | margin-inline-start | var(--graupl-spacer-5) |
.mis-6 | margin-inline-start | var(--graupl-spacer-6) |
.mis-7 | margin-inline-start | var(--graupl-spacer-7) |
.mis-8 | margin-inline-start | var(--graupl-spacer-8) |
.mis-9 | margin-inline-start | var(--graupl-spacer-9) |
.mis-10 | margin-inline-start | var(--graupl-spacer-10) |
.mis-auto | margin-inline-start | auto |
Margin Inline End
| Class Name | Property | Value |
|---|---|---|
.mie-0 | margin-inline-end | var(--graupl-spacer-0) |
.mie-1 | margin-inline-end | var(--graupl-spacer-1) |
.mie-2 | margin-inline-end | var(--graupl-spacer-2) |
.mie-3 | margin-inline-end | var(--graupl-spacer-3) |
.mie-4 | margin-inline-end | var(--graupl-spacer-4) |
.mie-5 | margin-inline-end | var(--graupl-spacer-5) |
.mie-6 | margin-inline-end | var(--graupl-spacer-6) |
.mie-7 | margin-inline-end | var(--graupl-spacer-7) |
.mie-8 | margin-inline-end | var(--graupl-spacer-8) |
.mie-9 | margin-inline-end | var(--graupl-spacer-9) |
.mie-10 | margin-inline-end | var(--graupl-spacer-10) |
.mie-auto | margin-inline-end | auto |
Margin Inline
| Class Name | Property | Value |
|---|---|---|
.mise-0 | margin-inline | var(--graupl-spacer-0) |
.mise-1 | margin-inline | var(--graupl-spacer-1) |
.mise-2 | margin-inline | var(--graupl-spacer-2) |
.mise-3 | margin-inline | var(--graupl-spacer-3) |
.mise-4 | margin-inline | var(--graupl-spacer-4) |
.mise-5 | margin-inline | var(--graupl-spacer-5) |
.mise-6 | margin-inline | var(--graupl-spacer-6) |
.mise-7 | margin-inline | var(--graupl-spacer-7) |
.mise-8 | margin-inline | var(--graupl-spacer-8) |
.mise-9 | margin-inline | var(--graupl-spacer-9) |
.mise-10 | margin-inline | var(--graupl-spacer-10) |
.mise-auto | margin-inline | auto |
Customization
To customize the alignment utilities, you can use the following variables.
| Variable | Description | Default Value |
|---|---|---|
$selector-base | Base selector for utility classes. | "." |
$selector-prefix | The selector prefix for all utility classes. | "" |
$selector-suffix | The selctor suffix for all utility classes. | "" |
$selector-separator | The selector separator for all utility classes. | "" |
$use-important | Appends !important to generated utility declarations. | true |
$generate-base-utilities | Generates the base utility classes. | true |
$screen-aware | Enables screen-aware utility variants. | false |
$theme-aware | Enables theme-aware utility variants. | false |
$scheme-aware | Enables scheme-aware utility variants. | false |
$state-aware | Enables state-aware utility variants. | false |
$container-aware | Enables container-aware utility variants. | false |
$screen-aware-selector-prefix | Prefix to the screen-aware portion of utility selectors. | "" |
$screen-aware-selector-suffix | Suffix to the screen-aware portion of utility selectors. | "" |
$screen-aware-selector-separator | Separator inserted for screen-aware utility selectors. | "\\:" |
$theme-aware-selector-prefix | Prefix to the theme-aware portion of utility selectors. | "" |
$theme-aware-selector-suffix | Suffix to the theme-aware portion of utility selectors. | "-theme" |
$theme-aware-selector-separator | Separator inserted for theme-aware utility selectors. | "\\:" |
$scheme-aware-selector-prefix | Prefix to the scheme-aware portion of utility selectors. | "" |
$scheme-aware-selector-suffix | Suffix to the scheme-aware portion of utility selectors. | "-mode" |
$scheme-aware-selector-separator | Separator inserted for scheme-aware utility selectors. | "\\:" |
$state-aware-selector-prefix | Prefix to the state-aware portion of utility selectors. | "" |
$state-aware-selector-suffix | Suffix to the state-aware portion of utility selectors. | "" |
$state-aware-selector-separator | Separator inserted for state-aware utility selectors. | "\\:" |
$container-aware-selector-prefix | Prefix to the container-aware portion of utility selectors. | "cq\\:" |
$container-aware-selector-suffix | Suffix to the container-aware portion of utility selectors. | "" |
$container-aware-selector-separator | Separator inserted for container-aware utility selectors. | "\\:" |
$utility-properties | Map of utility properties. | () |
$utility-values | Map of utility values. | () |
$utility-map | Map of utility property/value pairs. | () |
Responsive Variants
Generating responsive utility classes can be done by setting $screen-aware, $theme-aware, $scheme-aware, $state-aware, or $container-aware to true.
By default, screen-aware responsive utility classes are generated for spacing.
✏️ Note
For more information on responsive variants, refer to the Responsive utility classes documentation.