Responsive Styles

Our breakpoints use "mobile first" media queries. This means that the smaller styles are applied first, and that styles from smaller breakpoints are still applied to larger breakpoints — with the larger breakpoint styles taking precedence.

Within a styled component, that looks something like this:

const MyBox = styled("div", {
  fontSize: "12px",
  color: "black",
  "@tablet": {
    fontSize: "14px",
  },
  "@laptop": {
    color: "red",
  },
})

Ignoring for a moment that you shouldn't use fontSize and color directly 😅, the result of the above code is that:

• Mobile — fontSize is 12px and color is black
• Tablet — fontSize is 14px and color is black
• Laptop — fontSize is 14px and color is red

Responsive Spacing#

Spacing on our stack is responsive, when using spacing tokens. This means that spacing token $4 will not be a static value, but rather it's value will change with each breakpoint — and may even interpolate between values using calc.

See the section on spacing for more details.

Responsive Typography#

Just like spacing, typography can also be responsive (lineHeight and fontSize).

Configuration#

When you create a new project, your breakpoints and media values will look like this.

...
breakpoints: ["bigPhone", "tablet", "laptop", "desktop", "cinema"],
media: {
  bigPhone: "(min-width: 600px)",   // >= Tablet Portrait
  tablet: "(min-width: 900px)",     // >= Tablet Landscape
  laptop: "(min-width: 1200px)",    // >= Laptop
  desktop: "(min-width: 1800px)",   // >= Desktop
  cinema: "(min-width: 2400px)",    // >= Cinema
},
...

We don't typically change these values, as we consider these sizes best practice. That being said, you may want or need to change them if the design of your site is atypical.

The media object is where you can specify all the media queries of your application. You could, for example, also add something like:

portrait: "(orientation: portrait)",
landscape: "(orientation: landscape)",

The breakpoints array should only contain media queries which relate to the horizontal sizes of your application, and must be in the correct order. Our responsive token system relies on this information being accurate. It's rare to need to edit this list.

Note that stitches has an implicit breakpoint called initial, which is (min-width: 0px).