Bootstrap 5 für Navigation und Slider: Georgienseite mit TYPO3

Was ist der Feind des Guten? Das Bessere! Wenn man eine TYPO3 Webseite betreibt, ist man stets umgetrieben, ob man für eine bestehende Lösung nicht vielleicht eine bessere Option findet. Im Fall des CSS und JavaScript Frameworks Bootstrap war das im Upgrade von der Version 4 auf 5 der Fall. Eigentlich nur eine kleine Verbesserung, sollte man meinen. Dann stellt sich heraus, dass es einige signifikante Verbesserung und neue Möglichkeiten gegeben hat. Hier ein paar Auszüge: 

• Die Navbar ist gegenüber der Version Bootstrap 4 noch schlanker im Quelltext 
• Der Slider ist mit neuem Grunddesign und Funktionen ausgestattet 
• Eigene Klassen besorgen im CSS Formatierungen mit Flex und Grid ohne große Klimmzüge im Style Sheet 
• Und schließlich: Bootstrap 5 kommt ohne jQuery aus! 

Gut, es ist vielleicht eine Frage des Glaubens, aber ich glaube wie viele andere Entwickler auch an schlanken Code bei Webseiten und bin gegen jeden Ballast. Warum habe ich seit meinem letzten langjährigen Arbeitgeber 20 Kilo weniger Speck auf den Rippen? Also legt man jedes Tool auf der Webseite auf die Waage. Brauche ist das überhaupt? Bei der Georgienseite haben wir das Jahr 2021 hindurch einen längeren Frühjahrsputz vollzogen. Das fing an mit neuen Schrifttypen, die eine erheblich geringe Ladezeit haben als die bisher verwendeten. Bei den Tools, die wir auf der Georgienseite einsetzen, kam die Frage auf, ob wirklich alle jQuery für eine ordentliche Funktionen brauchen. Da ergab sich Die TYPO3 Extension Powermail für das Kontaktformular mit Parsley für die Fehlerkontrolle beim Ausfüllen des Formulars. Und natürlich die Bildergalerien. Damit war der Gedanke klar: Wir nehmen jQuery aus dem Standard heraus und machen das Upgrade auf Bootstrap 5. 

Navigation mit Bootstrap 5 und Menu über 4 Ebenen

Seit wir die Georgienseite im Rahmen des letzten TYPO3 Upgrades mit der neuen Navigation ausgestattet haben, ist eine zweistellige Zahl neuer Seiten hinzugekommen. Unser SEO-Tool regt uns dazu an, die Zahl der Links zu reduzieren. Viele Seiten sind umgezogen. Da sitzt man dann nach einem Arbeitstag vor dem Bildschirm mit 24 Zoll vor seinem 5 Zoll Smartphone und denkt in der Rolle des Users darüber nach, ob man wirklich die optimale Lösung gefunden hat. 

Und kommt zu dem Schluss: Probieren wir mal was Anderes. 

Das MegaMenu ist zwar eine wunderbare Sache, aber mit einer NavBar zum Scrollen und aufklicken in Untermenus ist man auch nicht schlecht bedient. Der Clou dabei: Wir haben nun darauf verzichtet, eine horizontale Navigation für Desktop Bildschirme anzubieten, sondern eine responsive NavBar gleich so konzipiert, dass sie für alle Endgeräte passt. 

Die Bedienung der Navigation geschieht nun über ein Hamburger Symbol von Font Awesome, dass sich zeitverzögert dreht. JavaScript? Fehlanzeige. Die Animation kommt aus CSS3. Dies ist eines der Elemente, die man bequem mit jQuery machen kann, die wir aber bewusst angefasst haben, um jQuery nicht in jeder Seite einbinden zu müssen. 

Beim Aufklappen zeigt sich nun die erste Ebene, zusätzlich zur zweiten haben wir noch zwei weitere Ebenen hinzugefügt und per CSS an die richtige Stelle gebracht. Hinzu kommt noch eine Spielerei: Wir haben jedem Kapitel der ersten Ebene in der Georgienseite ein Font Awesome Symbol als wiedererkennbares Merkmal mitgegeben. Dieses Symbol findet sich auch oben in der Navigation wieder. 

