layout

Customizing layout

Overwrite these variables in _custom_variables.scss to change these defaults.

$hr-color:     rgba(0,0,0,0.1) !default;
$margin-base:  1rem !default;
$padding-base: $margin-base !default;

Note: Margins and padding are defined in increments of rem by default

Margin helpers

Use margin and padding helpers to keep vertical rhythm. Micro classes like this help maintain the intended design, while keeping css bloat low.

However, it's sometimes easier for long-term maintenance to @extend these styles (as placeholders) in another class.

Examples:

Bad:

.my-module { margin-bottom: 30px; }

Decent:

.my-module { @extend %mb3, %p1; }

This will produce the compiled css:

.my-module { margin-bottom: 3rem; padding: 1rem; }

This adds some extra size to the compiled CSS, but is easy to read and understand in a shared development environment.

Potentially better:
<div class="my-module mb4 p1">
  This is called .my-module, has a margin-bottom of 4rem, and a padding
  of 1rem on all sides. It's obvious to anyone reading the code and it's smaller in
  file size. It's also easy to change later.
</div>
margin 0 top and bottom
margin 1 top and bottom
margin 2 top and bottom
margin 3 top and bottom
margin 4 top and bottom
margin 5 top and bottom
margin 6 top and bottom
margin 7 top and bottom
margin 8 top and bottom
<div class="m0 p1 bg-gray-lightest">margin 0 top and bottom</div>
<div class="m1 p1 bg-gray-light">margin 1 top and bottom</div>
<div class="m2 p1 bg-gray-lightest">margin 2 top and bottom</div>
<div class="m3 p1 bg-gray-light">margin 3 top and bottom</div>
<div class="m4 p1 bg-gray-lightest">margin 4 top and bottom</div>
<div class="m5 p1 bg-gray-light">margin 5 top and bottom</div>
<div class="m6 p1 bg-gray-lightest">margin 6 top and bottom</div>
<div class="m7 p1 bg-gray-lightest">margin 7 top and bottom</div>
<div class="m8 p1 bg-gray-lightest">margin 8 top and bottom</div>
margin 0 left
margin 1 left
margin 2 left
margin 3 left
margin 4 left
margin 5 left
margin 6 left
margin 7 left
margin 8 left
<div class="ml0 p1 bg-gray-lightest">margin 0 left</div>
<div class="ml1 p1 bg-gray-light">margin 1 left</div>
<div class="ml2 p1 bg-gray-lightest">margin 2 left</div>
<div class="ml3 p1 bg-gray-light">margin 3 left</div>
<div class="ml4 p1 bg-gray-lightest">margin 4 left</div>
<div class="ml5 p1 bg-gray-light">margin 5 left</div>
<div class="ml6 p1 bg-gray-lightest">margin 6 left</div>
<div class="ml7 p1 bg-gray-light">margin 7 left</div>
<div class="ml8 p1 bg-gray-lightest">margin 8 left</div>
margin 0 right
margin 1 right
margin 2 right
margin 3 right
margin 4 right
margin 5 right
margin 6 right
margin 7 right
margin 8 right
<div class="mr0 p1 bg-gray-lightest">margin 0 right</div>
<div class="mr1 p1 bg-gray-light">margin 1 right</div>
<div class="mr2 p1 bg-gray-lightest">margin 2 right</div>
<div class="mr3 p1 bg-gray-light">margin 3 right</div>
<div class="mr4 p1 bg-gray-lightest">margin 4 right</div>
<div class="mr5 p1 bg-gray-light">margin 5 right</div>
<div class="mr6 p1 bg-gray-lightest">margin 6 right</div>
<div class="mr7 p1 bg-gray-light">margin 7 right</div>
<div class="mr8 p1 bg-gray-lightest">margin 8 right</div>
margin 0 top
margin 1 top
margin 2 top
margin 3 top
margin 4 top
margin 5 top
margin 6 top
margin 7 top
margin 8 top
<div class="mt0 p1 bg-gray-lightest">margin 0 top</div>
<div class="mt1 p1 bg-gray-light">margin 1 top</div>
<div class="mt2 p1 bg-gray-lightest">margin 2 top</div>
<div class="mt3 p1 bg-gray-light">margin 3 top</div>
<div class="mt4 p1 bg-gray-lightest">margin 4 top</div>
<div class="mt5 p1 bg-gray-light">margin 5 top</div>
<div class="mt6 p1 bg-gray-lightest">margin 6 top</div>
<div class="mt7 p1 bg-gray-light">margin 7 top</div>
<div class="mt8 p1 bg-gray-lightest">margin 8 top</div>
margin 0 bottom
margin 1 bottom
margin 2 bottom
margin 3 bottom
margin 4 bottom
margin 5 bottom
margin 6 bottom
margin 7 bottom
margin 8 bottom
<div class="mb0 p1 bg-gray-lightest">margin 0 bottom</div>
<div class="mb1 p1 bg-gray-light">margin 1 bottom</div>
<div class="mb2 p1 bg-gray-lightest">margin 2 bottom</div>
<div class="mb3 p1 bg-gray-light">margin 3 bottom</div>
<div class="mb4 p1 bg-gray-lightest">margin 4 bottom</div>
<div class="mb5 p1 bg-gray-light">margin 5 bottom</div>
<div class="mb6 p1 bg-gray-lightest">margin 6 bottom</div>
<div class="mb7 p1 bg-gray-light">margin 7 bottom</div>
<div class="mb8 p1 bg-gray-lightest">margin 8 bottom</div>
margin XS on all sides
margin SM on all sides
margin MD on all sides
margin LG on all sides
margin XL on all sides
<div class="m-xs p1 bg-gray-lightest">margin XS on all sides</div>
<div class="m-sm p1 bg-gray-lightest">margin SM on all sides</div>
<div class="m-md p1 bg-gray-lightest">margin MD on all sides</div>
<div class="m-lg p1 bg-gray-lightest">margin LG on all sides</div>
<div class="m-xl p1 bg-gray-lightest">margin XL on all sides</div>

