Spacings

New UI spacings.

Install

Install New UI Spacings from your terminal via npm.

npm i -D @new-ui/spacings

Usage

@use "@new-ui/spacings";     // Use `@import` for CSS

Spacing blocks

Baseline spacing primitives let you scale layouts consistently.

Token Size (px/rem)
--spacing-00 0 / 0
--spacing-01 2 / 0.125
--spacing-02 4 / 0.25
--spacing-03 6 / 0.375
--spacing-04 8 / 0.5
--spacing-05 12 / 0.75
--spacing-06 16 / 1
--spacing-07 20 / 1.25
--spacing-08 24 / 1.5
--spacing-09 32 / 2
--spacing-10 40 / 2.5
--spacing-11 48 / 3
--spacing-12 56 / 3.5
--spacing-13 64 / 4
--spacing-14 72 / 4.5
--spacing-15 80 / 5
--spacing-16 96 / 6
--spacing-17 120 / 7.5
--spacing-18 160 / 10

Spacing tokens

Token Source Size (px/rem)
--spacing-zero --spacing-00 0 / 0
--spacing-xs --spacing-02 4 / 0.25
--spacing-s --spacing-04 8 / 0.5
--spacing-m --spacing-05 12 / 0.75
--spacing-l --spacing-06 16 / 1
--spacing-xl --spacing-08 24 / 1.5
--spacing-xxl --spacing-09 32 / 2
--spacing-xxxl --spacing-11 48 / 3

Sizing tokens

Token Source Size (px/rem)
--size-xs --spacing-06 16 / 1
--size-s --spacing-08 24 / 1.5
--size-m --spacing-09 32 / 2
--controls-size-default --spacing-09 32 / 2
--controls-size-small --spacing-08 24 / 1.5

Utility classes

Utility classes for margins, paddings, and spacers.

Naming convention

.nu-u-{property}{direction}-{size}

  • Property: m (margin), p (padding)
  • Direction: t (top), b (bottom), s (start/left), e (end/right), x (horizontal), y (vertical), or omit for all sides
  • Size: zero, xs, s, m, l, xl, xxl, xxxl
Margin utilities
.nu-u-m-{size}      // all sides
.nu-u-mt-{size}     // top
.nu-u-mb-{size}     // bottom
.nu-u-ms-{size}     // left
.nu-u-me-{size}     // right
.nu-u-mx-{size}     // horizontal
.nu-u-my-{size}     // vertical

.nu-u-mx-auto       // center horizontally
.nu-u-ms-auto       // push right
.nu-u-me-auto       // push left
Padding utilities
.nu-u-p-{size}      // all sides
.nu-u-pt-{size}     // top
.nu-u-pb-{size}     // bottom
.nu-u-ps-{size}     // left
.nu-u-pe-{size}     // right
.nu-u-px-{size}     // horizontal
.nu-u-py-{size}     // vertical
Spacer components
.nu-c-spacer-{size}  // creates vertical spacing block
Examples
<!-- Centered container -->
<div class="nu-u-mx-auto nu-u-px-l nu-u-py-xl">Content</div>

<!-- Card with spacing -->
<div class="nu-u-mb-m nu-u-p-m">Card</div>

<!-- Vertical spacing -->
<section>Section 1</section>
<div class="nu-c-spacer-xl"></div>
<section>Section 2</section>