Bootstrap 5 in Joomla 4

Das Joomla Projekt hat am 22. Januar angekündigt, die neue Version Joomla 4 mit der neuen Version des CSS/JS Frameworks Bootstrap 5 auszuliefern. Beide Projekte sind momentan noch im Beta-Stadium. Joomla ist, nach WordPress, das meist verbreitete Content Management System und Bootstrap das meist verbreitete CSS/JS Framework. Die Entscheidung ist insofern wichtig, weil die Auswahl eines Frameworks als Basis von Joomla natürlich Abhängigkeiten schafft. Wenn in Bootstrap Änderungen umgesetzt werden, müssen diese Änderungen auch in Joomla nachvollzogen werden. Als Joomla 3 vor mehr als 8 Jahren erschien, wurde es gemeinsam mit Bootstrap in der Version 2 ausgeliefert. In der Zwischenzeit entwickelte sich Bootstrap schneller als Joomla und es war in der Vergangenheit durchaus eine Herausforderung für das Joomla Projekt angemessen mit neueren Bootstrap Versionen umzugehen. Von daher ist es logisch bei der neuen Joomla Version gleich die neue Version Bootstrap 5 zu verwenden. Aber warum nimmt man überhaupt Bootstrap?

Was ist Bootstrap?

Bootstrap ist eine Sammlung von wiederverwendbaren Komponenten, CSS Stylesheets, einem Gründgerüst für responsives Webdesign und viele JavaScript Plugins. Um Bootstrap in einer HTML Seite nutzen zu können, muss lediglich eine CSS- und eine JavaSript-Datei eingebunden werden (siehe auch Eine One-Page Website mit Bootstrap – 30.01.2017). Was so einfach klingt, ist immer wieder eine Herausforderung für die meisten Web-Agenturen und Unternehmen. Es existieren zahlreiche Websites, Backends, Prototypen und Entwürfe in denen das „designtechnische“ Rad buchstäblich immer neu erfunden wird.

Um genau das zu verhindern, entwickelte die Firma Twitter intern ein „Werkzeug“. Dieses Werkzeug war so erfolgreich, dass es nach einer Lügengeschichte des Barons von Münchhausen benannt wurde. Der Baron behauptete, dass er sich an den eigenen Haaren aus einem Sumpf zog. Die Geschichte hinterließ auch ein englisch sprachiges Sprichwort: „Pull oneself up by one’s bootstraps“.

[…] eine sehr kleine Gruppe von Entwicklern und ich haben uns zusammengesetzt, um ein neues internes Werkzeug zu gestalten und sahen dabei die Möglichkeit, mehr daraus zu machen. Während des Prozesses stellten wir fest, dass wir dabei waren, etwas zu erschaffen, was wesentlich weitreichender war als nur ein weiteres internes Werkzeug. Monate später hielten wir eine frühe Version von Bootstrap in den Händen, welche allgemeine Entwurfsmuster und Erkenntnisse innerhalb der Firma dokumentierte.“

Mark Otto: In seinem persönlichen Blog zur Entwicklung von Bootstrap – https://de.wikipedia.org/wiki/Bootstrap_(Framework)

Bootstrap from Twitter wurde 2011 Open Source und kam genau zur richtigen Zeit. Google verkündete damals die Strategie „Mobile First“ und Bootstrap bot aus dem Stand Komponenten für responsive „Mobile First“ Websites. So richtig gut funktionierte das mit den responsiven Websites allerdings erst unter Bootstrap 3.

Joomla hatte Pech mit dem Timing und baute in die 3er Version von Joomla zunächst Bootstrap 2 ein. Diese Entscheidung hatte zur Folge, dass eine der grösseren Herausforderungen bei der Nutzung von Joomla die Aktualisierung auf Bootstrap 3 und später Bootstrap 4 war.

So grundsätzlich passt Bootstrap allerdings gut zu Joomla. Genau wie Joomla verwendet Bootstrap einen objektorientierten Ansatz. Dieser entwickelte sich schnell zu einem de facto Standard in der Webentwicklung.

Der grosse Vorteil von Bootstrap sind vordefinierten Komponenten. Diese Komponenten sind in CSS-Klassen aufgeteilt und eine Kombination dieser Klassen erlaubt eine sehr einfache Entwicklung und grobe Individualisierung ohne tiefergehende CSS Kenntnisse. Der Einstieg in Bootstrap ist sehr niederschwellig und je mehr Komponenten und Klassen man so nach und entdeckt, desto individueller lässt sich das Layout gestalten.

Die Philosophie hinter Bootstrap spiegelt auch gut die Idee des Selbstbilds eines Unternehmens wieder, die sogenannte Corporate Identity oder kurz CI.