Padding helpers

padding 1 on all sides
padding 2 on all sides
padding 3 on all sides
padding 4 on all sides
padding 5 on all sides
padding 6 on all sides
padding 7 on all sides
padding 8 on all sides
  <div class="p1 bg-gray-lightest">padding 1 on all sides</div>
  <div class="p2 bg-gray-light">padding 2 on all sides</div>
  <div class="p3 bg-gray-lightest">padding 3 on all sides</div>
  <div class="p4 bg-gray-light">padding 4 on all sides</div>
  <div class="p5 bg-gray-lightest">padding 5 on all sides</div>
  <div class="p6 bg-gray-light">padding 6 on all sides</div>
  <div class="p7 bg-gray-lightest">padding 7 on all sides</div>
  <div class="p8 bg-gray-light">padding 8 on all sides</div>
padding half y-axis
padding 1 y-axis
padding 2 y-axis
padding 3 y-axis
padding 4 y-axis
padding 5 y-axis
padding 6 y-axis
padding 7 y-axis
padding 8 y-axis
  <div class="pyhalf bg-gray-light">padding half y-axis</div>
  <div class="py1 bg-gray-lightest">padding 1 y-axis</div>
  <div class="py2 bg-gray-light">padding 2 y-axis</div>
  <div class="py3 bg-gray-lightest">padding 3 y-axis</div>
  <div class="py4 bg-gray-light">padding 4 y-axis</div>
  <div class="py5 bg-gray-lightest">padding 5 y-axis</div>
  <div class="py6 bg-gray-light">padding 6 y-axis</div>
  <div class="py7 bg-gray-lightest">padding 7 y-axis</div>
  <div class="py8 bg-gray-light">padding 8 y-axis</div>
