Breakpoints

[mimarz]

We need to define a recommendation for breakpoints.

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

• [ ] Breakpoints documentation page in Storybook & Storefront
• [ ] Breakpoints tokens - (even if media queries doens't support it yet)
• [ ] Update storefront to use breakpoints
• [ ] https://github.com/digdir/designsystemet/issues/2105
• [ ] https://github.com/digdir/designsystemet/issues/2573

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

[mimarz]

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

[Camulos]

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.