2 posts tagged with "theme"

Am Beispiel der Badge-Komponente wollen wir einmal schauen, wie das Stylen funktioniert.

Herausforderung​

Die Badge-Komponente hat einen Smart-Button und der soll optisch kleiner aussehen, wie ein Button, der immer mindestens 44px hoch und breit ist.

• Bild einfügen vorher

Wir sehen im nachfolgenden HTML-Snippet, dass der umschließende Span die Badge-Hintergrundfarbe bestimmt. Da der Button innerhalb des Span ist, wird die Hintergrundfarbe auch auf den Button gesetzt. Der Button muss mindestens 44px hoch und breit sein, also wird auch der äußere Span mindestens 44px hoch und breit. Das wollen wir nicht.

<span class="smart-button" style="background-color: rgb(204, 222, 218); color: rgb(0, 78, 55);">
 <kol-span-wc class="hydrated">
  <span>
   <span>Badge mit Schalter</span>
  </span>
 </kol-span-wc>
 <kol-button-wc _hide-label="" class="hydrated">
  <button aria-labelledby="cf22bf" class="normal icon-only" type="button">
   <kol-span-wc class="icon-only hydrated" _hide-label="">
    <span>
     <kol-icon class="icon left hydrated" style=""></kol-icon>
    </span>
   </kol-span-wc>
  </button>
  <kol-tooltip aria-hidden="true" class="hydrated">
   <div id="floating" style="left: 1233.91px; top: 312.5px; display: none; visibility: hidden;">
    <div id="arrow" style="left: 19px; bottom: -5px;"></div>
    <kol-badge id="cf22bf" class="hydrated" style=""></kol-badge>
   </div>
  </kol-tooltip>
 </kol-button-wc>
</span>

Lösung​

Idee 1​

Wir optimieren die Komponente, indem wir die Hintergrundfarbe vom umschließenden Span entfernen und auf die beiden inneren Span-Elemente übertragen.

<span class="smart-button" style="color: rgb(0, 78, 55);">
 <kol-span-wc class="hydrated" style="background-color: rgb(204, 222, 218);">
  <span>
   <span>Badge mit Schalter</span>
  </span>
 </kol-span-wc>
 <kol-button-wc _hide-label="" class="hydrated">
  <button aria-labelledby="cf22bf" class="normal icon-only" type="button">
   <kol-span-wc class="icon-only hydrated" _hide-label="" style="background-color: rgb(204, 222, 218);">
    <span>
     <kol-icon class="icon left hydrated" style=""></kol-icon>
    </span>
   </kol-span-wc>
  </button>
  <kol-tooltip aria-hidden="true" class="hydrated">
   <div id="floating" style="left: 1233.91px; top: 312.5px; display: none; visibility: hidden;">
    <div id="arrow" style="left: 19px; bottom: -5px;"></div>
    <kol-badge id="cf22bf" class="hydrated" style=""></kol-badge>
   </div>
  </kol-tooltip>
 </kol-button-wc>
</span>

Das geht aber nicht, weil wir an den 2. Span nicht rankommen. Wir müssen also eine andere Lösung finden.

Idee 2​

Es bleibt beim der initialen Komponenten-Konstruktion. Wir versuchen es mit CSS und erzwingen eine Zeilenhöhe für den umschließenden Span.

• Bild Heihgt 1.75rem einfügen

Wir sehen im Bild, dass der linke Rand des Button oben rausragt. Das können wir aber leicht lösen, indem wir den linken Rand des Buttons auf 0 setzen und stattdessen einen rechten Rand am Text-Span setzen.

Ein großer Vorteil von KoliBri liegt in seiner besonders guten Wiederverwendbarkeit und hohen Flexiblität. Denn auf Basis der semantisch barrierefreien Komponenten, in denen alle technische und gesetzliche Anforderungen umgesetzt sind, können eigene Themes unabhängig erstellt werden.

Rückblick​

KoliBri wurde als internes Projekt des ITZBund realisiert und hat sich natürlich dabei anfangs vor allem auf die Bedürfnisse interner Projekte fokussiert. Hierbei sind in erster Linie zahlreiche Themes umgesetzt worden, die nur intern Anwendung finden.

