...
v5.4
...
...
...
Das Plugin fractal/fractal Das Paket 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 Paket liegt zwischen den Plugins Styleguides in brandbox-styleguide/* und brandbox als Integrationsstelle. Dadurch entsteht nur eine harte Referenz auf fractalFractal/fractalFractal anstelle eines spezifischen Styleguide-PluginsPakets. Innerhalb von fractalFractal/fractalFractal 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-PluginsStyleguides. Das Plugin fractalPaket Fractal/fractal Fractal sammelt bei der Installation von brandbox alle Komponenten und Elemente aus den installierten Styleguide-Plugins Styleguides 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.
| Info |
|---|
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/mailPartials haben eindeutige Namen und können von einem Styleguide mit einer höheren Priorität überschrieben werden. |
CSS
Das Plugin fractalPaket Fractal/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/*den Styleguides. 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.
| Info |
|---|
Wie auch bei Partials können die SCSS-Dateien überschrieben werden. Zusätzlich besteht die Möglichkeit in einem Styleguide mit höherer Priorität die Standardvariablen zu überschreiben. |
Verwendung
Bei der Installation von brandbox wird eine Reihe von Aufgaben innerhalb von fractalFractal/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.
...
Nach dieser Anpassung muss eine Konsole in den entsprechenden Container geöffnet. Um Fractal starten zu können muss die Umgebung für das Ausführen von Fractal vorbereitet werden. Dazu ist der Terminalzugriff auf den Container notwendig.
- Wechseln Sie in das Verzeichnis
plugin/
...
remote/brandbox/
...
framework/- Führen Sie dort den Befehl
npm installaus - Wechseln sie danach in das Verzeichnis
plugin/remote
...
/brandbox/framework/src/Fractal/Fractal- Führen Sie dort den Befehl
../../../node_modules/gulp/bin/gulp.js
...
- aus
Die Weboberfläche von Fractal sollte nun unter der Adresse http://local.brandbox.de:[Weiterleitungsport]/ erreichbar sein.