Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

10 Layout utilities

Classes to help responsive layout

10.1 Pull left or right

{$modifiers}
.pull-left

Pull left

pull-left
.pull-left--medium

Pull left after medium breakpoint

pull-left--medium
.pull-left--large

Pull left after large breakpoint

pull-left--large
.pull-right

Pull right

pull-right
.pull-right--medium

Pull right after medium breakpoint

pull-right--medium
.pull-right--large

Pull right after large breakpoint

pull-right--large 
<a class="btn {$modifiers}">{$modifiers}</a>

10.2 Add margins

.{$modifiers}
.push

All sides

.push
.push--top

Top margin

.push--top
.push--right

Right margin

.push--right
.push--bottom

Bottom margin

.push--bottom
.push--left

Left margin

.push--left
.push--ends

Vertical margins

.push--ends
.push--sides

Horizontal margin

.push--sides
.push-half

Half margins

.push-half
.push-half--top

Half top margin

.push-half--top
.push-half--right

Half right margin

.push-half--right
.push-half--bottom

Half bottom margin

.push-half--bottom
.push-half--left

Half left margin

.push-half--left
.push-half--ends

Half vertical margins

.push-half--ends
.push-half--sides

Half horizontal margins

.push-half--sides
<div class="bg-yellow inline-block ">
  <div class="bg-light-blue soft white inline-block {$modifiers}">.{$modifiers}</div>
</div>

10.3 Remove margins

.{$modifiers}
.flush

Remove all margins

.flush
.flush--top

Remove top margin

.flush--top
.flush--right

Remove right margin

.flush--right
.flush--bottom

Remove bottom margin

.flush--bottom
.flush--left

Remove left margin

.flush--left
.flush--ends

Remove vertical margins

.flush--ends
.flush--sides

Remove horizontal margins

.flush--sides
<div class="bg-yellow inline-block ">
  <div class="bg-light-blue soft push white inline-block {$modifiers}">.{$modifiers}</div>
</div>

10.4 Add padding

.{$modifiers}
.soft

All sides

.soft
.soft--top

Top padding

.soft--top
.soft--right

Right padding

.soft--right
.soft--bottom

Bottom padding

.soft--bottom
.soft--left

Left padding

.soft--left
.soft--ends

Vertical padding

.soft--ends
.soft--sides

Horizontal padding

.soft--sides
.soft-half

Half padding

.soft-half
.soft-half--top

Half top padding

.soft-half--top
.soft-half--right

Half right padding

.soft-half--right
.soft-half--bottom

Half bottom padding

.soft-half--bottom
.soft-half--left

Half left padding

.soft-half--left
.soft-half--ends

Half vertical padding

.soft-half--ends
.soft-half--sides

Half horizontal padding

.soft-half--sides
<div class="bg-yellow soft inline-block">
  <div class="bg-light-blue white inline-block {$modifiers}">.{$modifiers}</div>
</div>

10.5 Remove padding

.{$modifiers}
.hard

Remove all padding

.hard
.hard--top

Remove top padding

.hard--top
.hard--right

Remove right padding

.hard--right
.hard--bottom

Remove bottom padding

.hard--bottom
.hard--left

Remove left padding

.hard--left
.hard--ends

Remove vertical padding

.hard--ends
.hard--sides

Remove horizontal padding

.hard--sides
<div class="bg-yellow soft inline-block">
  <div class="bg-light-blue soft white inline-block {$modifiers}">.{$modifiers}</div>
</div>

10.6 Text align classes

.{$modifiers}
.text--left

Text left

.text--left
.text--right

text align right

.text--right
.text--right--medium

text align right after medium breakpoint

.text--right--medium
.text--right--large

text align right after large breakpoint

.text--right--large
<div class="bg-yellow block">
  <div class="dark-blue block {$modifiers}">.{$modifiers}</div>
</div>