Style Guide Documentation

About

This is meant to be a living style guide of main styles and patterns on BrooksRunning.com

Adding To This Guide

Each section of this style guide is it's own isml template and pulls styling from the int_styleguide cartridges as well as global styling from the brooks_storefront cartridge. The custom styling for the style guide lives in the stylesheet styleguide.scss.

Resources:

Accessibility: WCAG 2.0 at a Glance

There are currently three levels of compliance for WCAG 2.0; A, AA, and AAA. At Brooks, we should be hitting all of the A level requirements and should look to be compliant with the AA level standards as well; at a minimum with new features and pages

WC3 guide for meeting standards: How to meet WCAG 2.0

Testing Resources:

The following is a high level overview of the accessibility guiding standards Brooks should be meeting:

Perceivable

  • Provide text alternatives for non-text content.
  • Provide captions and alternatives for audio and video content.
  • Make content adaptable; and make it available to assistive technologies.
  • Use sufficient contrast to make things easy to see and hear.

Operable

  • Make all functionality keyboard accessible.
  • Give users enough time to read and use content.
  • Do not use content that causes seizures.
  • Help users navigate and find content.

Understandable

  • Make text readable and understandable.
  • Make content appear and operate in predictable ways.
  • Help users avoid and correct mistakes.

Robust

  • Maximize compatibility with current and future technologies.

Brand Colors

Primary Colors

Sass: $brooks-blue HEX: #1678bd RGB: 22,120,189 Text Class: .blue Bkgd Class: .blue-bkgd Sass: $dark-grey HEX: #6d665f RGB: 109,102,95 Text Class: .dark-grey Bkgd Class: .dark-grey-bkgd Sass: $light-grey HEX: #b8b3ad RGB: 184,179,173 Text Class: .light-grey Bkgd Class: .light-grey-bkgd Sass: $orange HEX: #ff4612 RGB: 255,70,18 Text Class: .orange Bkgd Class: .orange-bkgd

Secondary Colors

Sass: $dark-blue HEX: #002856 RGB: 0,40,86 Text Class: .dark-blue Bkgd Class: .dark-blue-bkgd Sass: $light-blue HEX: #00b3e3 RGB: 0,179,227 Text Class: .light-blue Bkgd Class: .light-blue-bkgd Sass: $aqua HEX: #3fbfad RGB: 63,191,173 Text Class: .aqua Bkgd Class: .aqua-bkgd Sass: $off-white HEX: #ebebeb RGB: 235,235,235 Text Class: .off-white Bkgd Class: .off-white-bkgd Sass: $yellow HEX: #f7d93e RGB: 255,204,51 Text Class: .yellow Bkgd Class: .yellow-bkgd

Run Signature Colors

