Positioning / Display Helper Classes

Position Types

.h-pos-[relative, absolute, fixed, static]

(with static you can attach the element back to the whole document flow)

Absolute Positioning Helper Classes

You can use these helper classes in combination with .h-pos-absolute. See Spacings for all size class names.

.left-[size]

.right-[size]

.top-[size]

.bottom-[size]

Display Behaviour

See helpers/positioning.scss

Hide Elements / Display: None

.h-hide

I'm hidden.

<div class="h-hide">I'm hidden.</div>

Display Helper Classes

.h-block / .h-show
.h-inline
.h-inline-block
.h-table
.h-table-row
.h-list-item
.h-flex

I'm an inline Div. Woah.

I'm an inline Div. Woah.

<div class="h-inline">I'm an inline Div. Woah.</div>
<div class="h-inline">I'm an inline Div. Woah.</div>

Clearfix

.h-clear

Floats

.h-float-[left, right]
.h-clear // clears previous float

h-float-left

h-float-right

  <div class="h-float-left">h-float-left</div>
  <div class="h-float-right">h-float-right</div>

Horizontal Centering

.h-center (Only for block elements with position relative)

h-center

<div class="clear m-t-m">
  <div class="p-m h-width-20 h-highlight-block -dark h-color-white h-center">h-center</div>
</div>

Alignment Helper Classes

E.g. for table cells: .h-vertical-align-[top/bottom/center]

For absolute positioned elements: .h-absolute-horizontal-center.h-absolute-vertical-center