# Layout Helper Classes

# Position Types

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

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

# Display Behaviour

.h-inline
.h-block
.h-inline-block
.h-show, .show
.h-hide, .hidden

1
2
3
4
5

I'm an inline Div. Woah.

hide code

<div class="h-inline p-m m-m h-bg-color-primary h-color-white">I'm an inline Div. Woah.</div>
<div class="h-inline p-m m-m h-bg-color-primary h-color-white">I'm an inline Div. Woah.</div>

# Clearfix

.h-clear

# Floats

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

1
2

h-float-left

h-float-right

hide code

<div class="clear m-t-m">
    <div class="p-m h-bg-color-black h-box-shadow h-float-left">h-float-left</div>
    <div class="p-m h-bg-color-primary h-color-white h-float-right">h-float-right</div>
</div>

# Horizontal Centering

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

h-center

hide code

<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]

← Border Helper Classes Flexbox Helper Classes →