RS Blue
Sass: $rs-blue HEX: #008eda RGB: 0,142,218 Text Class: .rs-blue Bkgd Class: .rs-blue-bkgd
Cushion Gradient
Sass mixin: @include gradient-horz($rs-cushion-color, #00bce7) Class: .rs-cushion-color-grad
Cushion
Sass: $rs-cushion-color HEX: #007bb6 RGB: 0,123,182 Text Class: .rs-cushion-color Bkgd Class: .rs-cushion-color-bkgd
Energize Gradient
Sass mixin: @include gradient-horz($rs-energize-color, #00bce7) Class: .rs-energize-color-grad
Energize
Sass: $rs-energize-color HEX: #00927c RGB: 0,146,124 Text Class: .rs-energize-color Bkgd Class: .rs-energize-color-bkgd
Connect Gradient
Sass mixin: @include gradient-horz($rs-connect-color, #00bce7) Class: .rs-connect-color-grad
Connect
Sass: $rs-connect-color HEX: #f58220 RGB: 245,130,32 Text Class: .rs-connect-color Bkgd Class: .rs-connect-color-bkgd
Speed Gradient
Sass mixin: @include gradient-horz($rs-speed-color, #00bce7) Class: .rs-speed-color-grad
Speed
Sass: $rs-speed-color HEX: #a02816 RGB: 160,40,22 Text Class: .rs-speed-color Bkgd Class: .rs-speed-color-bkgd

Grid

The Brooks standard grid is 12 columns at 1020px wide with 2rem gutter. The grid can also be used at 100% width of the page if needed.

To create a grid, you must use a .grid class on the parent container. To contain the grid to 1020px, also use the class .grid-container

To remove gutters use the following classes (this is generally for each column/unit):

  • .no-gutters = no gutters on all sides (must be with .columns class)
  • .no-left = no left gutter
  • .no-right = no right gutter
  • .no-left-right = no left/right gutter
  • .no-bottom = no bottom gutter (for lp template)

To add gutters use the following classes (this is generally for the row):

  • .add-top = top margin 2rem
  • .add-bottom = bottom margin 2rem
  • .add-top-bottom = top & bottom margin 2rem
  • .add-left = left margin 2rem
  • .add-right = right margin 2rem
  • .add-left-right = left & right margin 2rem

To add inner gutters use the following classes (this is generally for the item content):

  • .add-inner = 1rem padding to all sides
  • .add-top-inner = top padding 1rem
  • .add-bottom-inner = bottom padding 1rem
  • .add-top-bottom-inner = top & bottom padding 1rem
  • .add-left-inner = left padding 1rem
  • .add-right-inner = right padding 1rem
  • .add-left-right-inner = left & right padding 1rem

Other helper classes:

  • .white-border = border/gutter color from transparent to white
  • .align-center = text align center
  • .align-left = text align left
  • .align-right = text align right
  • .pull-left = float left
  • .pull-right = float right
  • .full-width = 100% width
.twelve.columns
.six.columns
.six.columns
.four.columns
.four.columns
.four.columns
.eight.columns
.four.columns
.three.columns
.three.columns
.three.columns
.three.columns
.nine.columns
.three.columns

Typography

Font Sizing

The base font size for the site is 14px = 1rem with a default line height of 1.5 for paragraphs. All sizing is in rems, with a px fallback

For example, converting a 16px font to rems would be: 16px/14px = 1.14286rem (rounded five decimals).

If developing with Sass, you can use the rem mixin that will calculate rems/px for you automatically. This allows you to use whichever unit of measurement you prefer, but outputs consistent css.

Mixin example:

input: h1 { @import rem(font-size, 16px); } output: h1 { font-size: 16px; font-size: 1.14286rem; } input: h1 { @import rem(font-size, 1.5rem); } output: h1 { font-size: 21px; font-size: 1.5rem; }

Brand Fonts

Quick use brand fonts
Brand Font Regular
SASS: $brand-font-regular class: .brand-font-regular font stack: "NeoSansStd-Regular", "Helvetica", Arial, sans-serif;
Brand Font Bold
SASS: $brand-font-bold class: .brand-font-bold font stack: "NeoSansStd-Bold", "Helvetica", Arial, sans-serif;
Copy Font
SASS: $copy-font class: .copy-font font stack: "HelveticaNeue", "Helvetica", Arial, sans-serif;
Brand Font Decorative
SASS: $brand-font-decorative class: .brand-font-decorative font stack: "HappyFeet-Regular", "Helvetica", Arial, sans-serif;
Neo Sans (Headings, Display Type, CTAs)
Neo Sans Regular
SASS: $neo-sans-regular class: .neo-sans-regular font stack: "NeoSansStd-Regular", "Helvetica", Arial, sans-serif;
Neo Sans Medium
SASS: $neo-sans-medium class: .neo-sans-medium font stack: "NeoSansStd-Medium", "Helvetica", Arial, sans-serif;
Neo Sans Black Italic
SASS: $neo-sans-black-italic class: .neo-sans-black-italic font stack: "NeoSansStd-BlackItalic", "Helvetica", Arial, sans-serif;
Neo Sans Bold
SASS: $neo-sans-bold class: .neo-sans-bold font stack: "NeoSansStd-Bold", "Helvetica", Arial, sans-serif;
Neo Sans Ultra
SASS: $neo-sans-ultra class: .neo-sans-ultra font stack: "NeoSansStd-Ultra", "Helvetica", Arial, sans-serif;
Happy Feet (Display Type)

***Should not be used at sizes under 3rem/42px***

Happy Feet Regular
SASS: $happy-feet-regular class: .happy-feet-regular font stack: "HappyFeet-Regular", "Helvetica", Arial, sans-serif;
Happy Feet Light
SASS: $happy-feet-light class: .happy-feet-light font stack: "HappyFeet-Light", "Helvetica", Arial, sans-serif;
Happy Feet Bold
SASS: $happy-feet-bold class: .happy-feet-bold font stack: "HappyFeet-Bold", "Helvetica", Arial, sans-serif;
Happy Feet Outline
SASS: $happy-feet-outline class: .happy-feet-outline font stack: "HappyFeet-Outline", "Helvetica", Arial, sans-serif;
Helvetica Neue (Copy)
Helvetica Neue
SASS: $helvetica-neue class: .helvetica-neue font stack: "HelveticaNeue", "Helvetica", Arial, sans-serif;

Headings

Heading 1

font size: 26px / 1.85714rem
font stack: "NeoSansStd-Medium", "Helvetica", Arial, sans-serif;

Heading 2

font size: 22px / 1.57143rem
font stack: "NeoSansStd-Medium", "Helvetica", Arial, sans-serif;

Heading 3

font size: 18px / 1.28571rem
font stack: "NeoSansStd-Medium", "Helvetica", Arial, sans-serif;

Heading 4

font size: 16px / 1.14286rem
font stack: "NeoSansStd-Medium", "Helvetica", Arial, sans-serif;
Heading 5
font size: 14px / 1rem
font stack: "NeoSansStd-Medium", "Helvetica", Arial, sans-serif;
Heading 6
font size: 14px / 1rem
font stack: "NeoSansStd-Medium", "Helvetica", Arial, sans-serif;

Copy text

Tiny text - for captions, *text, etc.
class: .tiny-text
font size: 10px / 0.71429rem

Buttons, CTAs, Links





Button class

Blue cta

Popup cta

Normal link

Icons

Social Icons

The social icons are an svg font and files can be found in the webfonts folder with the name "socicon". This font is based on the font provided by socicon.com and more documentation can be found at http://www.socicon.com/how.php

Usage:

Add class .socicon-circle to the anchor element for the circle/button version. If using the circle/button version a bkgd color needs to be designated.

Facebook
Class: socicon-facebook Icon: Circle/Button:
Instagram
Class: socicon-instagram Icon: Circle/Button:
Pinterest
Class: socicon-pinterest Icon: Circle/Button:
Snapchat
Class: socicon-snapchat Icon: Circle/Button:
Twitter
Class: socicon-twitter Icon: Circle/Button:
YouTube
Class: socicon-youtube Icon: Circle/Button:

Run Signature Icons

The RS icons are an svg font and files can be found in the webfonts folder with the name "rs-icons". This font was created using https://icomoon.io

Usage:

The Run Signature icons can go before or after your element. To use the icon, you will need two classes. The class that designates where the icon appears is: icon-rs-[before/after]. Then you need a class to designate which icon: icon-[category]. You can designate the Run Signature color as well, using the RS color class: rs-[category]-color

Connect
Class: icon-connect Icon: Example before: Connect Example after: Connect
Cushion
Class: icon-cushion Icon: Example before: Cushion Example after: Cushion
Energize
Class: icon-energize Icon: Example before: Energize Example after: Energize
Speed
Class: icon-speed Icon: Example before: Speed Example after: Speed

BR.COM Icons

The BR icons are an svg font and files can be found in the webfonts folder with the name "br-icons-0117". This font was created using https://icomoon.io

Usage:

The BR.com icons can go before or after your element. To use the icon, you will need two classes. The class that designates where the icon appears is: icon-br-[before/after]. Then you need a class to designate which icon: icon-[category].

Account Outlined
Class: icon-account-outlined Icon: Example before: Example after:
Account Solid
Class: icon-account-solid Icon: Example before: Example after:
Call Outlined
Class: icon-call-outlined Icon: Example before: Account Example after: Account
Call Solid
Class: icon-call-solid Icon: Example before: Account Example after: Account
Chat Outlined
Class: icon-chat-outlined Icon: Example before: Account Example after: Account
Chat Solid
Class: icon-chat-solid Icon: Example before: Account Example after: Account
Email Outlined
Class: icon-email-outlined Icon: Example before: Account Example after: Account
Email Solid
Class: icon-email-solid Icon: Example before: Account Example after: Account
Help Outlined
Class: icon-help-outlined Icon: Example before: Account Example after: Account
Help Solid
Class: icon-help-solid Icon: Example before: Account Example after: Account
Location
Class: icon-location Icon: Example before: Account Example after: Account
Mobile Nav
Class: icon-mobile-nav Icon: Example before: Account Example after: Account
Search
Class: icon-search Icon: Example before: Account Example after: Account
Shopping Cart Outlined
Class: icon-shopping-cart-outlined Icon: Example before: Account Example after: Account
Shopping Cart Solid
Class: icon-shopping-cart-solid Icon: Example before: Account Example after: Account
TBG Outlined
Class: icon-tbg-outlined Icon: Example before: Account Example after: Account
TBG Solid
Class: icon-tbg-solid Icon: Example before: Account Example after: Account
Brooks 5 Stars
Class: icon-brooks-stars-five Icon: Example before: Account Example after: Account

Typographic Icons

Checkmark (before)
Class: icon-checked-before Icon: Example: Here's a check before
Checkmark (after)
Class: icon-checked-after Icon: Example: Here's a check after

Images

Category Banners

Banners are full width and cropped (background-position) with smaller screens. Background is centered cropped by default, but can be designated left or right crop if needed. A custom crop can also be designated, but it is not recommended.

Banner Specs
Category Banner with text (usually super category)
Dimensions: 1400px x 200px (file size <= 100kb) Header title: H1 styling Sub title: H4 styling Copy: paragraph styling
Category banner without text (usually sub-category)
Dimensions: 1400px x 100px (file size <= 100kb)
Super Category Banner
Sub-Category Banner