Spacing

Undernet has reductive and additive spacing utility classes. They utilize logical property syntax to indicate the direction the modifier will be applied.

In other words, for pages with languages reading right-to-left (e.g., have dir="rtl" on the page html tag), a modifier like has-p-inline-start will apply padding-right to the element. However, in a left-to-right page, the same class name will apply padding-left to reflect the opposite page flow.

It’s worth reading about the pattern to fully grasp it, and it will help you think in terms of direction-agnostic content, as not all languages are left-to-right!

The CSS properties which make the methodology automatic are not fully supported in IE11 or Edge, so it’s been (more or less) polyfilled in Undernet in preparation for the next generation of CSS. The future is now!

Note: All spacing modifiers use an abbreviated syntax of p (for ‘padding’) and m (for ‘margin’).

Additive

Add padding or margin to all sides of an element. Value defaults to $global-space.

.has-p

.has-m

Add padding or margin to one side. E.g. has-m-X, where X is a logical direction. Value defaults to $global-space.

.has-p-inline-start

.has-m-block-start

Custom Sizes

If the default value of $global-space isn’t the right size, don’t worry, there are more sizes to choose from. E.g. has-p-X, where X is the size as defined in $global-spacing-increments.

.has-p-xs

.has-m-xl

Custom Sizes With Sides

Define a spacing size with a side. E.g. has-p-X--Y, where X is the logical direction and Y is the size.

.has-p-inline-start-xs

.has-m-block-start-xl

Reductive

Remove padding or margin from all sides of an element.

.has-no-p

.has-no-m

Further, remove padding or margin from specifically one side using has-no-p-X, where X is the logical direction.

.has-no-p-inline-start

.has-m.has-no-m-block-start

Is there information missing? Edit this page on Github!