Breakpoints
Search the component library

Breakpoints

v1.0.1

This component defines the standard breakpoints to use for responsive design.

Usage Guidelines

Anytime you want to change a design based on the viewport width (i.e. use a media query) use the predefined widths provided by this component.

Features

  • Consistent set of breakpoints
  • Sizes for phones, small and large tablets, and desktop devices

Dependencies

None

Widths

The available sizes include:

  • Extra small
  • Small
  • Medium
  • Large
  • Extra large

Common Devices

For reference, here are the breakpoints that correspond to common devices.

Exported Styles

Changelog

1.0.1

  • ADDED: Added sketch file featuring art boards with grid layout setup for easier consumption.

1.0.0

Initial version