Systematische Skalierung
Ark’s Layout-System basiert auf dem 8-Point-Grid. Bei diesem System dient die Einheit 8 (= 8 px) und ein Vielfaches dessen, als Grundlage für die Skalierung von Größenangaben. Um selbst bei den kleinsten Anwendungsfällen eine größtmögliche Flexibilität zu gewährleisten, ist dieses Prinzip leicht abgewandelt worden und nimmt die Einheit 4 (= 4 px) als Basis für die systematische Skalierung von Größen < 40 px.
Größen, die von diesem System abweichen, sind unzulässig. Das System dient der Einhaltung von einem konsistenten und ausbalancierten Layout über unterschiedliche Anwendungen hinweg.
| Variable | Pixel Value | REM Value |
|---|---|---|
| $ark-space-0 | 0 | 0 |
| $ark-space-1 | 4 | 0.25 |
| $ark-space-2 | 8 | 0.5 |
| $ark-space-3 | 12 | 0.75 |
| $ark-space-35 | 14 | 0.875 |
| $ark-space-4 | 16 | 1 |
| $ark-space-45 | 18 | 1.125 |
| $ark-space-5 | 20 | 1.25 |
| $ark-space-6 | 24 | 1.5 |
| $ark-space-7 | 28 | 1.75 |
| $ark-space-8 | 32 | 2 |
| $ark-space-9 | 36 | 2.25 |
| $ark-space-10 | 40 | 2.5 |
| $ark-space-12 | 48 | 3 |
| $ark-space-14 | 56 | 3.5 |
| $ark-space-16 | 64 | 4 |
Dieses Skalierungssystem findet eine ganzheitliche Anwendung im Ark Design System und kann für verschiedene Properties genutzt werden, z. B.:
- margin
- padding
- font-size
- line-height
- width
- height
- border-radius
- uvm.
Anwendungsbeispiel
