Pattern Lab

Framework zum Gestalten der Bedienelemente nach dem Atomic-Design-Ansatz für interaktiven Test im Browser.

Neues Projekt

Zum Neuerstellen eines Patternlab wird im Stammverzeichnis von Patternlab <PFAD_PATTERNLAB> die Vorlage oder ein bestehendes Projekt kopiert

Ziel: <PFAD_PATTERNLAB>/<PROJEKT>

Erstellen/Modifizieren der Sources in <PFAD_PATTERNLAB>/<PROJEKT>/

_data - globale Daten, die in den mustache-Patterns eingefügt werden
_meta - globaler Kopf und Fuss (für Resourcen, die überall eingebunden werden sollen)
_patterns - mustache Templates
css/scss - SASS- und CSS-Dateien
files - Files von REDAXO (damit der Pfad in den CSS stimmt)
fonts - Icon Fonts (Glyphicon, Icons)
images - Grafiken und Bilder
js - JavaScript

Ausführung

im Patternlab Stammverzeichnis: php core/console --<OPTION>

Optionen

config : konfiguriert patternlab
export : exportiert patterns und assets (z.B: für andere Instanzen oder für einen Versionswechsel bei patternlab)
fetch : installiert Pakete von Packagist
generate : manuelle Generierung
help : Hilfe
server : startet PHP Server (wenn kein Apache o.ä. vorhanden)
starterkit :
version : gibt patternlab Version aus
watch : automatische Generierung bei Änderungen

Nach Änderung von source Dateien muß die Site neu generiert werden.

handish

Befehl: php core/console --generate
Ziel: <PFAD_PATTERNLAB>/<KUNDE>/patternlab/public

automatisch

Befehl: php core/console --watch

Patternlab JSON-Daten

In die mustache-Dateien können Daten aus JSON-Dateien eingefügt werden.

globale Datei: _data/_Data.json - Aus dieser Datei werden erst einmal die Daten für alle Patterns genommen.
patternspezifische Datei : diese Dateien bfinden sich im gleichen Verzeichnis, wie die mustache-Datei und müssen den gleichen Namen haben (z.B: 03-event-list.json für die Patterndatei 03-event-list.mustache)

Befinden Sich Daten mit dem gleichen Schlüssel in der globalen und in der spezifischen Datei, werden die Werte der spezifischen Datei genommen, ansonsten die aus der globalen Datei. In der spezifischen Datei müssen nur die Daten angegeben werden, die von der globalen Datei abweichen.

Die spezifische JSON-Datei eines Patterns kann bzw. muss alle Daten des Patterns sowie aller eingebetteter Patterns enthalten bis hinunter auf atom-Ebene. Dabei muß die Struktur der Patterns sich in der JSON Datei abbilden. Z. B.

Verwendung in mustache-Datei: {{firstkey.secondkey...}}

bedingte Ausgabe (Sections)

Bezeichner, die in data.json mit Wert true/false versehen sind oder ein gefülltes/leeres Array dartellen, können verwendet werden, um eine bedingte Ausgabe von Code zu steuern. Der Bezeichner kann entweder vom Typ bool, string oer Array sein. Wenn der Bezeichner vom Typ string ist, entspricht ein leerer String dem Wert false. Wenn der Bezeichner vom Typ array ist, entspricht ein leeres Array dem Wert false.

