Starbucks React Pattern Library

Introduction

Our grid system has three components:

Size - Presentational classes for setting element widths
Offset - Presentational classes for setting the offset of the element from the left edge
Grid - Container class for grid items
Grid Item - Individual units in the grid system

These classes are used together to create grid layouts:

Item One

Item Two

Item Three

<div className='grid grid--compactGutter'>
  <div className="gridItem md-size5of12">
    <div className="p3 bg-cream">Item One</div>
  </div>
  <div className="gridItem size6of12 md-offset1of12 md-size3of12">
    <div className="p3 bg-cream">Item Two</div>
  </div>
  <div className="gridItem size6of12 md-size3of12">
    <div className="p3 bg-cream">Item Three</div>
  </div>
</div>

Size

A group of presentational classes for setting element sizes, particularly useful in conjunction with the grid system.

A single presentational class is available for height: height-100. This class is useful in supporting device-height layouts when needed.

The size classes support two scales, (n) of 5 and (n) of 12, as well as an auto value, meaning that the following sizes are possible:

size1of12
size2of12
size3of12
size4of12
size5of12
size6of12
size7of12
size8of12
size9of12
size10of12
size11of12
size12of12

size1of5
size2of5
size3of5
size4of5
size5of5

size-auto

Media Queries

Use breakpoint prefixes to achieve different sizes at our standard breakpoints.

sm- = (width >= 480px)
md- = (width >= 768px)
lg- = (width >= 1024px)
xl- = (width >= 1280px)
xxl- = (width >= 1600px)

className='size12of12 sm-size6of12 md-size4of12 lg-size3of12'

.size1of12

.size2of12

.size3of12

.size4of12

.size5of12

.size6of12

.size7of12

.size8of12

.size9of12

.size10of12

.size11of12

.size12of12

.size1of5

.size2of5

.size3of5

.size4of5

.size5of5

.size-auto

Offset

A group of presentational classes for setting element offsets, particularly useful in conjunction with the grid system.

The offset classes support two scales, (n) of 5 and (n) of 12. However, you cannot have 100%, (n) of (n), offset, as this would result in rendering items off the screen, meaning that the following offsets are possible:

offset1of12
offset2of12
offset3of12
offset4of12
offset5of12
offset6of12
offset7of12
offset8of12
offset9of12
offset10of12
offset11of12

offset1of5
offset2of5
offset3of5
offset4of5

Media Queries

Use breakpoint prefixes to achieve different offsets at our standard breakpoints.

sm- = (width >= 480px)
md- = (width >= 768px)
lg- = (width >= 1024px)
xl- = (width >= 1280px)
xxl- = (width >= 1600px)

className='offset11of12 sm-offset6of12 md-offset4of12 lg-offset3of12'

.offset1of12

.offset2of12

.offset3of12

.offset4of12

.offset5of12

.offset6of12

.offset7of12

.offset8of12

.offset9of12

.offset10of12

.offset11of12

.offset1of5

.offset2of5

.offset3of5

.offset4of5

Grid

The grid class is used to create a container for grid items. Through several modifier classes, it controls gutters and horizontal and vertical alignment of grid items.

Apply modifier classes alongside the base grid class for different behavior:

<div className='grid'></div>
<div className='grid grid--compactGutter'></div>
<div className='grid grid--mediumGutter'></div>
<div className='grid grid--wideGutter'></div>
<div className='grid grid--alignLeft'></div>
<div className='grid grid--alignCenter'></div>
<div className='grid grid--alignRight'></div>
<div className='grid grid--valignTop'></div>
<div className='grid grid--valignMiddle'></div>
<div className='grid grid--valignBottom'></div>

Base

.grid--compactGutter

.grid--mediumGutter

.grid--wideGutter

.grid--alignLeft

.grid--alignCenter

.grid--alignRight

.grid--valignTop

.grid--valignMiddle

.grid--valignBottom

Grid Item

The gridItem class is required to wrap grid item content. It provides an interface for the .grid class to manage spacing and alignment, as well as some default styles.

The size classes should be used on gridItem elements to set column widths:

<div className='grid'>
  <div className='gridItem size6of12'>
    Grid Item 1
  </div>

  <div className='gridItem size6of12'>
    Grid Item 2
  </div>
</div>