Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Flexbox Layout

Flexbox helper classes enable you to quickly layout items in relation to each other.

Parent element classes

  • .o-flex
  • .o-flex--vertical
  • .o-flex--vertical-center
  • .o-flex--horizontal-center
  • .o-flex--center
  • .o-flex--justify-between
  • .o-flex--spaced
  • .o-flex--spaced-wide

Child element classes

  • .o-flex__item
  • .o-flex__item--shrink

Horizontal

# 
<div class="o-flex" style="height: 100px;">
    <div style="background-color: green; width: 200px; height: 100px;"></div>
    <div class="o-flex__item" style="background-color: red; height: 150px;"></div>
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
</div>
.o-flex(style="height: 100px;")
    div(style="background-color: green; width: 200px; height: 100px;")
    .o-flex__item(style="background-color: red; height: 150px;")
    div(style="background-color: blue; width: 200px; height: 50px;")

Flex vertical

# 
<div class="o-flex o-flex--vertical" style="height: 400px;">
    <div style="background-color: green; width: 200px; height: 100px;"></div>
    <div class="o-flex__item" style="background-color: red; width: 300px; height: 150px;"></div>
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
</div>
.o-flex.o-flex--vertical(style="height: 400px;")
    div(style="background-color: green; width: 200px; height: 100px;")
    .o-flex__item(style="background-color: red; width: 300px; height: 150px;")
    div(style="background-color: blue; width: 200px; height: 50px;")

Vertical

# 
<div class="o-flex o-flex--vertical" style="height: 400px;">
    <div style="background-color: green; width: 200px; height: 100px;"></div>
    <div class="o-flex__item" style="background-color: red; width: 300px; height: 150px;"></div>
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
</div>
.o-flex.o-flex--vertical(style="height: 400px;")
    div(style="background-color: green; width: 200px; height: 100px;")
    .o-flex__item(style="background-color: red; width: 300px; height: 150px;")
    div(style="background-color: blue; width: 200px; height: 50px;")

Flex centering

# 
<div class="o-flex o-flex--center" style="height: 100px;">
    <div style="background-color: green; width: 200px; height: 100px;"></div>
    <div class="o-flex__item" style="background-color: red; height: 150px;"></div>
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
</div>
.o-flex.o-flex--center(style="height: 100px;")
    div(style="background-color: green; width: 200px; height: 100px;")
    .o-flex__item(style="background-color: red; height: 150px;")
    div(style="background-color: blue; width: 200px; height: 50px;")

Centering

# 
<div class="o-flex o-flex--center" style="height: 100px;">
    <div style="background-color: green; width: 200px; height: 100px;"></div>
    <div class="o-flex__item" style="background-color: red; height: 150px;"></div>
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
</div>
.o-flex.o-flex--center(style="height: 100px;")
    div(style="background-color: green; width: 200px; height: 100px;")
    .o-flex__item(style="background-color: red; height: 150px;")
    div(style="background-color: blue; width: 200px; height: 50px;")

Space Between

# 
<div class="o-flex o-flex--justify-between" style="height: 100px;">
    <div style="background-color: green; width: 200px; height: 100px;"></div>
    <div style="background-color: red; width: 300px; height: 150px;"></div>
    <div style="background-color: blue; width: 200px; height: 50px;"></div>
</div>
.o-flex.o-flex--justify-between(style="height: 100px;")
    div(style="background-color: green; width: 200px; height: 100px;")
    div(style="background-color: red; width: 300px; height: 150px;")
    div(style="background-color: blue; width: 200px; height: 50px;")