Alles zwischen den Section-Tags {{# BEZEICHNER }} und {{/ BEZEICHNER }} wird nur ausgegeben, wenn der Bezeichner auf true gesetzt ist.

Alles zwischen den Section-Tags {{^ BEZEICHNER }} und {{/ BEZEICHNER }} wird nur ausgegeben, wenn der Bezeichner auf false gesetzt ist.

Bezeichner, die in data.json ein Array enthalten, werden in einer Schleife abgearbeitet und die vorkommenden Platzhalter zwischen {{# BEZEICHNER }} und {{/ BEZEICHNER }} werden pro Schleifendurchlauf mit dem korrespondierenden Wert des aktuellen Array-Elements ersetzt. So ist es z.B. möglich die li-items in einer ul-Liste mit einer einzigen Zeile HTML-Code zu schreiben.

Variablen, die zwischen einem Section-Tag eines Arrays stehen und nur einen einfachen Namen haben, beziehen sich immer auf das Array. Z.B. für die JSON-Daten

{

  "fields" : {
    "global" : "globalval",
    "array" : [
    {
      "label" : "label1",
      "val" : "val1"
    },
    {
      "label" : "label2",
      "val" : "val2"
    }
    ]
  }

}

Für den Code {{#fields.array}}{{label}} - {{fields.global}} - {{val}}{{/fields.array}} wird im 1. Durchlauf label1 - globalval - val1 ausgegeben und im 2. Durchlauf label2 - globalval - val2

Zustand der Patterns

http://patternlab.io/docs/pattern-states.html

Die Patterns können mit folgenden Zuständen versehen werden:

inprogress (rot) : Befindet sich noch in der Bearbeitung
inreview (gelb) : Befindet sich noch in der Kontrolle
complete (grün) : Kann verwendet werden

Es können weitere, benutzerdefinierte States definiert werden (s. patternlab Doku)

Alle Patterns, die andere Patterns mit niedrigerem Status beinhalten, erhalten auch diesen Status z.B. ein Atom hat inprogress => alle die das Atom-Pattern enthalten, haben auch inprogress.

Damit das mit dem Status auch in einem Template funktioniert, das ein anderes Template inkludiert, muss hinter dem Templatepfad, aber noch vor der Parameterliste ein Doppelpunkt stehen (z.B. {{> atoms-template:(<PARAMETER>) }}). StyleModifier müssen nicht angegeben werden. Ansonsten wird der Status immer als inprogress festgelegt.

Der Status wird über den mustache-Dateinamen festgelegt, z.B. 03-styled-checkboxes@inprogress.mustache

Styles für Demozwecke

Um Elemente für Demozwecke darzustellen, können in der Datei source\css\pattern-scaffolding.css entsprechende CSS-Klassen definiert werden, die nicht in die produktive css-Datei(en) übernommen werden sollen.

Styles für patternlab Elemente

Elemente, die nicht zu den generierten patterns gehören, sondern zu patternlab selbst, können in der Datei public\styleguide\css\styleguide-specific.css gestylt werden

allgemeiner header/footer

Die Datei vendor\pattern-lab\styleguidekit-mustache-default\views\partials\general-header.mustache wird im <head> der ausgegebenen Seite und im <head> des <iframe> eingebunden und enthält enthält includes von css- und ggf. js-Dateien.

Hier können patternlab-Elemente umgestylt werden.

Die Datei vendor\pattern-lab\styleguidekit-mustache-default\views\partials\general-footer.mustache wird am Ende des <iframe> ausgegeben und enthält enthält includes von js-Dateien, die patternlab benötigt.

benutzerdefinierte includes

Benutzerdefinierte css- und js-Dateien können über die Dateien source\_meta\_00-head.mustache und source\_meta\_01-foot.mustache eingebunden werden.

Parameter in Template-Aufrufen in mustache-Dateien

patternlab besitzt eine eingebaute Erweiterung, mit der den Aufrufen von anderen mustache-Dateien parameter mitgegeben werden können. z.B. {{> atoms-category-templatename(param1:"Text", param2:123, param3:true }}. In der aufgerufenen mustache-Datei wird dann {{param1}} u.s.w. inkl. der einschließenden Klammern durch den übergebenen Wert ersetzt.

Der Algorithmus beinhaltet nur einfaches Suchen und Ersetzen im template code. Es ist keine Prüfung auf Vorhandensein oder true/false möglich, wie das bei der Behandlung der JSON-Daten möglich ist. D.h. z.B. {{# param1 }} wird mit dem übergebenen Parameter param1:"Test" zu {{ Test }}

Wird in einem Template ein anderes Template inkludiert, das JSON Daten verarbeitet, dann können die JSON Parameter im Aufruf des Templates überschrieben werden. Z.B. {{> molecules-mypattern(styles.param1:value1, styles.param2:value2) }}. Es müssen allerdings immer alle Parameter einzel gelistet werden. Die Übergabe nur von styles funktioniert im Beispiel nicht.

Knowledge base

Patternlab