Use this page as a guide to available styles on the site and also to verify any CSS changes.


Colors

Use the palette of specific colors listed here for consistency

Branding

$jm-pink-dust

Grayscale

$gray-dark
$gray-light
$gray-lighter

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Text Utilities

We have utility classes to help simplify text styling

I am text with class 'quiet'

I am text with class 'small'

I am text with the class 'smaller'

I am text with class 'mark'

I am text with the class 'text-left'

I am text with the class 'text-right'

I am text with the class 'text-center'

I am text with the class 'text-justify'

I am text with the class 'text-nowrap'

I am text with the class 'text-lowercase'

I am text with the class 'text-uppercase'

I am text with the class 'text-capitalize'

I am text with the class 'text-primary'

We also have utility mixins with eponymous classes to consistently style text

I am text with the class 'small-uc'

Additional Base Elements

Use the <hr> element to place a divider between pieces of content


Use the <hr> element with an additional .thick class to create a divider with more vertical spacing


Paragraphs

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A lead, or lede paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. Often called the lead, it usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story.

Buttons

Use the button classes on an <a>, or <button> element. There are three types of buttons .btn, .btn-primary, .btn-secondary. All buttons have class btn, primary and secondary button classes must be added as modifiers.

Block Buttons

Create block level buttons by adding the class .btn-block.

Button Sizes

Add .btn-lg or .btn-sm for additional sizes.

Disabled State

Add the disabled attribute to <button> buttons.

Anchor Elements

Add the .disabled class to <a> buttons.

Default Button Primary Button

Link buttons

Conversely, add the btn-link class to <button> elements to make them look like links. Use where a button is required (form submit) or it is more semantically correct.

Hover Effect

Any buttons containing <i> elements will have a hover effect applied to the last child <i> element. Remove this effect by adding the class .no-animation to the button.

I have an icon with a hover effect

I have an icon with the hover effect removed

Forms

Forms require specific markup for correct styling. All inputs need a form-control class.

Forgot Your Password?

Vertical Form Wrapper

Use a parent div with class .vform-wrap to give simple forms a tight fixed width and center block alignment. Useful for account forms.

Tables

The standard table in use on the site. Simply add .table to your table to get the styling below.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
I'm a table footer row Here's some more info How about them apples pretty slick?
I'm another table footer row Put important info in here To make sure people understand the info Contained inside the table

Pagination

Provide pagination links for the pages of the site containing paginated content..

page:

Rich Text Editor

Wrap rich text editor content in a div with class rte to apply standard formatting. Affects p, ol, ul, and .note elements

I'm a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. OL item 1
  2. OL item 2
  • UL item 1
  • UL item 2
I'm a note!

Icons

We are using the font awesome icon set on the site. To keep the stylesheet as light as possible, all icons are commented out by default (see /_scss/font-awesome/_icons.scss ), uncomment them as you need. All icons must have the base class fa and a modifier class. Icons are shown below with their modifier classes

  • - .fa-angle-double-left
  • - .fa-angle-double-right
  • - .fa-angle-double-up
  • - .fa-angle-double-down
  • - .fa-angle-left
  • - .fa-angle-right
  • - .fa-angle-up
  • - .fa-angle-down
  • - .fa-long-arrow-down
  • - .fa-long-arrow-up
  • - .fa-long-arrow-left
  • - .fa-long-arrow-right
  • - .fa-remove, .fa-close, .fa-times
  • - .fa-bars
  • - .fa-heart
  • - .fa-heart-o
  • - .fa-plus
  • - .fa-shopping-cart
  • - .fa-search
  • - .fa-twitter-square
  • - .fa-facebook
  • - .fa-facebook-f
  • - .fa-facebook-square
  • - .fa-pinterest
  • - .fa-pinterest-square
  • - .fa-envelope-o
  • - .fa-envelope
  • - .fa-play

Page Elements

Re-usable elements to keep styling consistent across all pages

Page Header

Use the page header component to title all pages. Use an h1 tag or other header if more appropriate.

Add the modifier class .page-header--underlined to get more bottom padding and an underline.

Secondary Header

Use the secondary header component to title subsections of pages, see search.liquid or related-products.liquid. Use an h5 tag or other header if more appropriate.

Here's a secondary header

Sidebar Blocks

Use sidebar blocks and their child elements to format items.

Modals

Modals are dialog prompts to focus user attention. The default modal is solid white with a slightly transparent dark grey background for the modal dialog to sit on top of.

Use the .modal--filter modifier class to create a skinnier modal for containing lists of filtering links.

Use the .modal--full-bleed modifier class to create a modal without padding, background, or borders. Useful primarily for embedding videos.

Options

Default options are provided by bootstrap. See the full list here - getbootstrap.com/javascript/#modals-options.

In addition, adding the data attribute data-background="white" will render a solid white background for the modal dialog to sit on top of.