Fractal (Fractal)
- Dominik Hisler
- Sebastian Schulz
Das Paket Fractal/Fractal sowie die App component-fractal stellen die zentrale Schnittstelle zwischen den Komponenten- und Elementbibliotheken (Styleguides) und brandbox dar. Sie bieten 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 und etlichen Node-Modulen eine Reihe von Funktionen für die Integration bereit.
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. Die App component-fractal sammelt bei der Installation über Composer 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.
Die Partials haben eindeutige Namen und können von einem Styleguide mit einer höheren Priorität überschrieben werden.
CSS
Die App component-fractal generiert 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.
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.
Fractal in einem Docker-Container starten
Um die Weboberfläche von Fractal zu erreichen muss der entsprechende Docker-Container für Fractal gestartet werden.
fractal:
image: registry.brandbox.host/runtime/fractal:develop
hostname: fractal-$COMPOSE_PROJECT_NAME
domainname: local.brandbox.de
volumes:
- /mnt/nfsstorage/${COMPOSE_PROJECT_NAME}/temp:/var/www/temp/
- /mnt/nfsstorage/${COMPOSE_PROJECT_NAME}/share:/var/www/share/
- ./www/plugin:/var/www/plugin
env_file:
- brandbox.docker.env
working_dir: /var/www
networks:
- internal
- proxy
labels:
traefik.enable: "true"
traefik.backend.loadbalancer.method: "drr"
traefik.docker.network: traefik_webgateway
traefik.frontend.rule: "Host:fractal-$COMPOSE_PROJECT_NAME.local.brandbox.de"
traefik.port: 8080
expose:
- "8080"Die Weboberfläche von Fractal ist nach dem Start des Containers unter der Adresse https://fractal-$COMPOSE_PROJECT_NAME.local.brandbox.de/ erreichbar.
Automatische Befehle manuell ausführen
Für component-fractal stehen nebem der Fractal-Weboberfläche auch ein paar Befehle zur Verfügung welche auf Basis von NodeJS geschrieben wurden. Diese werden von brandbox entweder als Teil der Installation oder automatisch durch einen PHP-Request ausgeführt. Die Befehle müssen innerhalb von plugin/remote/brandbox/component-fractal ausgeführt werden und können mithilfe von node main --help eingesehen werden.
Versionshinweise
brandbox 8 (framework 2.0.0)
Befehl zum Starten von Fractal wurde von
../../../node_modules/gulp/bin/gulp.jszunode fractal.jsgeändert