Avstånd
Åttapunktsskala
Skalan går från --mg-space-2 (8 px) till --mg-space-9 (96 px). Det finns ingen --mg-space-1 och ingen --mg-space-10. En saknad token gör att hela CSS-deklarationen tyst ogiltigförklaras.
--mg-space-28 px
--mg-space-312 px
--mg-space-416 px
--mg-space-524 px
--mg-space-636 px
--mg-space-748 px
--mg-space-864 px
--mg-space-996 px
| Token | px | Används till |
|---|---|---|
--mg-space-2 | 8 | Tätt mellan ikon och text |
--mg-space-3 | 12 | Mellan rubrik och etikett |
--mg-space-4 | 16 | Mellan relaterade element |
--mg-space-5 | 24 | Standardavstånd mellan stycken och kort |
--mg-space-6 | 36 | Kortpadding, mellan block |
--mg-space-7 | 48 | Mellan rubrik och innehåll i en sektion |
--mg-space-8 | 64 | Sektionspadding |
--mg-space-9 | 96 | Stora sektioner, hero |
Gör
- Mer luft ovanför en rubrik än under
- Samma avstånd mellan samma sorts block
- Använd tokens, inte egna px-värden
Gör inte
- Fylla varje yta till kanten
- Mer luft under en rubrik än ovanför
- Egna mellanvärden som 20 eller 40 px
Layout
En container, en vänsterkant
Allt innehåll delar vänsterkant med logotypen. Navigationen och innehållet använder samma container, samma bredd och samma sidomarginal.
| Token | Värde | Anmärkning |
|---|---|---|
--mg-wide | 1280 px | Max innehållsbredd, samma för navigation och innehåll |
--mg-gutter | 20 / 40 px | Sidomarginal: mobil, 600 px+ |
--mg-gutter-end | minst --mg-gutter | Högermarginal. Växer på sidor med sidospår så att innehållet aldrig hamnar under spåret |
--mg-side-w | 192 px | Sidospårets bredd |
--mg-nav-h-compact | 56 px | Headerns höjd i hamburgerläge efter scroll |
--mg-nav-h | 72 px | Navigationens höjd |
--mg-hext | 48 px | Polygonens förlängning under navigationen |
--mg-header-h | 120 px | Navigation + förlängning. Innehållet på undersidor börjar här |
.mg-wrap {
max-width: var(--mg-wide); /* 1280 px = 1200 px innehåll + 2 × 40 px */
margin-inline: auto;
padding-inline: var(--mg-gutter) var(--mg-gutter-end);
}Brytpunkter
| Bredd | Händer |
|---|---|
| ≤ 599 px | En kolumn, gutter 20 px, footer staplad |
| ≥ 600 px | Gutter 40 px, container max 1280 px (1200 px innehåll) |
| > 768 px med sidospår | Högermarginalen växer så att innehållet håller 24 px avstånd till sidospåret |
| ≤ 768 px | Hamburgermeny ersätter navlänkar. Sidospåret döljs. Headern ligger kvar efter scroll och blir lägre (56 px) |
| ≤ 900 px | Tvåkolumnslayouter faller till en kolumn |
Gör
- Använd
.mg-wrapför allt innehåll - Mät att logotyp, brödsmula och rubrik har samma vänsterkant
Gör inte
- Egna
max-width(960, 1080, 1140) på containrar som ska linjera - Egna
clamp()-värden för sidopadding
Rörelse
Rörelse som öppnar former
Rörelsen är sparsam och har en uppgift: att ge en klickbar form liv, eller att flytta navigationen ur vägen.
| Namn | Egenskap | Tid | Kurva |
|---|---|---|---|
| button-hover | clip-path | 350ms | ease |
| card-hover | clip-path, background | 350ms | ease |
| image-hover | clip-path | 400ms | ease |
| header-collapse | clip-path, padding-bottom | 400ms | ease |
| header-rotate | transform | 600ms | cubic-bezier(0.4, 0, 0.6, 1) |
| side-nav-in | transform, opacity | 420ms / 280ms | cubic-bezier(0, 0, 0.2, 1) |
| mobile-menu | transform | 380ms | cubic-bezier(0, 0, 0.2, 1) |
| dropdown | opacity, transform | 180ms | ease |
Gör
- Animera
clip-pathoch bakgrundsfärg - Respektera
prefers-reduced-motion: inga transitions, formen öppnas inte - Håll tider mellan 180 och 600 ms
Gör inte
- Studsande, roterande eller blinkande effekter
- Rörelse som inte hjälper användaren
- Parallax och scroll-jacking