Spacing

A wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

¶Default spacing

Webpixels CSS comes with a custom spacing set of variables to allow a more extensive customization in your markup.

// Spacing scale
$spacer: 1rem !default;

// Spacing values
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer * 0.75,
  4: $spacer,
  5: $spacer * 1.25,
  6: $spacer * 1.5,
  7: $spacer * 1.75,
  8: $spacer * 2,
  10: $spacer * 2.5,
  12: $spacer * 3,
  14: $spacer * 3.5,
  16: $spacer * 4,
  18: $spacer * 4.5,
  20: $spacer * 5,
  24: $spacer * 6,
  32: $spacer * 8,
  40: $spacer * 10,
  48: $spacer * 12,
  56: $spacer * 14,
  64: $spacer * 16,
  72: $spacer * 18,
  80: $spacer * 20,
  88: $spacer * 22,
  96: $spacer * 24,
  px: 1px
);

Take note that the spacing scale is used to generate various utilities like the padding, margin, and gap.

¶Customizing spacing

Use the spacing variables in your custom variables file to customize the default spacing scale.

¶Extending the default spacing scale

You can extend almost anything. Usually this is done with the help of the map-merge function provided by Sass. For adding a new spacing value to the existing map, add the following in your $theme config:

$theme: (
  spacers: map-merge(
    $spacers, (
      9: 2rem,
      11: 2.75rem
    )
  )
)

¶Override all spacers

Create your own spacing scale and override the default system provided by us:

// Spacing values
$theme: (
  spacers: (
    0: 0,
    1: 0.25rem,
    2: 0.5rem,
    3: 0.75rem,
    4: 1rem,
    5: 1.25rem
  )
)

¶Using the spacing system

There's wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.