Spacings

Helper Classes for Margin/Padding

TIP

Direction is optional (empty = all sides). For example: m-xxl = margin "XXL" on all four sides.

.m-[direction] * - [ size ]

.p-[direction] * - [ size ]

directions	sizes
x (left and right)	reset: 0px
y (top and bottom)	xxs / 4: 4px
l (left)	xs / 8: 8px
r (right)	3xxs / 12: 12px
t (top)	s / 16: 16px
b (bottom)	m / 24: 24px
	l / 32: 32px
(leave empty for all sides e.g. .space-xs) - for usage in mixins: all	xl / 48: 48px
	xxl / 64: 64px
	xxxl / 96: 96px

Example

m-r-xxl

p-l

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

m-l-s m-t-m

<div class="h-flex h-flex-row">
  <div class="h-highlight-block -dark m-r-xxl">
    <p>m-r-xxl</p>
  </div>
  <div class="h-highlight-block p-l">
    <h2>p-l</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
  <div class="h-highlight-block -dark m-l-s m-t-xl">
    <p>m-l-s m-t-m</p>
  </div>
</div>

Negative Margin Classes

Example

• .-m-r-xxl negative margin-left with value $space-xxl

-m-r-xxl

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

<div class="h-flex h-flex-row">
  <div class="h-highlight-block -dark -m-r-xxl">
    <p>-m-r-xxl</p>
  </div>
  <div class="h-highlight-block">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

Mixins for Margin/Padding

Use Spacing-Mixin in SCSS like this:

@include p([direction], [size]);
@include m([direction], [size]);

Variables for Spacings

Use Variables in SCSS like in this example:

left: $space-xxl;

Reset Margin or Padding for Print

See general Print Helper Classes.