Das Plugin fractal/fractal stellt die zentrale Schnittstelle zwischen den Komponenten- und Elementbibliotheken (Styleguide) und brandbox dar. Es bietet durch die Integration von Fractal (https://fractal.build/) eine Weboberfläche für die Ansicht von allen verfügbaren Komponenten und Elementen für die Benutzeroberflächen von brandbox und stellt mit Hilfe von NodeJS, etlichen Node-Modulen und Gulp eine Reihe von Funktionen für die Integration bereit.
Aufbau des Plugins
Das Plugin liegt zwischen den Plugins in styleguide/* und brandbox als Integrationsstelle. Dadurch entsteht nur eine harte Referenz auf fractal/fractal anstelle eines spezifischen Styleguide-Plugins. Innerhalb von fractal/fractal kann dadurch eine hohe Dynamik geschaffen werden.
Partials
In brandbox zur Verfügung stehende Handlebar-Partials sind unter anderem Komponenten und Elemente aus den einzelnen Styleguide-Plugins. Das Plugin fractal/fractal sammelt bei der Installation von brandbox alle Komponenten und Elemente aus den installierten Styleguide-Plugins ein und erstellt eine Partial-Auflistung welche von brandbox genutzt wird. In brandbox selbst soll es kein komplexes HTML mehr geben. Hierfür sollen Komponenten und Elemente aus den Styleguides genutzt werden welche dann an den entsprechenden Stellen aufgerufen werden.
Die Plugins styleguide/brandbox und styleguide/mail werden als "Standard-Styleguide" gesehen. Existiert in einem anderen Plugin in styleguide/* eine Komponente oder ein Element mit gleichem Namen so überschreibt dieses eine existierende Komponente oder Element in styleguide/brandbox oder styleguide/mail.
CSS
Das Plugin fractal/fractal generiert bei der Installation von brandbox CSS-Dateien für die verschiedenen Bereiche von brandbox. Als Grundlage dienen SCSS-Dateien aus fractal/fractal selbst oder den Plugins in styleguide/*. Zusätzlich können für den Shop Themes konfiguriert werden. In einem Theme können unter anderem Schriften, Schriftgrößen, Abstände, Farben, uvm. konfiguriert werden.
Verwendung
Bei der Installation von brandbox wird eine Reihe von Aufgaben innerhalb von fractal/fractal ausgeführt. Hier werden unter anderem SCSS-Variablen und Partials aus den Komponenten und Elementen gesammelt, Zusatzdateien und Javascript an eine zentrale Stelle kopiert. Zusätzlich besteht die Möglichkeit die Weboberfläche von Fractal zu starten.
Fractal in einem Docker-Container starten
Um die Weboberfläche von Fractal zu erreichen muss der interne Port 3000 über die docker-compose.yml freigegeben werden.
Werden die Container nach der Anpassung neu gestartet ist Port 3000 auf einem zufälligen anderen Port verfügbar.
Nach dieser Anpassung muss eine Konsole in den entsprechenden Container geöffnet. Um Fractal starten zu können muss in das Verzeichnis /var/www/plugin/remote/fractal/fractal gewechselt werden. Hier wird nun der Befehl ./node_modules/gulp/bin/gulp.js ausgeführt.
Die Weboberfläche von Fractal sollte nun unter der Adresse http://local.brandbox.de:[Weiterleitungsport]/ erreichbar sein.