Corporate Identity ist der Prozess, durch den kulturelle Identität entsteht und weiterentwickelt wird.“ „… wenn die Unternehmenskultur eigenständig, konkret und sinnstiftend ausgeprägt ist und mit ihren Ausdrucksformen eine authentische Ganzheit bildet“

A. B. Schnyder: Zeitschrift: Führung + Organisation im Jahr 1991

Das Konzept der CI beruht auf der Annahme, dass Unternehmen als soziale Systeme wie Personen wahrgenommen werden und ähnlich handeln können. Insofern wird dem Unternehmen eine quasi menschliche Persönlichkeit zugesprochen, beziehungsweise wird es als Aufgabe der Unternehmenskommunikation angesehen, dem Unternehmen zu einer solchen Identität zu verhelfen. 

https://de.wikipedia.org/wiki/Corporate_Identity

Die Corporate Identity (CI) wurde damals in aufwendigen Prozessen entwickelt. Jede grössere Firma hatte einen seitenlangen Katalog zum Thema Corporate Design, der ganz konkrete Anweisungen für Designer enthielt, wie sich das Unternehmen nach aussen darzustellen gedenkt. Das sichtbarste Zeichen für Aussenstehende waren einheitliche Logos, eigens erstellte Schriftarten, besondere Farben und Formen, die dann konsequent im gesamten Unternehmen verwendet wurden.

Eine CI lässt sich hervorragend mit objektorientierten Methoden beschreiben. Ein gutes Beispiel sind die typischen Apple Tische.

In eigens abgetrennten und gesicherten Räumen werden neue Tischmodelle entworfen und Apple präsentiert. So war Dula unter anderem für die Apple-Watch-Präsentationsflächen verantwortlich – und zwar schon mehr als ein Jahr vor der Veröffentlichung der Computeruhr.

https://www.heise.de/mac-and-i/meldung/Deutscher-Ladenbauer-stellt-Tische-fuer-Apple-Stores-her-2763936.html

Nachdem der typische Apple-Tisch entworfen und Apple überzeugt davon war, die Liefer- und Produktionsketten eingerichtet waren, liess sich die Einrichtung von Apple Stores gut planen und vor allem skalieren. Jeder neue Apple Store war, wenn man objektorientiert denkt, „nur“ die Instanz vordefinierter Klassen, die einen Apple Store ausmachen, also die Tische, die Treppen, die Fenster, die Regale und vieles andere mehr.

Genauso so funktioniert Bootstrap. Vordefinierte Komponenten werden an bestimmten Stellen der Website positioniert. Farbe und Schrift kann verändert werden.

Das ist auf der einen Seite ganz wunderbar, weil einem die Arbeit für die Erstellung der Komponenten von Bootstrap abgenommen wird. Auf der anderen Seite definiert Bootstrap gerade durch die Existenz dieser Komponenten in einem gewissen Mass das Aussehen, die Struktur und die Anmutung einer Website.

Jede Komponente lässt sich natürlich anpassen und individualisieren, aber auch die Anpassung bezieht sich dann auf alle Buttons, alle Tabellen, alle Bilder und alle Überschriften.

