Standard and Custom Options
Our Media Queries, much like all other design values, live in the Design/Tokens folder.
If you pop open this file, you'll see an object of breakpoints that we have settled on:
export const breakpoints = {
xs: 340,
s: 640,
m: 900,
l: 1200,
xl: 1600,
xxl: 2000,
xxxl: 2400,
};
Sometimes, the design of a component starts to visually regress well before these points.
To accomodate these use cases, we also have a customBreakpoints object that you can add to as you build out your components.
At the end of the day, we're just formatting an object of media queries that stitches.config.js expects to see.
To accomplish this, we run all our standard and custom media query values through the getMediaQueries function we imported from Design/Utils.
This allows us to use the @> or @< signs in conjunction with whatever key we want and the media query is automatically calculated for us.
Let's say we want to style a div to have a blue background color that changes to red when the device is greater than 640px (s) and orange when it's larger than 900px (m):
// Using '@>' follows a mobile-first approach.
const $ColourfulDiv = styled('div', {
h: '$space$4', // Equivalent to 32px on our 8px spacing system.
w: '$space$4',
bc: 'blue',
'@>s': {
bc: 'red',
},
'@>m': {
bc: 'orange',
},
});
And if we added a custom breakpoint called colourfulDivDesktop so we can change the background to pink when the screen hits 1100px, we can access that the same way:
const $ColourfulDiv = styled('div', {
h: '$space$4', // Equivalent to 32px on our 8px spacing system.
w: '$space$4',
bc: 'blue',
'@>s': {
bc: 'red',
},
'@>m': {
bc: 'orange',
},
// Custom breakpoint
'@>colourfulDivDesktop': {
bc: 'pink',
},
});
The pattern is always @ + (> or <) + key.
It's a good idea to keep the mediaQueries token file open in your IDE for quick reference.