Darüber hinaus wurden auch einige Themes zum Zwecke der Verbesserung umgesetzt, die als Proof-of-Concepts (PoC) dienten.

Migration​

Wir beschreiben jetzt hier in der Migration einfach mal, wie wir das im ITZBund exemplarisch umgesetzt haben, weil dass sicher ein interessanter Aspekt für andere Behörden, Organisationen und Unternehmen ist, wie sie eigene Themes intern bereitstellen können.

Im Grunde haben wir ein neues Repository angelegt und ein Theme-Projekt erstellt (siehe nächsten Abschnitt), in dem wir alle internen Themes pflegen. Wir haben erstmal alle Themes in einem Repository, weil wir das für die Entwicklung aktuell einfacher finden. Es ist aber auch möglich, die Themes in unterschiedlichen Repositories jeweils einzeln zu pflegen.

Mittels des TypeScript-Compilers wird das Theme-Projekt in ein JavaScript-Projekt kompiliert und als NPM-Paket @itzbund/interne-kolibri-themes in unsere interne NPM-Registry versioniert gepublished.

Damit die entwickelnden Projekte jetzt das neue Theme-Paket installieren und verwenden können, muss zunächst die NPM-Konfiguration .npmrc im Projekt-Verzeichnis erweitert und die neue Abhängigkeit in die package.json hinzugefügt werden.

.npmrc (kann mit im Projekt-Verzeichnis liegen oder im Home-Verzeichnis des Benutzers)

@itzbund:registry=https://<URL-zur-internen-registry>

package.json (im Projekt-Verzeichnis)

{
 "dependencies": {
  "@itzbund/interne-kolibri-themes": "1.0.0"
 }
}

Eigenes Theme erstellen​

In diesem Abschnitt wollen wir einen kurzen Einblick geben, wie einfach es ist, ein eigenes Theme zu erstellen.

Rationale​

Einer der wichtigsten Punkte, die man verstehen muss, liegt darin, dass KoliBri sich auf kleinteilige häufig wiederverwendete Komponenten konzentriert (mehr hierzu im ). Das führt dazu, dass wir uns vorallem auf standardisierbare Komponenten fokussieren. Deutlicher wird dies, wenn wir uns vorstellen, eine redundante Umsetzung einer Basis-Komponente unter Beachtung der technischen und gesetzlichen Anforderungen zu entwickeln und am Ende feststellen - die verhält sich ja genauso, wie eine KoliBri- Komponente und ist nahezu gleich semantisch aufgebaut. Insbesondere die technisch semantischen Vorgaben des W3C für die assistive Unterstützung (Barrierefreiheit) fördern das Standardisierungspotenzial.

Wir können somit von einer hohen Überdeckung von Komponenten ausgehen, die allgemein jedes Design System oder Komponenten-Bibliothek beinhalten und sich in der KoliBri-Sammlung verwendbar wiederfinden. Durch das Kompositionsprinzip kann einfach die passende Teilmenge aus KoliBri ausgewählt und wiederverwendet werden. Alle nicht vereinbarten Komponenten können unabhängig von KoliBri und unternehmensspezifisch umgesetzt werden.

Hinweis: Es ist immer möglich eine Konstellation gegen die Wiederverwendung einer KoliBri-Komponenten aufzustellen, die auf die Abweichung von der Referenzimplementierung abzielt. Es ist nicht unsere Entscheidung ob die aufgezeigte Abweichung eine vollständige Eigenentwicklung wirtschaftlich und ökonomisch rechtfertigt. Wir bieten eine Lösung an, die von alle frei und geprüft genutzt werden kann.

Umsetzung​

Mit Hilfe der KoliBri-CLI (npm init kolibri my-theme) kann ein neues Theme-Projekt generiert werden. Das Theme-Projekt ist ein TypeScript-Projekt und beinhalten schon ein Dummy-Theme. Mit Hilfe des KoliBri-Designers kann dann ein Theme interaktiv auf den Basis-Komponenten erstellt, gespeichert, geladen und weiter gepflegt werden. Der vom Designer generierte Code wird einfach in das Theme-Projekt kopiert und kann dann mit dem TypeScript-Compiler kompiliert werden. Anschließend kann es mittels NPM eine interne oder in die öffentliche NPM-Registry gepublished werden.