Spacing

Utility classes for inner (padding) and outer (margin) spacing. The name follows the pattern .s-{type}{direction}-{size}: type is p (padding) or m (margin); direction is a (all sides), t/r/b/l (top/right/bottom/left), x (left+right), y (top+bottom); size is a scale key. Values come from the --s-space-* tokens, so spacing stays consistent with the rest of the system. The classes are available wherever @smalt-ui/core/styles.css is loaded.

Size scale

Sizes are keys of the $spacing scale (the same --s-space-* that components use).

00

10.25rem

20.5rem

30.75rem

41rem

51.25rem

61.5rem

82rem

102.5rem

123rem

164rem

Key	Value	Key	Value
0	0	6	1.5rem
1	0.25rem	8	2rem
2	0.5rem	10	2.5rem
3	0.75rem	12	3rem
4	1rem	16	4rem
5	1.25rem

Padding

s-pa-2

s-pa-4

s-pa-6

<template>
  <div class="s-pa-2">…</div>
  <div class="s-pa-4">…</div>
  <div class="s-pa-6">…</div>
</template>

Directions work the same for p and m: for example, .s-px-4 sets horizontal padding, and .s-pt-6 sets top padding only.

s-px-6 s-py-2

s-pt-6

<template>
  <div class="s-px-6 s-py-2">…</div>
  <div class="s-pt-6">…</div>
</template>

Margin

The same directions with the m type. There are also horizontal auto classes: .s-ml-auto, .s-mr-auto, .s-mx-auto center a block or push it to one side.

s-mx-auto

s-ml-auto

<template>
  <div class="s-mx-auto">Centered</div>
  <div class="s-ml-auto">Pushed right</div>
</template>

Directions

Suffix	Sides	CSS (for p / m)
a	all	padding / margin
t	top	padding-top / margin-top
r	right	padding-right / margin-right
b	bottom	padding-bottom / margin-bottom
l	left	padding-left / margin-left
x	left + right	padding-left + padding-right (and margin)
y	top + bottom	padding-top + padding-bottom (and margin)

Responsiveness

Every class has breakpoint variants .s-{type}{dir}-{bp}-{size} that apply from the given breakpoint and up (mobile-first): xs 0, sm 600px, md 1024px, lg 1440px, xl 1920px (the same system as the grid). For example, .s-pa-2 .s-pa-md-6 gives 0.5rem padding on a narrow screen and 1.5rem from 1024px. It works for auto too: .s-mx-md-auto.

Class name

.s-{p|m}{a|t|r|b|l|x|y}-{size}             e.g. .s-pa-4, .s-mt-6, .s-px-2
.s-{p|m}{a|t|r|b|l|x|y}-{bp}-{size}        e.g. .s-pa-md-6 (from 1024px)
.s-{ml|mr|mx}-auto  /  -{bp}-auto          e.g. .s-mx-auto, .s-mx-md-auto

The full set is every combination of type × direction × size (0…16), base and per breakpoint, plus the auto classes.

Customization

The scale is the $spacing SASS map with !default: override it before @use, and the classes (as well as the --s-space-* tokens and all components) pick up the new values. A single spacing value can also be changed at runtime by overriding a specific --s-space-* variable.