Responsive

All UI kit components may pass a mediaQueries prop that describes props at different breakpoints.

For instance, to model a common layout from a vertical stack on small screens to a horizontal stack on larger screens we can use the mediaQueries prop and access our queries defined in our ThemeProvider.

In the following example we’ll use the default breakpoints:

const Cell = (props) => (
  <Box
    padding={1}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <StackView
    alignment="center"
    spacing={2}
    mediaQueries={{
      lg: {
        axis: 'horizontal',
        spacing: 6,
      },
    }}
  >
    <Cell>Cell 1</Cell>
    <Cell>Cell 2</Cell>
    <Cell>Cell 3</Cell>
  </StackView>
)

We add our default props as normal and as our screen becomes larger we stack each cell horizontally. We also increase the spacing between each child since we have more room.

All style props may be passed as a responsive prop as well as any layout component props.

By default UI kit ships with named xs-xl breakpoints inspired by Material Design.

const theme = {
  breakpoints: {
    xs: 480,
    sm: 600,
    md: 720,
    lg: 960,
    xl: 1200,
  },
}

Pass common used breakpoints and media queries to your ThemeProvider and access them in the mediaQueries prop.

When using a numeric value all breakpoints will use a min-width media query. This encourages mobile-first design.

const breakpoints = {
  sm: 300,
  md: 600,
  lg: 900,
}

You can also pass a string that resolves to a valid media query.

const breakpoints = {
  phone: '@media (max-width: 480px)',
  tablet: '@media (min-width: 481px) and (max-width: 720px)',
  desktop: '@media (min-width: 721px) and (max-width: 960px)',
}