Responsive UI
A display that can be adapted to any device creates a positive user experience that is consistent across all systems.
Element Queries
Adaptations are made to every element, module or layout as required so as to ensure optimum display in all resolutions. No global breakpoints are applied based on certain devices.
Device-Independence
UI elements must be optimised for touch, mouse, and keyboard input. Small elements and narrow spacing hinder easy operation on touch devices.
Performance & Content
Content and functions are offered in equal measure on all devices. Information should not be added or removed based on screen size, only optimized for different resolutions.
Core Breakpoints
| Token | Value | Device Target |
|---|---|---|
var(--breakpoint-xs) |
320px | Extra small devices |
var(--breakpoint-s) |
375px | Small phones |
var(--breakpoint-m) |
768px | Tablets |
var(--breakpoint-l) |
1024px | Small desktops / Laptops |
var(--breakpoint-xl) |
1440px | Large desktops |
var(--breakpoint-xxl) |
1920px | Ultra-wide screens |