Styleguide

Helpers

These make it easier to position & style your elements differently at various screen widths.

Place these classes on content within your `layout__item` elements. Avoid styling `layout__item`s with these or else you risk fighting the framework.

Hired includes many responsive helpers to assist in changing positioning, display, and typography for all breakpoints. All helpers use the responsive prefixes (xs, md, lg, xl) in order to apply their rules at different sizes.

Shorthand

There are various positional helpers for things like margin, padding, border, float, line height, and height. Positional helpers should typically be applied as high as possible on the element hierarchy to reduce repetition and increase visibility when inspecting elements.

Example: Margin & Padding

All margin and padding helpers allow you to specify a direction for the rule being applied. They allow you to use half values on the element and are specified in the following format:

breakpoint
xs
sm
md
lg
-
rule
m (margin)
p (padding)
b (border)
direction (optional)
t (top)
r (right)
b (bottom)
l (left)
tb (top & bottom)
rl (right & left)
size
0 (none)
h0 (half of 1)
1 (1 unit)
h1 (1.5 units)
+ (up to 10)

xs
-
m
tb
h2

Rules

Display

xs-none
xs-inline
xs-inline-block
xs-block
xs-table
xs-table-cell
xs-table-column
xs-inherit 
.layout
  .layout__item
    .library-tile.xs-none
      xs-none
  .layout__item
    .library-tile.xs-inline
      xs-inline
  .layout__item
    .library-tile.xs-inline-block
      xs-inline-block
  .layout__item
    .library-tile.xs-block
      xs-block
  .layout__item
    .library-tile.xs-table
      xs-table
  .layout__item
    .library-tile.xs-table-cell
      xs-table-cell
  .layout__item
    .library-tile.xs-table-column
      xs-table-column
  .layout__item
    .library-tile.xs-inherit
      xs-inherit

<div class='layout'>
  <div class='layout__item'>
    <div class='library-tile xs-none'>
      xs-none
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-inline'>
      xs-inline
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-inline-block'>
      xs-inline-block
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-block'>
      xs-block
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-table'>
      xs-table
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-table-cell'>
      xs-table-cell
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-table-column'>
      xs-table-column
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-inherit'>
      xs-inherit
    </div>
  </div>
</div>

Float

xs-float-left
xs-float-right
xs-float-none 
.layout
  .layout__item
    .library-tile.xs-float-left
      xs-float-left
  .layout__item
    .library-tile.xs-float-right
      xs-float-right
  .layout__item
    .library-tile.xs-float-none
      xs-float-none

<div class='layout'>
  <div class='layout__item'>
    <div class='library-tile xs-float-left'>
      xs-float-left
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-float-right'>
      xs-float-right
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-float-none'>
      xs-float-none
    </div>
  </div>
</div>

Height

Supply a minimum height for a given screen-width. Useful for forcing adjacent components to be the same height.
xs-1
xs-2
xs-3
xs-4
xs-5
xs-8
xs-9
xs-12 
.layout
  .layout__item
    .library-tile.xs-1
      xs-1
  .layout__item
    .library-tile.xs-2
      xs-2
  .layout__item
    .library-tile.xs-3
      xs-3
  .layout__item
    .library-tile.xs-4
      xs-4
  .layout__item
    .library-tile.xs-5
      xs-5
  .layout__item
    .library-tile.xs-8
      xs-8
  .layout__item
    .library-tile.xs-9
      xs-9
  .layout__item
    .library-tile.xs-12
      xs-12

<div class='layout'>
  <div class='layout__item'>
    <div class='library-tile xs-1'>
      xs-1
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-2'>
      xs-2
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-3'>
      xs-3
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-4'>
      xs-4
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-5'>
      xs-5
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-8'>
      xs-8
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-9'>
      xs-9
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-12'>
      xs-12
    </div>
  </div>
</div>

Margin

