Responsive Design
Responsive aliases
Admin UI has five responsive aliases that guide you while authoring responsive layouts.
| alias | min-width em | min-width px | max-width em | max-width px |
|---|---|---|---|---|
@tablet | 48em | 768px | - | - |
@tabletOnly | 48em | 768px | 64em | 1024px |
@desktop | 64em | 1024px | - | - |
@desktopOnly | 64em | 1024px | 75em | 1200px |
@widescreen | 75em | 1200px | - | - |
In the example - the text content changes, representing the current screen size. You can resize your browser window to see the result.
💡 What happens under the hood?
The responsive alias string will be replaced by a media query.
It replaces the pattern @[alias] by @media (min-width: theme.breakpoints.[alias]).
For exemple, @tablet will be replaced by @media (min-width: 48em).
The same idea applies to the only aliases! The diference is that it set the next breakpoint's min-width as its max-width, creating a interval.
For exemple, @tabletOnly will be replaced by @media (min-width: 48em) and (max-width: 64em).
Mental model
Our styles have a mobile-first mindset. It means that every style that you write targets mobile by default. Each responsive alias targets all others above it so that you can work in optimizing your layout for larger screens. In other words, always work optimizing space.
The Box in the example has the $s padding for all screens:
<Box
csx={{
padding: '$s',
}}
/>
If we add the @tablet rule, the padding will be $m for tablets and above - which means that it will remain $s for screens smaller than @tablet. The logic is still the same for other breakpoints.
<Box
csx={{
padding: '$s',
'@tablet': {
padding: '$m',
},
}}
/>
Custom media queries
The responsive aliases can cover most of the use cases, but custom media queries are allowed if you want to target specific devices on your design. For example:
// declaration
const iPhoneXRLandscape = `
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape)
`
// usage
const layout = style({
// ... component styles,
[iPhoneXRLandscape]: {
// ... device specyfic styles
},
})
Responsive values [deprecated]
A responsive value is a deprecated approach in which properties can accept an array of values. Each position of the array correspond to the value on each breakpoint, following the sequence:
[mobile, tablet, desktop, widescreen]
To have a <Box> full width while on mobile, and half on tablet and above:
You can use the value null to skip breakpoints:
Why are we deprecating this?
The main reasons are:
- Multiple responsive styles are harder to write, learn, and understand.
- Less performant to parse.
- Library complexity overhead.
To migrate to the aliases, you need to place the styles in the correct category.
// with responsive values
const style = {
bg: '$primary',
color: '$primary',
padding: [10, null, null, 20],
margin: [5, null, 10, 15],
}
// with aliases
const style = {
bg: '$primary',
color: '$primary',
padding: 10,
margin: 5,
'@desktop': {
margin: 10,
},
'@widescreen': {
padding: 20,
margin: 15,
},
}