Breakpoints
Opened this issue · 2 comments
We need to define what our breakpoints are and define them as tokens so we can export them as css variables (even if media queries doens't support it yet) and make a page documententing usage.
Suggest keep using the same name we have for sizes to keep consistency.
Old breakpoint tokens: https://github.com/digdir/designsystemet/tree/main/design-tokens/Viewport
Notes:
- https://tailwindcss.com/docs/responsive-design
- https://mantine.dev/styles/responsive/
- https://react-spectrum.adobe.com/react-spectrum/Provider.html#breakpoints
- https://aksel.nav.no/grunnleggende/styling/brekkpunkter
- https://v2.chakra-ui.com/docs/styled-system/theme#breakpoints
Decided to try these breakpoints
| Size | em | px |
|---|---|---|
| xs | 40em | 640px |
| s | 48em | 768px |
| m | 64em | 1024px |
| l | 80em | 1280px |
| xl | 96em | 1536px |
Suggested naming
--ds-breakpoint-xs
--ds-breakpoint-s
--ds-breakpoint-m
--ds-breakpoint-l
--ds-breakpoint-xl
Seem like there is a lot of users that use resolutions close to the minimums mentioned in WCAG (320px width). There is also something strange about the stats and most likely there is some pollution in the source-data used in Statcounter. I think the smallest size need to work from minimum 320 px, but we do not need to test for usability at smaller screens than 320.
https://gs.statcounter.com/screen-resolution-stats/all/norway
Would be interesting to see comparable results from some public service websites.
At BR we do not track viewport at the moment as this is not gathered on the server-side statistics that we get (in Kibana). However, I have asked for operation system and browser stats.