Dafür haben wir die Möglichkeit genutzt, die Generierung des Source Code für die Navigation mit dem VHS Viewhelper zu erledigen. Hier war es recht einfach, über Conditions den Links der ersten Ebene ein Font Awesome Zeichen mitzugeben. Bedingungen nutzen wir auch für die Abfrage nach Kindern, um die Symbole zum Aufklappen für die dritte und vier Ebene zu schalten. 

Das Durchklicken durch die Navigation auf der Georgienseite ist nun leichter geworden. Im Vergleich zum Mega Menu sind die Schaltflächen für den Touchscreen größer. Seitdem sind auch die Meldungen der Google Search Console verschwunden, dass Elemente zu dich beieinander liegen. 

Slider aus Bootstrap anstatt Slick Slider

Ich liebe ja den Slick Slider und habe ihn nicht nur bei meinen eigenen Webseiten, sondern auch bei einigen Kundenprojekten eingesetzt. Aber der Slick Slider braucht jQuery und der Slider aus Bootstrap 5 nicht. Aus diesem Grund haben wir uns entschlossen, für die Slider auf der rechten Spalte (unsere Blogs) und die Startseite der Kapitel eine leichte Anpassung im Design vorzunehmen und das Carousel von Bootstrap 5 einzusetzen. Man hat nicht viele Möglichkeiten zur Konfiguration, aber für diesen Zweck ist das alles, was man braucht. Der große Vorteil natürlich: Man muss nicht mehr mehrere JavaScript Frameworks einsetzen; einmal Bootstrap 5 einbinden reicht. 

Anders sieht die Sache bei unseren Bildergalerien aus. Hier haben wir bewusst auf den Slick Slider gesetzt. Denn bei mehreren der Module haben wir oben eine große Ansicht eines Bildes und unten Thumbnails für eine Voransicht. Das geht mit dem Slick Slider ganz hervorragend, auch nach verschiedenen Auflösungen gestaffelt. Außerdem: Wir reden hier von Bildergalerien. Wenn man so etwas besucht, weiß man, dass da jede Menge Daten anfallen. Da darf ein JavaScript Framework auch mal mit insgesamt rund 100 KB ankommen. Für diesen Ast der Georgienseite haben wir ein Extension Template angelegt und dort jQuery eingebunden. 

Accordion Menu mit Bootstrap 5

Ein weiteres Modul, das Bootstrap 5 mitbringt, ist ein eigenes Accordion. Auch hier gilt natürlich, dass man im ersten Moment etwas weniger Möglichkeiten des Designs hat als bei anderen Accordions mit jQuery. Mit ein wenig CSS allerdings kommt man schon ziemlich weit. Und kann bei diesem Baustein der Navigation erneut die Einbindung von jQuery einsparen. 

Bootstrap 5: Vorteile im CSS mit Flex und Grid

Neben diesen Komponenten von Bootstrap 5 gibt es noch weitere Möglichkeiten, die bei der neuen Version zusätzlich zur Vorgängerversion hinein gekommen sind. 

• Über die Display Utility können wir steuern, ob ein Element an- oder abgeschaltet werden soll 
• Mit der Flex Utility können wir steuern, wie die vertikale und horizontale Ausrichtung sein soll 
• Die Display und Flex Utility sowie mehrere Andere können für Größenklassen gezielt angesteuert werden – damit lassen sich ohne Media Query im eigenen Style Sheet Ausrichtungen z. B. bei einem Footer Menu bequem anpassen 
• Über das Bootstrap Gutter können wir steuern, welchen Abstand horizontal oder vertikal Elemente haben sollen, unabhängig davon wie viele Elemente in einer Reihe stehen. Klimmzüge mit Media Queries im CSS sind auch hier nicht mehr nötig 
• Viele andere Layouts wie Farben, Schatten, Deckkraft (Opacity) oder Abstände können bequem über Klassen aus Bootstrap eingegeben werden 

Am Ende eines Entwickler Arbeitstages stellt man fest, dass man einige Minuten, vielleicht sogar noch mehr Zeit gespart hat. Das ist nicht der einzige Vorteil. Beim Design einer Seite erledigt man das Grundgerüst der Arbeiten bei einem Content Management System wie TYPO3 komplett im Fluid Template und geht nur ins CSS oder in SASS / LESS, um die letzten Feinheiten zu machen. Man spart eine Menge Quelltext. Wer schon einmal ein Projekt erlebt hat, bei dem ein früherer Kollege unter Zeitdruck kaputte Media Queries eingebaut hat, freut sich besonders über diese Standardisierungen.