Zum Hauptinhalt springen

Designer

Klicken Sie hier, um den Designer in einem neuen Browser-Fenster zu öffnen.

Mithilfe des KoliBri-Designers können Benutzer für die KoliBri-Bibliothek schnell einen eigenen Style entwickeln. Die Wirkungen der eigenen CSS-Anweisungen werden direkt an der Komponente sichtbar.
Die fertigen Styles können anschließend als Theme heruntergeladen und im eigenen Projekt eingefügt werden.

KoliBri bietet zum Erstellen von Themes auch einen -Ansatz an. Je nach persönlichen Präferenzen kann der Designer oder Scss verwendet werden.

Globales CSS​

Damit sich alle HTML-Elemente bei der Verwendung von assistiven Werkzeugen und bei hohe Zoomstufen optimal verhalten, müssen spezifische CSS-Styles gesetzt werden. Hierzu werden initial folgende CSS bei allen Komponenten gesetzt und können bei Bedarf vom Theme-spezifischen CSS überschrieben werden.

* {
 font-size: inherit; /* ermöglicht proportionales Skalieren */
 hyphens: auto; /* aktiviert die sprachspezifische Silbentrennung */
 letter-spacing: inherit; /* ermöglicht das Ändern des Buchstabenabstands */
 word-break: break-word; /* ermöglicht das Umbrechen von Wörtern */
 word-spacing: inherit; /* ermöglicht das Änderen des Wortabstands */
}

Aufbau​

Der KoliBri-Designer ist in drei Bereiche aufgeteilt.

Das eigene Theme kann wahlweise auf Basis eines Standard-Theme (default) oder direkt mit einem leeren Theme aufgebaut werden. Standardmäßig wird im Feld Theme durch den Eintrag „default“ ein Standard-Theme als Basis ausgewählt. Hier werden zur Anschauung einige CSS-Anweisungen in den Editor-Bereich eingefügt, deren Wirkung beispielhaft auf die Standard-Komponente Button angewendet wird.
Wird in das Feld Theme ein eigener Wert für das zu erstellende Theme eingegeben, setzt der KoliBri-Designer sämtliche Styling-Anweisungen zurück und es kann mit einem völlig leeren Theme begonnen werden.

Bitte beachten Sie, dass einige KoliBri-Komponenten bei Auswahl eines leeren Standard-Themes naturgemäß entweder gar nicht, ungewohnt oder mit Browser-Default-Layout angezeigt werden.

Zur einfachen Eingabe eigener CSS-Anweisungen besitzt der KoliBri-Designer einen VS Code-Editor. Anweisungen, die Benutzer:innen in den Editorbereich schreiben, werden nach Drücken der Tastenkombination Strg + S oder Command + S automatisch übernommen und die Auswirkungen auf die gerade gewählte Komponente übertragen.

Oben rechts: Komponenten​

Über die Auswahlbox Komponenten kann die zu bearbeitende KoliBri-Komponente ausgewählt werden. Es stehen alle KoliBri-Komponenten zur Verfügung, die eine optische Ausgabe aufweisen. Nicht enthalten sind rein funktionale Komponenten, wie z. B. Modal, InputLeandUpAdapter oder auch SkipNav.
Nach Auswahl einer Komponente lädt der KoliBri-Designer eine typische Basisausgabe der Komponente. Bei Komponenten, die unterschiedliche Varianten besitzen, wie z. B. Button, werden alle Varianten ausgegeben.

Bitte beachten Sie, dass einige KoliBri-Komponenten Abhängigkeiten voneinander besitzen. So besteht die Komponente LinkGroup beispielsweise aus der Link-Komponente, IconIcofont-Komponte und Tooltip-Komponente. Es empfiehlt sich, zunächst mit der kleinsten Komponente zu beginnen und nachfolgend auf die eigentliche Hauptkomponente zu wechseln. Eine detaillierte Beschreibung folgt weiter unten.

Oben mitte: Vorschau​

In diesem Bereich wird die aktuell geladene Komponente mit einer typischen Ausgabe dargestellt. Je nach Auswahl des Vorgabe-Themes stellt sich die Komponente entweder im Default-Browser-Layout dar oder besitzt bereits Styling-Merkmale, die aus dem Vorgabe-Theme stammen.

