Skip to content

Responsive breakpoints

Gusto uses industry standard values to adapt our UI to viewports of different widths.

Breakpoint values used throughout Workbench
NameWith in PXWith in EMExample device
base00Smartphones
sm60037.5Large smartphones, small tablets
md102464Tablets
lg144090Small screens (e.g. MacBook 15″)
xl1920120Larger laptops and external monitors
Illustration of the different breakpoints
  • We encourage mobile-first design by using sm as our base breakpoint value. It is generally far easier to grow the UI from a condensed view to a more expansive format.
  • We use the min-width feature to jump from one breakpoint to another.
  • The values are expressed in em values and are based on the default browser text size of 16px. We generally favor rem units, but this is one of the few places where we use em.
  • These values are common across Workbench and the Component Library, though their usage differs.
  • These breakpoints are built into the Box component (details below).
  • We do not have breakpoint values for heights.

Workbench exports a workbench-scss package that contains Sass variables and mixins that expose our tokens and common utilities. It is built using Sass modules and should be imported with the use directive and we suggest using the workbench namespace for clarity.

First, import the Workbench Sass library:
@use "[email protected]/workbench-scss" as workbench;
Use the mixin like so:
.someElement {
color: black;
@include workbench.breakpoint('md') {
color: hotpink;
};
}

There are a couple of methods of working with our breakpoints within React.

Workbench exports the useBreakpoint utility that is used internally for conditionally rendering markup based on the size of the viewport.

Learn more about useBreakpoint »

The Box component can accept a large variety of props, some of which are tagged as a “responsive property”. Each of these responsive properties contains a corresponding set of props for each breakpoint. You may set as many or as few of the responsive props as you need.

This functionality is also available in Grid and Flex.

For example, using the width prop:

<Box width={40} widthSm={60} widthXl={80}>
My width will change based on the width of the viewport
</Box>
  • width: Sets the base width (viewports narrower than 600px)
  • widthSm: Sets the width on breakpoint sm and above
  • widthMd: Sets the width on breakpoint md and above
  • widthLg: Sets the width on breakpoint lg and above
  • widthXl: Sets the width on breakpoint xl and above