Einführung
Vier Schichten. Kein Baukasten.
Brad Frost beschreibt Atomic Design als fünf Stufen, die gleichzeitig wirken — nicht als Reihenfolge. Wir halten vier, darunter liegen die Foundations.
Frost: Atoms, Molecules, Organisms, Templates, Pages. Kein linearer Prozess, ein Denkmodell fürs Ganze und die Teile zugleich. Viele Teams streichen Templates oder Pages. Wir streichen die Chemie-Namen und die fünfte Stufe: Pages sind Astro-Dateien, keine Schicht im System.
| Frost | Nordwynd | Besteht aus |
|---|---|---|
| Tokens | Foundations | global.css: Farbe, Typo, Spacing, Radien, Bewegung, Raster, Linien, Ebenen. Keine Schicht, der Grund. |
| Atoms | Elemente | unteilbar: Label, Logo, Icon, Button, Tag |
| Molecules | Komponenten | Elemente. Dürfen Varianten haben. |
| Organisms | Sektionen | Elemente. Dürfen Varianten haben. |
| Templates | Layouts | Sektionen. Immer unique. |
Komposition
- Eine Komponente setzt sich aus Elementen zusammen.
- Eine Sektion setzt sich aus Elementen zusammen.
- Ein Layout setzt sich aus Sektionen zusammen.
- Eine Astro-Page nutzt immer Sektionen — über genau ein Layout.
Unique
Komponenten und Sektionen dürfen Varianten haben: CTA mit oder ohne Pille, Hero in neun Fassungen. Layouts nicht. Wer eine andere Anordnung braucht, schreibt ein neues Layout.
Page Type · Referenzen
Zwei Layouts, kein Hybrid.
Die kleine Referenz und die groß ausgeführte Case Study sind zwei unique Layouts desselben Page Types. Die Page wählt eines. Sie mischt sie nicht.
01 · Fläche
Die leere Granitfläche ist Teil der Sprache. ASCII füllt sie nur, wenn nichts anderes die Fläche trägt.
02 · Stimme
Geist spricht. Geist Mono belegt. Display sitzt unten in der Fläche, nicht in der Mitte.
03 · Farbe
Granit trägt. Nordoliv zeigt an. Kein drittes Bunt.