OverviewPermalink to: Overview
The spacing tokens were named with their pixel values to ease the handover process from the designers to the frontend engineers. This was a mistake.
StatusPermalink to: Status
The utilization is sparse, due to the nonsensical nature of writing var(--spacing-16) instead of 16px in a CSS file.
Spacing tokensPermalink to: Spacing tokens
| Spacing token | rem | Pixel value (Figma) | Description |
|---|---|---|---|
| --spacing-04 | 0.25rem | 4px | Used to space icons, badges and text inside buttons, controls etc. Width/height of active-indicator depending on orientation |
| --spacing-08 | 0.5rem | 8px | Inner margins in list items around icons. |
| --spacing-16 | 1rem | 16px | Inner margins in list items around text. |
| --spacing-24 | 1.5rem | 24px | Standard margin inside slidey-panel. |
| --spacing-32 | 2rem | 32px | Space between sections on overviews. |
| --spacing-48 | 3rem | 48px | Space between dense sections on admin pages. |
| --spacing-64 | 4rem | 64px | Only found in mobile spec files. |
GridPermalink to: Grid
Centered contentPermalink to: Centered content
928 dpPermalink to: 928 dp
This is the standard width of our spec files, as it used to allow the old collapsed left nav to be visible on a landscape standard iPad. It makes much less sense now, but it does divide by 8.
Status: It’s only being used on very few pages, despite being decided in 2019.
1140 dp (Future)Permalink to: 1140 dp (Future)
Once we have deployed the 928 grid, we can start developing a larger one for large screens
No left navPermalink to: No left nav
Used on shared dashboard, access to single comment/conversation from email link (only available if personal dashboard is turned off).
StretchPermalink to: Stretch
With content navigationPermalink to: With content navigation
Content navigation refers to the left side menu inside the content area, used on attributes, employees and access control. Only used in administration pages, where the user will benefit from full width content because of complex table data.
HeatmapPermalink to: Heatmap
The only page that uses full width on the manager dashboard. Currently, the Impact chart is also stretched to full width, but it shouldn’t be.
Our breakpointsPermalink to: Our breakpoints
Very chaotic, as everything was developed for desktop browsers first, and as feature by feature was developed, arbitrary breakpoints were used.