Was ist das Besondere an AtomicKitchen?
Kurzer Überblick
Das Backend: Dein Arbeitsbereich
AtomicKitchen besteht aus einem Backend und einem Frontend. Im Backend werden innerhalb von Projekten, die wir als "Workspaces" bezeichnen, Design-Assets erstellt, verlinkt oder hochgeladen und zu modularen Design-Komponenten verarbeitet. Das Frontend stellt die Online-Präsentationsfläche des zu erstellenden Designsystems, Styleguides oder Brandbooks dar. Dieses kann auch losgelöst vom Backend heruntergeladen, versendet und betrachtet werden.
In AtomicKitchen werden code-basierte Bausteine über CSS-Styles und HTML-Tags angelegt und iterativ zu komplexeren Komponenten und Templates verarbeitet. Dabei sind die CSS-Styles die kleinsten Teile in einem AtomicKitchen-Workspace. Sie sind zuständig für das visuelle Erscheinungsbild aller Bausteine. Dazu wird jeder Komponente eine Reihe von Styles «responsive» zugeordnet, so dass sich jede Komponente je nach Viewport-Grösse adaptiv passend verhält. Auch für andere Zustände, wie z. B. das Hover-Zustand eines Elementes können einer Komponente individuelle Styles zugeordnet werden.
Die Styles sind in diverse Typen organisiert, wie z.B. Farben, typografische Definitionen, Linien, u. ä. Als Arbeitserleichterung gibt es vordefinierte Standard-Styles, die sogenannten «Basics».
Ändert man nachträglich die Eigenschaften eines Styles werden diese Eigenschaften in allen Komponenten, in welchen dieses Style verarbeitet worden ist, aktualisiert. Das spart Zeit und hilft Inkonsistenzen zu vermeiden.
Die Atome sind die kleinsten «Inhaltsträger» eines Atomic Design Systems. Für die Erstellung eines Atoms wird ein passender HTML-Tag ausgewählt, bei Bedarf mit einer CSS-Klasse und weiteren Attributen versehen und ein entsprechender Inhalt, zum Beispiel ein Text oder ein Bild hinzugefügt. (Anmerkung: Es gibt auch inhaltslose Atome wie zum Beispiele Linien.)
Wie schon angeführt wird das visuelle Erscheinungsbild und das responsive Verhalten dieses Atoms von Styles bestimmt, welche in das Atom integriert werden. Bei den Atomen handelt es sich aufgrund ihrer niedrigen Komplexität um sehr einfache Bausteine, wie zum Beispiel ein Button, ein Text-Absatz oder eine Headline.
Die vorliegenden Atome können anschliessend zu komplexeren Komponenten zusammengefügt werden. Zum Beispiel kann ein Bild <img>, ein kurzer Text-Baustein <p> sowie ein Button <button> zusammengefügt einen Teaser ergeben. Diese drei zusammengefügten Atome werden auf dieser Weise zu einer neuen Design-Komponente, zu einem Molekül, welches wiederrum ein Baustein für eine komplexere Design-Komponente sein kann, indem es mit weiteren Bausteinen kombiniert wird. So können zum Beispiel drei Teaser-Moleküle zusammen einen Teaser-Block ergeben. So würden die drei Moleküle dann ein Organismus ergeben.
In der Regel benötigt jede zusammengesetzte Komponente auch eigene CSS-Eigenschaften, wie zum Beispiel innere wie äußere Abstände oder einen Begrenzungs-Rahmen. Diese Eigenschaften werden, wie schon angeführt über Styles definiert, welche man jeder zu erstellenden Design-Komponente zuordnet.