xs-m2
xs-mtb2
xs-mrl2
xs-mt2
xs-mr2
xs-mb2
xs-ml2 
.layout
  .layout__item
    .library-tile.xs-m2
      xs-m2
  .layout__item
    .library-tile.xs-mtb2
      xs-mtb2
  .layout__item
    .library-tile.xs-mrl2
      xs-mrl2
  .layout__item
    .library-tile.xs-mt2
      xs-mt2
  .layout__item
    .library-tile.xs-mr2
      xs-mr2
  .layout__item
    .library-tile.xs-mb2
      xs-mb2
  .layout__item
    .library-tile.xs-ml2
      xs-ml2

<div class='layout'>
  <div class='layout__item'>
    <div class='library-tile xs-m2'>
      xs-m2
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-mtb2'>
      xs-mtb2
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-mrl2'>
      xs-mrl2
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-mt2'>
      xs-mt2
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-mr2'>
      xs-mr2
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-mb2'>
      xs-mb2
    </div>
  </div>
  <div class='layout__item'>
    <div class='library-tile xs-ml2'>
      xs-ml2
    </div>
  </div>
</div>

Padding

xs-p2
xs-ptb2
xs-prl2
xs-pt2
xs-pr2
xs-pb2
xs-pl2 
.layout
  .layout__item.xs-mb1
    .library-tile.xs-p2
      xs-p2
  .layout__item.xs-mb1
    .library-tile.xs-ptb2
      xs-ptb2
  .layout__item.xs-mb1
    .library-tile.xs-prl2
      xs-prl2
  .layout__item.xs-mb1
    .library-tile.xs-pt2
      xs-pt2
  .layout__item.xs-mb1
    .library-tile.xs-pr2
      xs-pr2
  .layout__item.xs-mb1
    .library-tile.xs-pb2
      xs-pb2
  .layout__item.xs-mb1
    .library-tile.xs-pl2
      xs-pl2

<div class='layout'>
  <div class='layout__item xs-mb1'>
    <div class='library-tile xs-p2'>
      xs-p2
    </div>
  </div>
  <div class='layout__item xs-mb1'>
    <div class='library-tile xs-ptb2'>
      xs-ptb2
    </div>
  </div>
  <div class='layout__item xs-mb1'>
    <div class='library-tile xs-prl2'>
      xs-prl2
    </div>
  </div>
  <div class='layout__item xs-mb1'>
    <div class='library-tile xs-pt2'>
      xs-pt2
    </div>
  </div>
  <div class='layout__item xs-mb1'>
    <div class='library-tile xs-pr2'>
      xs-pr2
    </div>
  </div>
  <div class='layout__item xs-mb1'>
    <div class='library-tile xs-pb2'>
      xs-pb2
    </div>
  </div>
  <div class='layout__item xs-mb1'>
    <div class='library-tile xs-pl2'>
      xs-pl2
    </div>
  </div>
</div>

Border

xs-b1
xs-btb1
xs-brl1
xs-bt1
xs-br1
xsayout
xs-b1
xs-btb1
xs-brl1
xs-bt1
xs-br1
xs-bb1
xs-bl1-bb1
xs-bl1 
.layout
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-b1
      xs-b1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-btb1
      xs-btb1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-brl1
      xs-brl1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-bt1
      xs-bt1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-br1
      xs-br1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-bb1
      xsayout
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-b1
      xs-b1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-btb1
      xs-btb1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-brl1
      xs-brl1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-bt1
      xs-bt1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-br1
      xs-br1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-bb1
      xs-bb1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-bl1
      xs-bl1-bb1
  .layout__item.xs-4of12.xs-mb1
    .box.box--gray.xs-p1.xs-bl1
      xs-bl1

<div class='layout'>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-b1'>
      xs-b1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-btb1'>
      xs-btb1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-brl1'>
      xs-brl1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-bt1'>
      xs-bt1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-br1'>
      xs-br1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-bb1'>
      xsayout
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-b1'>
      xs-b1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-btb1'>
      xs-btb1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-brl1'>
      xs-brl1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-bt1'>
      xs-bt1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-br1'>
      xs-br1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-bb1'>
      xs-bb1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-bl1'>
      xs-bl1-bb1
    </div>
  </div>
  <div class='layout__item xs-4of12 xs-mb1'>
    <div class='box box--gray xs-p1 xs-bl1'>
      xs-bl1
    </div>
  </div>
</div>