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’).
Add padding or margin to all sides of an element. Value defaults to
Add padding or margin to one side. E.g.
X is a logical direction. Value defaults to
If the default value of
$global-space isn’t the right size, don’t worry, there are more sizes to choose from. E.g.
X is the size as defined in
Custom Sizes With Sides
Define a spacing size with a side. E.g.
X is the logical direction and
Y is the size.
Remove padding or margin from all sides of an element.
Further, remove padding or margin from specifically one side using
X is the logical direction.
Is there information missing? Edit this page on Github!