padding half x-axis
padding 1 x-axis
padding 2 x-axis
padding 3 x-axis
padding 4 x-axis
padding 5 x-axis
padding 6 x-axis
padding 7 x-axis
padding 8 x-axis
  <div class="pxhalf bg-gray-light">padding half x-axis</div>
  <div class="px1 bg-gray-lightest">padding 1 x-axis</div>
  <div class="px2 bg-gray-light">padding 2 x-axis</div>
  <div class="px3 bg-gray-lightest">padding 3 x-axis</div>
  <div class="px4 bg-gray-light">padding 4 x-axis</div>
  <div class="px5 bg-gray-lightest">padding 5 x-axis</div>
  <div class="px6 bg-gray-light">padding 6 x-axis</div>
  <div class="px7 bg-gray-lightest">padding 7 x-axis</div>
  <div class="px8 bg-gray-light">padding 8 x-axis</div>

Position helpers

Position elements using micro classes for better control.

Absolutely positioned top left, z-index SM, margin XL
Absolutely positioned bottom right, margin LG
Absolutely positioned left, top, bottom
(to stretch from top to bottom)
Centered
  <div class="pos-rel full-width bg-gray-lightest" style="height: 500px;">
    <div class="pos-abs pos-l pos-t p1 m-xl bg-gray z-sm">
      Absolutely positioned top left, z-index SM, margin XL
    </div>
    <div class="pos-abs pos-b pos-r p1 m-lg bg-gray-light">
      Absolutely positioned bottom right, margin LG
    </div>
    <div class="pos-abs pos-t pos-l pos-b p1 py6 bg-gray-light">
      Absolutely positioned left, top, bottom
      <br />
      (to stretch from top to bottom)
    </div>
    <div class="pos-abs pos-center bg-gray-light p1">
      Centered
    </div>
  </div>

Utility helpers

Horizontal rule

  <hr />
Full width helper
Full width
<span class="full-width p1 bg-gray-light ib">Full width</span>
Centered margins for block elements
Centered
<div class="p1 bg-gray-light centered" style="width: 50%">Centered</div>
Clearfix & floats helpers

Clearfix: successfully clears floated child elements in a container

Float left
Float right
<div class="clearfix p1 bg-gray-lightest">
  <p>Clearfix: successfully clears floated child elements in a container</p>
  <div class="left p1 bg-gray-light">Float left</div>
  <div class="right p1 bg-gray-light">Float right</div>
</div>
Inline blocks and vertical alignment
inline block
vertical align top
vertical align middle
vertical align bottom
<div class="bg-gray p1">
  <div class="ib p1 bg-gray-light">inline block</div>
  <div class="ib px1 vertical-t bg-gray-light">vertical align top</div>
  <div class="ib px1 vertical-mid bg-gray-light">vertical align middle</div>
  <div class="ib px1 vertical-b bg-gray-light">vertical align bottom</div>
</div>

Responsive display

.hidden will hide element in all conditions.

.full-width-xs is a helper class that forces an element to be the full width of its parent at XS breakpoints. This is useful on mobile viewports to give more touch-area and consistent layout.

Responsive display classes:

hidden-xl hidden-lg hidden-ltlg hidden-md hidden-ltmd hidden-sm hidden-ltsm hidden-xs hidden-gtxs hidden-gtsm

These classes will hide content at defined breakpoints.

For example:

  <div class="hidden-xs">
    Something worth hiding
  </div>

This div will not show at XS breakpoint. This content still LOADS, however, so be cognizant of the load impact and use wisely.

3 hidden-ltlg
4 hidden-md
5 hidden-ltmd
7 hidden-ltsm
9 hidden-gtxs
10 hidden-gtsm
  <div class="hidden-xl   bg-gray-lightest">1 hidden-xl</div>
  <div class="hidden-lg   bg-gray-light">   2 hidden-lg</div>
  <div class="hidden-ltlg bg-gray-lightest">3 hidden-ltlg</div>
  <div class="hidden-md   bg-gray-light">   4 hidden-md</div>
  <div class="hidden-ltmd bg-gray-lightest">5 hidden-ltmd</div>
  <div class="hidden-sm   bg-gray-light">   6 hidden-sm</div>
  <div class="hidden-ltsm bg-gray-lightest">7 hidden-ltsm</div>
  <div class="hidden-xs   bg-gray-light">   8 hidden-xs</div>
  <div class="hidden-gtxs bg-gray-lightest">9 hidden-gtxs</div>
  <div class="hidden-gtsm bg-gray-light">   10 hidden-gtsm</div>