Unten: Importieren / Exportieren / Zurücksetzen​

Der KoliBri-Designer bietet verschiedene Möglichkeiten, Ihre eigenen Einstellungen zu speichern und sie erneut zur weiteren Bearbeitung zu laden.

Über den Button „Theme erstellen“ werden die eigenen CSS-Anweisungen als eigenständiges Theme zusammengefasst und im Editor zur Ansicht und zum Kopieren bereitgestellt.
Der Button „Theme herunterladen“ ermöglicht es, das eigene Theme als JSON-Datei zu speichern.
Um alle Änderungen rückgängig zu machen, klicken Sie auf den Button „Alle Änderungen verwerfen“. Der KoliBri-Designer wird auf das Vorgabe-Theme „default“ zurückgesetzt.
Mit dem Upload-Feld „Theme laden“ kann eine bereits erstellte Theme-Datei (JSON-Datei) zur erneuten Bearbeitung in den KoliBri-Designer geladen werden.

Abhängigkeiten der Komponenten voneinander​

Die meisten KoliBri-Komponenten bestehen technisch aus einer Sammlung anderer KoliBri-Komponenten, die zusammengenommen dann eine neue KoliBri-Komponente ergeben und ähnliche, aber weitergehende, Anwendungsfelder besitzen.
Die Kenntnis der technischen Konstruktion der zu bearbeitenden Komponente ist für die richtige Reihenfolge beim Erstellen des eigenen Themes wichtig.

Die Abhängigkeiten der KoliBri-Komponenten voneinander werden im Storybook, im Abschnitt Beschreibung der jeweiligen Komponente, im Detail anhand eines Diagramms beschrieben.

Beispiel:

Die in diesem Beispiel verwendete LinkGroup besteht aus den weiteren KoliBri-Komponenten:

  • kol-heading
  • kol-link → nutzt außerdem kol-tooltip und kol-badge
  • kol-icon-icofont
  1. Legen Sie zunächst die CSS-Anweisungen für die Überschrift der LinkGroup fest. Die Überschrift besteht aus der KoliBri-Komponente kol-heading. Wechsel Sie daher im Auswahlfeld Komponenten zur Komponente kol-heading. Passen Sie hier im Editor z. B. für h1 die Schriftfarbe an. Diese Einstellung gilt nun für alle Komponenten, in denen die Komponente kol-heading genutzt wird. Die Schriftfarbe hat sich also nicht nur für die Komponente kol-heading selbst verändert, sondern synchron für alle Komponenten, die kol-heading außerdem nutzen. Unter anderem die im Beispiel genutzte kol-link-group.
    Wechseln Sie im Auswahlfeld Komponenten zurück zur Komponente kol-link-group. Auch hier hat sich die Schriftfarbe der Überschrift gemäß der CSS-Anweisung der Komponente kol-eading geändert.
  2. Ändern Sie jetzt die Schriftfarbe der Links. Wechseln Sie im Auswahlfeld Komponenten zu kol-link. Ändern Sie im Editor den Color-Wert für a. Wechseln Sie zurück zur Komponente kol-link-group. Die Schriftfarbe der einzelnen Links hat sich ebenfalls geändert.
  3. Wenn Sie versuchen, die zuvor genannten Einstellungen direkt in der Komponente kol-link-group zu ändern, werden Sie keine Veränderungen sehen. Es wäre hier aber z. B. möglich, die Hintergrundfarbe der ganzen Komponente kol-link-group zu ändern.
  4. Beachten Sie, dass Sie über den KoliBri-Designer nur Komponenten stylen können, die sich innerhalb eines Shadow-Doms befinden. Es wäre beim Beispiel kol-link-group nicht möglich, das Element selbst zu stylen, da sich dieses nicht innerhalb eines Shadow-Doms befindet.
  5. Beachten Sie, dass Änderungen im KoliBri-Designer nur solche KoliBri-Komponenten möglich sind, die beim Rendern einen Shadow-Dom besitzen. Das ist z. B. bei der Komponente kol-icon-icofont oder kol-icon-fontawesome nicht der Fall.