Komponenten / Elemente
In /elements/ sollten nur noch Bausteine für Komponenten liegen. Elemente die ohne Unterelemente sind können zu Komponenten befördert werden.
Struktur:
awesome-styleguide/ component/ awesome-component/ _layout.scss _default.scss awesesome-component.hbs AwesomeComponent.php element/ aweseome-component/ awesome-component-element/ _layout.scss _default.scss awesesome-component.hbs AwesomeComponentElement.php
SCSS-Dateien
Die _variable.scss sollte in _default.scss umbenannt werden. Diese beinhaltet die Default-Werte, welche über die Pflegemaske angepasst werden können.
Alle _awesome-component.scss _awesome-button-etc.scss Dateien sollten in _layout.scss umbenannt werden. Falls mehrere scss Dateien für ein Layout in einem Ordern liegen, können diese Layouts in der _default.scss importiert werden. Dabei bietet es sich auch an, Varianten in Unterorder zu legen, falls es zu unübersichtlich in dem Element wird.
Neu dazu kam die _overwrite.scss. Siehe https://confluence.konmedia.com/x/i6--Aw
Styleguide config.json
- awesome-styleguide.config.json
- depends: ['shop-styleguide']
- priority: Definiert Reihenfolge. Guter Wert für Projekt ist 1001 und muss einzigartig sein.
- "preview": "@preview-awesome-styleguide" + previewTempalte anlegen
- /composer.json
- "name": "brandbox-styleguide/awesome-styleguide"
Nützliche Fractal-Befehle
Fractal starten
// Port für Fractal herausfinden (nicht im Pod). Gesuchter Port ist 3000 docker ps // Fractal starten (im Pod) cd plugin/remote/brandbox/framework/src/Fractal/Fractal/ node_modules/gulp/bin/gulp.js default
Styles rendern
cd plugin/remote/brandbox/framework/src/Fractal/Fractal/ // styleguide Parameter muss bei Bedarf angepasst werden. Hier sollte der Ausgangsstyleguide genommen werden. Also dieser, der die gesamte Kette definiert. node_modules/gulp/bin/gulp.js render --identifier="c1d1" --styleguide="shop-styleguide"