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 Paket liegt zwischen den Styleguides in brandbox-styleguide/* und brandbox als Integrationsstelle. Dadurch entsteht nur eine harte Referenz auf Fractal/Fractal anstelle eines spezifischen Styleguide-Pakets. Innerhalb von Fractal/Fractal kann dadurch eine hohe Dynamik geschaffen werden.

Sonderrolle für framework-styleguide

Der Styleguide framework-styleguide wird als Basis für alle Styleguides der Benutzeroberfläche (Admin oder Public) genutzt und muss daher auch von allen Styleguides mit einer höheren Priorität unterstzützt werden. Der Styleguide framework-styleguide liefert auch selbst keine Layouts.

Partials

In brandbox zur Verfügung stehende Handlebar-Partials sind unter anderem Komponenten und Elemente aus den einzelnen Styleguides. Das Paket Fractal/Fractal sammelt bei der Installation von brandbox alle Komponenten und Elemente aus den installierten 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.

CSS

Das Paket Fractal/Fractal generiert bei der Installation von brandbox CSS-Dateien für die verschiedenen Bereiche von brandbox. Als Grundlage dienen SCSS-Dateien aus den Styleguides. Zusätzlich können 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.

services:
  application:
    image: ...
    [...]
    ports:
      - "3000"
      - "[...]"
    [...]

Werden die Container nach der Anpassung neu gestartet ist Port 3000 auf einem zufälligen anderen Port verfügbar.

Nach dieser Anpassung 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 install aus
• 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.

Automatische Befehle manuell ausführen

Für Fractal/Fractal stehen nebem der Fractal-Weboberfläche auch ein paar Befehl zur Verfügung welche auf Basis von Node geschrieben wurden. Diese werden von brandbox entweder als Teil der Installation oder automatisch durch einen PHP-Request ausgeführt. Nachfolgend finden Sie die verfügbaren Befehle welche innerhalb von plugin/remote/brandbox/framework/src/Fractal/Fractal ausgeführt werden müssen.