Overview
The grid uses bootstrap's grid classes. Below is an example of the grid. Above, you will see the HTML markup and you will see below how it is rendered. A .container or .container-fluid (100% viewport width) class is required on the outer element that wraps the grid. A .row class is required to wrap columns, which use the class .col or .col-*. For a full understanding of the Bootstrap grid system, please refer to the Bootstrap Grid documentation.
The grid is a 12-column grid across which content can be displayed.
In combination with the grid, developers will have the full use of Bootstrap Utilities for Layout (for example, see the centered column in the last row which uses flexbox layout utility classes .d-flex and .justify-content-center).
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<div class="row">
<div class="col-4">Column</div>
<div class="col-5">Column</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-6">Column</div>
</div>
</div>
Grid & Breakpoints
Breakpoint Reference Doc
All Brands
Grid Settings
|
Extra small
<576px
|
Small
≥760px
|
Medium
≥1023px
|
Large
≥1476px
|
Extra large
≥1814px
|
| Max container width |
None (auto) |
None (auto) |
None (auto) |
None (auto) |
1848px |
| Class prefix |
.col-
.col-xs-
see usage guidelines |
.col-
.col-sm-
see usage guidelines |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns |
12 |
| Gutter width |
24px (12px on each side of a column) |
| Nestable |
Yes |
| Column ordering |
Yes |
XS/SM Usage Guidelines
Avoid setting XS or SM classes.
This includes both grid (ex.
.col-xs,
.col-sm) and utility classes (ex.
.d-xs,
.d-sm).
In nearly all instances the XS and SM breakpoints are intended to be visually and functionally identical.
If there is a need to target either of these breakpoints specifically an exception should be requested from the design team.
To achieve this, develop with a general Bootstrap mobile-first class, then override as needed for MD, LG, and XL breakpoints.
DO
- Do apply a general
.col- class.
<div class="col-6 col-md-4 col-lg-3"></div>
DON'T
- Don't apply specific
.col-xs or .col-sm classes.
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3"></div>
PLP Reference
12 Column Grid & Breakpoints
Screenshots below are meant to highlight the grid and layout usage for the new PLP & Search Results grid.
Usage
To bring consistency to the user experience, as well as reduce font calls to improve site performance, we are leveraging a universal font style for all brands. Body, navigation and other universal elements will all use Helvetica Neue (Neue Helvetica W05). HTML heading tags will utilize brand specific fonts. Heading tags for all brands will utilize the same font size and placement on a page. Display tags should be used for homepage creative and other marketing areas throughout the site. The brand design teams have more freedom in regard to font size and usage with Display tags. Brands should follow the existing process with the content development team.
Brand Specific Fonts
Each brand has a maximum of 6 font choices to choose from. If a brand is using all 6 font choices, and desires to add another font, they must remove one before adding the new font. Fonts are added through Monotype. We utilize web projects and add the call into the css. Developers must be familiar with the process to add and remove fonts which is documented here.
|
|
Name
|
Weight
|
Style
|
Utility Class
|
| 1 |
"Oswald"
|
300 |
normal |
.brand-font-1 |
| 2 |
"Oswald"
|
400 |
normal |
.brand-font-2 |
| 3 |
"Oswald"
|
700 |
normal |
.brand-font-3 |
| 4 |
"Hurricane"
|
400 |
normal |
.brand-font-4 |
| 5 |
"Inter Tight"
(Default Universal Font)
|
400 |
normal |
.brand-font-5 |
| 6 |
"Inter Tight"
(Default Universal Font)
|
400 |
normal |
.brand-font-6 |
Universal Brand Fonts (Default)
|
|
Name
|
Weight
|
Style
|
Utility Class
|
| 1 |
"Inter Tight" |
400 |
normal |
.brand-font-0 |
| 4 |
"Inter Tight" |
400 |
italic |
- |
| 2 |
"Inter Tight" |
500 |
normal |
- |
| 3 |
"Inter Tight" |
700 |
normal |
- |
Primary Brand Fonts
|
|
Name
|
Utility Class
|
| 1 |
"Oswald" |
.brand-font-primary |
| 2 |
"Oswald" |
.brand-font-primary-bold |
Standard HTML anchor, link texts are generally used to navigate within or to an outside website.
To visually show/represent an anchor tag (or link tag) like a button element, add relevant .btn classes from "Component Library" > "Buttons" section for button elements onto an anchor tag.
Inversely, to show/represent a button tag like a regular "Link Text", add the .btn-anchor class in addition to the .btn-link implementation of a button element. This implementation is exemplified in the "Component Library" > "Buttons" section
<a href="#link-text">Link Text</a>
Used for homepage creative and other marketing areas throughout the site. The brand design teams have more freedom in regard to font size and usage with Display tags. Brands should follow the existing process with the content development team.
.display-1
Desktop Offer
Mobile Offer
.display-2
Desktop Headline
Mobile Headline
.display-3
Desktop Subhead
Mobile Subhead
.display-4
Desktop Eyebrow
Mobile Eyebrow