Für ein modularisiertes Content Management System, dessen Aufgabe es ist, Inhalte mit größtmöglicher Effizienz und Standardisierung zu verwalten, ist diese Vorgehensweise hervorragend. Auch bei Drupal sind Bootstrap basierte Themes erste Wahl und mit grossem Abstand am weitesten verbreitet (https://www.drupal.org/project/usage/bootstrap).

Ist Bootstrap noch auf der Höhe der Zeit?

Seit mehreren Jahren verändert sich Webentwicklung allerdings ganz erheblich. Frontend-Entwicklung wird immer individueller und Content Management Systeme werden aus diesem Grund oft Headless betrieben. Headless heisst in diesem Zusammenhang, dass der Inhalt nach wie vor im CMS verwaltet wird, das Frontend aber völlig unabhängig davon erstellt wird. Die Kommunikation zwischen Frontend und den Daten erfolgt über APIs. Das CMS hat durch diese Vorgehensweise kein „allgemeines“ Frontend mehr und sollte möglichst unabhängig von CSS/JS Frameworks sein. Das Frontend wird in diesem Fällen komplett neu erstellt und die Bedeutung eines allgemeinen CMS nimmt grundsätzlich ab. Immer öfter wird auch das Backend individuell neu entwickelt.

Aber auch in den Fällen, in denen das vordefinierte Front- und Backend eines CMS verwendet wird, kann sich der ursprüngliche Vorteil von Bootstrap zum Nachteil entwickeln. Wenn beispielsweise ein A/B Test das Ergebnis hat, dass dieser oder jener Button eine andere Grösse oder mehr Padding benötigt um ein gewünschtes Verhalten bei der Person, die die Seite besucht, zu erreichen, so ist das mit Bootstrap relativ mühselig zu erstellen. Genau diese Unterschiede sollten ja ursprünglich vermieden, beziehungsweise auf definierte Versionen eingeschränkt, werden, um ein Corporate Design zu gewährleisten.

Mittlerweile hat sich auch auch die Corporate Identity in viele Untergruppen verzweigt. Das Corporate Design ist nur ein kleiner Bereich der CI. Bereiche wie Corporate Communication, Corporate Culture, Corporate Language, Corporate Philosophy und, wichtig im Zeitalter von Social Media, Corporate Soul werden immer wichtiger und beschäftigen nach wie vor ganze Abteilungen. Ein Unternehmen möchte heute für jede Zielgruppe passend dargestellt werden. Und wenn die eine Zielgruppe einen angepassten Button benötigt, dann muss das entsprechend umgesetzt werden.

Der einfache Code in Bootstrap um einen Button darzustellen ist in einem solchen Szenario viel zu grob.

Bootstrap Button

<button type="button" class="btn btn-primary">Primary</button>

Tailwind CSS Button

Das interessante Projekt Tailwind CSS, das seit 2017 immer beliebter wird, nimmt die Idee der Standardisierung von Bootstrap auf, lässt sich aber im Einzelfall individueller anpassen. Beim Tailwind Button lassen sich die Rundung der Ecken, die Farbe der Schrift und viele andere Kleinigkeiten definieren. Die Komplexität verlagert sich vom CSS ins HTML.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Um es mal flapsig auszudrücken

• In Bootstrap befinden sich viele grosse CSS Klassen und man benötigt relativ wenig HTML
• In Projekten wie Tailwind befinden sich kleinere CSS Klassen, die dann relativ viel HTML benötigen, um eine Wirkung zu erzielen.

Entwicklungstechnisch bedeutet das, dass man in Bootstrap schnell und mit wenig Vorwissen aus vordefinierten Komponenten wiedererkennbare Seiten erstellen kann.

Projekte wie Tailwind dagegen sind gut geeignet um spezielle Designs, die unabhängig vom verwendeten System entstanden sind, umzusetzen, also eher das klassische Agenturgeschäft ermöglichen.

Bootstrap 5

Die fünfte Version von Bootstrap, die momentan als Beta vorliegt, versucht den Spagat zwischen standardisierter Modularisierung und individueller Anpassbarkeit.

• Der frühere Zwang, die jQuery JavaScript Bibliothek zu verwenden entfällt. Bootstrap 5 verhält sich neutral und arbeitet nun auch mit Frameworks wie Vue.js und React zusammen.
• Der Support für für den Internet Explorer in der Version 10 und 11 entfällt. Dadurch wird der Weg frei für modernere CSS Techniken
• Variablen lassen sich ausser bei Farben und Schriftarten nun auch auch im Layout, beispielsweise in Tabellen, nutzen.
• Die Farbpaletten werden erweitert, um beispielsweise einen Button, der „ein wenig heller“ dargestellt werden soll, einfacher zu erstellen ($blue-100)
• Die Formular-Elemente erlauben eine Individualisierung. In den vorherigen Bootstrap Versionen wurden sie vom jeweiligen Browser übernommen.
• Die neue Utilities API basiert auf Sass maps und ermöglicht beispielsweise responsive Einstellungen für Breakpoints.
• Das in Bootstrap 4 eingeführte Grid System wird erweitert, beispielsweise um ein neues XXL-Format
• Bootstrap enthält standardmässig Support für RTL (Rechts nach Links) Sprachen
• Eine neue Customize Sektion ermöglicht die einfachere Anpassbarkeit der grundlegenden Bootstrap Sass Dateien
• Tooltips und Popovers benutzen nun die die neue Version von Popper.js
• Bootstrap bietet mehr als 1,000 SVG Icons an und es gibt eine überarbeitete und verbesserte Dokumentation.

Fazit

Wie man die Entscheidung des Joomla Projekts betrachtet kommt auf den Standpunkt und natürlich die Anforderungen an. Ist man eher an Individualisierung oder an Standardisierung interessiert?

Bootstrap ist nach wie vor das am weitesten verbreitete CSS Framework und passt daher gerade in seiner neuen Version sicher gut zu Joomla 4.

Links

• Joomla! 4.0 will ship with Bootstrap 5 https://developer.joomla.org/news/839-joomla-4-0-will-ship-with-bootstrap-5.html
• Bootstrap – https://getbootstrap.com
• tailwindcss – https://tailwindcss.com

tl;dr: