Responsive Props

One of the core features of Palette is it's use of responsive props (or array props). This unique feature was first introduced by styled-system, the underlying library we use for much of Palette's functionality, and allows devs to write fully responsive components by expanding normal react props into an array, with each slot representing a breakpoint.

Example

The below will serve to clarify:

<BorderBox width={["25%", "50%", "75%", "100%"]}>
  <Text variant={["xl", "lg", "md", "sm"]}>
    At xs the box is 25% wide, and greater than xs matches breakpoints going up
    to the largest. Scale the browser to see it in action.
  </Text>
</BorderBox>

All props in Palette are responsive like this which makes for extremely rapid iteration times when compared with conventional css-based media query approaches.

For more info, check out the styled-system docs. Also check out our comprehensive blogpost on how we handle responsive layouts when server-side rendering.

Developer flow

Different engineers will approach layout and responsive props in their own way, but a suggested approach would be to build out your layout using normal, non-array props, and then once the desktop version looks good, go back and annotate your components with array props, representing the mobile view. In practice this works well.

All Breakpoints

{
  "xl": "1192px",
  "lg": "1024px",
  "md": "900px",
  "sm": "768px",
  "xs": "767px"
}