Colors

Use the palette of specific colors listed here for consistency

Branding

Grayscale

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

Links

Links are normally Jen Meyer pink however, there are helper classes you can use for styling contextual links.

Text Utilities

We have utility classes to help simplify text styling

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

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.

Default Button Primary Button Pink Transparent Button

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.

Default Button Primary Button

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.

I'm a button that looks like a link

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.

Primary Button

I have an icon with a hover effect

Primary Button

I have an icon with the hover effect removed

Forms

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

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.

Pagination

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

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

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

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.

Launch Modal

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

Launch Filter Modal

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

Launch Full Bleed Modal

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.