Spacing Utilities
NuvoUI provides a complete set of spacing utilities to control margins, padding, gaps, and spacing between elements. These utilities follow a consistent naming pattern and allow for responsive adjustments at different breakpoints.
Configuration
The spacing system is built on configurable variables:
Parent Selector
All spacing utilities are scoped under the VAR.$parent-selector which can be configured:
Utility Class Generation
Spacing utility classes are only generated if VAR.$generate-utility-classes is set to true:
Spacing Scale
The spacing system uses a map of predefined spacing values:
Default Unit
The default unit is used when converting unitless values:
Breakpoints
Responsive spacing variants are based on these breakpoint values:
Spacing Types Overview
NuvoUI provides four main types of spacing utilities:
Directional Control
All spacing utilities support directional variants to control which sides receive spacing:
Responsive Spacing
All spacing utilities can be applied conditionally at different breakpoints by adding @{breakpoint} suffix:
Common Patterns
Auto Margins for Alignment
Inset Positioning
Child Spacing
Visual Spacing Scale
This shows the different spacing sizes available in the system:
Layout Examples Using Spacing
Card Layout
Form Layout
Spacing Utilities Reference Tables
Padding Classes
| Class | CSS Property | Description |
|---|---|---|
.p-{size} | padding: {size} | Padding on all sides |
.px-{size} | padding-left/right: {size} | Horizontal padding |
.py-{size} | padding-top/bottom: {size} | Vertical padding |
.pt-{size} | padding-top: {size} | Top padding |
.pr-{size} | padding-right: {size} | Right padding |
.pb-{size} | padding-bottom: {size} | Bottom padding |
.pl-{size} | padding-left: {size} | Left padding |
Margin Classes
| Class | CSS Property | Description |
|---|---|---|
.m-{size} | margin: {size} | Margin on all sides |
.mx-{size} | margin-left/right: {size} | Horizontal margin |
.my-{size} | margin-top/bottom: {size} | Vertical margin |
.mt-{size} | margin-top: {size} | Top margin |
.mr-{size} | margin-right: {size} | Right margin |
.mb-{size} | margin-bottom: {size} | Bottom margin |
.ml-{size} | margin-left: {size} | Left margin |
.mx-auto | margin-left/right: auto | Horizontal centering |
.ml-auto | margin-left: auto | Push element to right |
.mr-auto | margin-right: auto | Push element to left |
Gap and Space Classes
| Class | CSS Property | Description |
|---|---|---|
.gap-{size} | gap: {size} | Gap in both directions |
.gap-x-{size} | column-gap: {size} | Horizontal gap |
.gap-y-{size} | row-gap: {size} | Vertical gap |
.space-x-{size} | margin-left: {size} on siblings | Horizontal space between children |
.space-y-{size} | margin-top: {size} on siblings | Vertical space between children |
Inset Classes
| Class | CSS Property | Description |
|---|---|---|
.inset-{size} | inset: {size} | Position on all sides |
.inset-x-{size} | left/right: {size} | Horizontal inset |
.inset-y-{size} | top/bottom: {size} | Vertical inset |
.inset-auto | inset: auto | Automatic inset |
SCSS Mixins Reference
NuvoUI provides comprehensive SCSS mixins for all spacing types:
Padding Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include p($val) | Sets padding on all sides | $val: Padding value |
@include px($val) | Sets horizontal padding | $val: Padding value |
@include py($val) | Sets vertical padding | $val: Padding value |
@include pt($val) | Sets top padding | $val: Padding value |
@include pr($val) | Sets right padding | $val: Padding value |
@include pb($val) | Sets bottom padding | $val: Padding value |
@include pl($val) | Sets left padding | $val: Padding value |
Margin Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include m($val) | Sets margin on all sides | $val: Margin value |
@include mx($val) | Sets horizontal margin | $val: Margin value |
@include my($val) | Sets vertical margin | $val: Margin value |
@include mt($val) | Sets top margin | $val: Margin value |
@include mr($val) | Sets right margin | $val: Margin value |
@include mb($val) | Sets bottom margin | $val: Margin value |
@include ml($val) | Sets left margin | $val: Margin value |
@include mx-auto | Centers element horizontally | None |
@include ml-auto | Pushes element to the right | None |
@include mr-auto | Pushes element to the left | None |
Gap Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include gap($val) | Sets gap for grid/flex children | $val: Gap value |
@include gap-x($val) | Sets horizontal gap | $val: Gap value |
@include gap-y($val) | Sets vertical gap | $val: Gap value |
Space Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include space-x($val) | Adds horizontal spacing between children | $val: Space value |
@include space-y($val) | Adds vertical spacing between children | $val: Space value |
Inset Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include inset($val) | Sets inset on all sides | $val: Inset value |
@include inset-x($val) | Sets horizontal inset | $val: Inset value |
@include inset-y($val) | Sets vertical inset | $val: Inset value |
@include inset-auto | Sets inset to auto | None |
@include inset-x-auto | Sets horizontal inset to auto | None |
@include inset-y-auto | Sets vertical inset to auto | None |