Das Paket Fractal/Fractal stellt sowie die App component-fractal stellen die zentrale Schnittstelle zwischen den Komponenten- und Elementbibliotheken (StyleguideStyleguides) und brandbox dar. Es bietet 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.
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 admin oder Public 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.
...
In brandbox zur Verfügung stehende Handlebar-Partials sind unter anderem Komponenten und Elemente aus den einzelnen Styleguides. Das Paket Fractal/Fractal Die App component-fractal sammelt bei der Installation von brandbox ü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.
| Info |
|---|
| Die Partials haben eindeutige Namen und können von einem Styleguide mit einer höheren Priorität überschrieben werden. |
CSS
Das Paket Fractal/Fractal generiert bei der Installation von brandbox 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.
| 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. |
...
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
...
Automatische Befehle manuell ausführen
Für Fractal/Fractal component-fractal stehen nebem der Fractal-Weboberfläche auch ein paar Befehl Befehle zur Verfügung welche auf Basis von Node NodeJS 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 Die Befehle müssen innerhalb von plugin/remote/brandbox/component-fractal ausgeführt werden und können mithilfe von node main --help eingesehen werden.
Innerhalb von plugin/remote/brandbox/framework/src/Fractal/Fractal können zuden die nachfolgenden Befehle ausgeführt werden müssen.
| Befehl | Beschreibung | ||
|---|---|---|---|
node tasks.js assets | Kopiert alle Javascript, Bild und Schriftdateien an eine zentrale Stelle innerhalb von temp/public/framework/fractal | node tasks.js partials | Sammelt alle Pfade der verfügbaren HBS-Dateien in den installierten Styleguides ein und schreibt diese in die JSON-Datei temp/public/framework/fractal/partials.json |
node tasks.js theme --processor extract --identifier [Identifikator] --styleguide [styleguide] | Extrahiert alle verfügbaren globalen SCSS-Variablen aus dem angegeben Styleguide sowie den dafür notwendigen Styleguides und schreibt diese in eine JSON-Datei innerhalb von temp/public/framework/fractal/extracted/ mit dem angegebenen Identifikator als Namen der Datei. | ||
node tasks.js theme --processor generate --identifier [Identifikator] --styleguide [styleguide] | Erzeugt eine CSS-Datei aus den SCSS-Dateien des angegebenen Styleguides sowie den dafür notwendigen Styleguides und erstellt eine CSS-Datei in temp/public/framework/fractal/rendered/ mit dem angegebenen Identifikator als Namen. |
Versionshinweise
| Info |
|---|
brandbox 8 (framework 2.0.0)
|
...
| Info |
|---|
brandbox 8 (framework 2.7.0)
|
| Info |
|---|
brandbox 10 (framework 3.0.0)
|