Breakpoints

We design for small screens by default, but adapt our UIs for larger viewports. For example, the "default" breakpoint is for all screen sizes; any other breakpoint is used to specify a change that should happen at that breakpoint or larger.

Our breakpoints are based on screen widths where our content starts to break.

Usage

When using a component build on styled-system, we can hook direclty into the theme for breakpoint values. Changes in style across breakpoints are written as object values, with an unedfined alias defining the base, non-responsive value.

<Box px={{ _: 2, sm: 4 }} py={{ _: 4, sm: 8 }}>
  Look I am in a padded Box!
</Box>

When using a component, or creating a separate style, that does not utilize styled system, one can simply use the theme variables in their styling.

const StyledBox = styled.div`
  display: flex;
  flex-direction: column;

  @media (min-width: ${(props) => props.theme.breakpoints.sm}) {
    flex-direction: row;
  }
`