Style Guide

Font Styling

H1 Heading

H2 Heading

H3 Heading

H4 Heading

Big Title (38px)

Bigger Title (47px)

Biggest Title (67px)

Uppercase Text [class="caps"]

Underlined Text [class="underline"]

Text align left [class="text--left"]

Text align right [class="text--right"]

Text align center [class="text--center"]

Text that's bigger than normal size (16px) [class="text--big"]

Text that's bigger than normal size (18px) [class="text--bigger"]

Text that's smaller than normal size (12px) [class="text--small"]

Text that's smaller than normal size (10px) [class="text--smaller"]

Link / Button Styling

Normal Link

Primary Button [class="button button--primary"]

Secondary Button [class="button button--secondary"]

Tertiary Button [class="button button--tertiary"]

Full Width Button [class="button button--block"]

Rows

[class="row--black"]
[class="row--dark-gray"]
[class="row--light-gray"]
[class="row--breadcrumbs"]
[class="row--yellow"]
[class="row--white"]

Grid

See http://getbootstrap.com/css/#grid for explaination

Margins

.push { margin: 24px!important; }
.push--top { margin-top: 24px!important; }
.push--right { margin-right: 24px!important; }
.push--bottom { margin-bottom:24px!important; }
.push--left { margin-left: 24px!important; }
.push--ends { margin-top: 24px!important; margin-bottom:24px!important; }
.push--sides { margin-right: 24px!important; margin-left: 24px!important; }

.push-half { margin: 12px!important; }
.push-half--top { margin-top: 12px!important; }
.push-half--right { margin-right: 12px!important; }
.push-half--bottom { margin-bottom:12px!important; }
.push-half--left { margin-left: 12px!important; }
.push-half--ends { margin-top: 12px!important; margin-bottom:12px!important; }
.push-half--sides { margin-right: 12px!important; margin-left: 12px!important; }

.push-one-and-half { margin: 36px!important; }
.push-one-and-half--top { margin-top: 36px!important; }
.push-one-and-half--right { margin-right: 36px!important; }
.push-one-and-half--bottom { margin-bottom:36px!important; }
.push-one-and-half--left { margin-left: 36px!important; }
.push-one-and-half--ends { margin-top: 36px!important; margin-bottom:36px!important; }
.push-one-and-half--sides { margin-right: 36px!important; margin-left: 36px!important; }

.push-double { margin: 48px!important; }
.push-double--top { margin-top: 48px!important; }
.push-double--right { margin-right: 48px!important; }
.push-double--bottom { margin-bottom:48px!important; }
.push-double--left { margin-left: 48px!important; }
.push-double--ends { margin-top: 48px!important; margin-bottom:48px!important; }
.push-double--sides { margin-right: 48px!important; margin-left: 48px!important; }

.push-triple { margin: 72px!important; }
.push-triple--top { margin-top: 72px!important; }
.push-triple--right { margin-right: 72px!important; }
.push-triple--bottom { margin-bottom:72px!important; }
.push-triple--left { margin-left: 72px!important; }
.push-triple--ends { margin-top: 72px!important; margin-bottom:72px!important; }
.push-triple--sides { margin-right: 72px!important; margin-left: 72px!important; }

.flush { margin: 0!important; }
.flush--top { margin-top: 0!important; }
.flush--right { margin-right: 0!important; }
.flush--bottom { margin-bottom:0!important; }
.flush--left { margin-left: 0!important; }
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
.flush--sides { margin-right: 0!important; margin-left: 0!important; }

Padding

.soft { padding: 24px!important; }
.soft--top { padding-top: 24px!important; }
.soft--right { padding-right: 24px!important; }
.soft--bottom { padding-bottom:24px!important; }
.soft--left { padding-left: 24px!important; }
.soft--ends { padding-top: 24px!important; padding-bottom:24px!important; }
.soft--sides { padding-right: 24px!important; padding-left: 24px!important; }

.soft-half { padding: 12px!important; }
.soft-half--top { padding-top: 12px!important; }
.soft-half--right { padding-right: 12px!important; }
.soft-half--bottom { padding-bottom:12px!important; }
.soft-half--left { padding-left: 12px!important; }
.soft-half--ends { padding-top: 12px!important; padding-bottom:12px!important; }
.soft-half--sides { padding-right: 12px!important; padding-left: 12px!important; }

.soft-one-and-half { padding: 36px!important; }
.soft-one-and-half--top { padding-top: 36px!important; }
.soft-one-and-half--right { padding-right: 36px!important; }
.soft-one-and-half--bottom { padding-bottom:36px!important; }
.soft-one-and-half--left { padding-left: 36px!important; }
.soft-one-and-half--ends { padding-top: 36px!important; padding-bottom:36px!important; }
.soft-one-and-half--sides { padding-right: 36px!important; padding-left: 36px!important; }

.soft-double { padding: 48px!important; }
.soft-double--top { padding-top: 48px!important; }
.soft-double--right { padding-right: 48px!important; }
.soft-double--bottom { padding-bottom:48px!important; }
.soft-double--left { padding-left: 48px!important; }
.soft-double--ends { padding-top: 48px!important; padding-bottom:48px!important; }
.soft-double--sides { padding-right: 48px!important; padding-left: 48px!important; }

.soft-triple { padding: 72px!important; }
.soft-triple--top { padding-top: 72px!important; }
.soft-triple--right { padding-right: 72px!important; }
.soft-triple--bottom { padding-bottom:72px!important; }
.soft-triple--left { padding-left: 72px!important; }
.soft-triple--ends { padding-top: 72px!important; padding-bottom:72px!important; }
.soft-triple--sides { padding-right: 72px!important; padding-left: 72px!important; }

.hard { padding: 0!important; }
.hard--top { padding-top: 0!important; }
.hard--right { padding-right: 0!important; }
.hard--bottom { padding-bottom:0!important; }
.hard--left { padding-left: 0!important; }
.hard--ends { padding-top: 0!important; padding-bottom:0!important; }
.hard--sides { padding-right: 0!important; padding-left: 0!important; }

Responsive Classes

Add these classes to elements you only want to show on certain sizes:

  • .show--medium-desktop (1200px down)
  • .show--small-desktop (992px down)
  • .show--tablet (768px down)
  • .show--mobile (600px down)

Scale screen to see example below:

Show only on medium desktops
Show only on small desktops
Show only on tablets
Show only on mobile

Content Blocks

CTA Block

Featured Equipment Block

Page Menu

Product Item Card

Name

Term
Data
Term
Data
Term
Data

Dial Your Nearest Location:

800-845-9188
Fabick MO & IL
414-461-9100
Fabick WI & MI
View All Locations