Spacing

Pack name: seed-spacing

Spacing utility pack for Seed

Contents

Install

npm install seed-spacing --save

Dependencies


Usage

Basic

seed-spacing provides a range of spacing utilities for both margin and padding.

Use mrg for margins, and pad for padding.

An example spacing utility class looks like this:

.u-mrg-5
  • u = prefix indicating “utility”
  • mrg = margin
  • 5 = size

The above class will add a margin of 20px in all directions when applied to a selector.

Examples:

Wow! I magically have a margin of 20px all around me!
<div class="u-mrg-5">
  Wow! I magically have a margin of 20px all around me!
</div>
Oh snap! I magically have a padding of 8px all around me!
<div class="u-pad-2">
  Oh snap! I magically have a padding of 8px all around me!
</div>

Auto (margin only)

The following example is applicable only to margin utility classes.

.u-mrg-l-auto
  • u = prefix indicating “utility”
  • mrg = margin
  • l = left
  • auto = auto margin

All directions

The following example is applicable to both padding and margin utility classes.

.u-mrg-5
  • u = prefix indicating “utility”
  • mrg = margin
  • 5 = size

Directional

The following example is applicable to both padding and margin utility classes.

See the list of directional modifiers.

.u-mrg-t-5
  • u = prefix indicating “utility”
  • mrg = margin
  • t = top
  • 5 = size

Responsive

The following example is applicable to both padding and margin utility classes.

See the list of responsive modifiers.

.u-mrg-t-5@md
  • u = prefix indicating “utility”
  • mrg = margin
  • t = top
  • 5 = size
  • @md = at the md breakpoint

Sizes

px sizes

By default, seed-spacing provides a range of sizes 1-10 using a base of 4px.

Size Value
1 4px
2 8px
3 12px
4 16px
5 20px
6 24px
7 28px
8 32px
9 36px
10 40px

Directional modifiers

Modifier Direction
-- --
t top
r right
b bottom
l left
h horizontal
v vertical