Bootstrap & TYPO3

Bootstrap... Ich gebe zu, dieses großartige Framework erst vor Kurzem kennengelernt zu haben. Aber seitdem ist es Teil von so ziemlich jedem Projekt. Wenn Sie sich unsicher sind, ob Sie bei Ihrem nächsten Projekt Bootstrap einsetzen wollen, hier ein paar kurzgefasste Argumente.

Was ist Bootstrap?

Bootstrap ist eine freie (Open Source) Sammlung von CSS und JavaScript - basierend auf jQuery. Das Framework bietet nach dem Gestaltungsprinzip "Mobile First" (s.u.) zahlreiche Gestaltungselemente wie Grids, Tabellen, Typografien etc. an, also alles, was einem im täglichen Umgang mit Websites begegnet. Dazu erhält der Webdesigner/-entwickler mit Glyphicons eine umfangreiche Sammlung von Icon-Fonts (ähnlich wie die Schriftart Webdings für MS-Office, nur eben als web-optimierte Schriftart).

Exkurs: "Mobile First"?

Mobile First bedeutet, dass von der kleinsten Bildschirmgröße (z.B. iPhone) ausgegangen und das Stylesheet dahingehend erstellt wird. Über sog. Media Queries, also CSS-Angaben für unterschiedliche Bildschirmgrößen usw. werden nun die nächst größeren Bildschirme mit einbezogen und das CSS dahingehend angepasst.
Kurz gesagt: Man geht beim Layouten vom mobilen Endgerät zur Desktop-Darstellung.
Desktop First verhält sich genau andersherum.

Vorteile von Bootstrap

1. Der Hauptvorteil ist eindeutig die Optimierung für mobile Endgeräte nach dem Ansatz "Mobile First". Auch Bilder, Tabellen etc. können mit entsprechender Klassenauszeichnung für mobile Geräte optimiert werden. Man spart sich somit einiges an Arbeit.

2. Sehr praktisches Grid-System auch für komplexe Layouts.

3. Die JavaScript-Bibliothek: Carousel (z.B. als Image-Slider), Modal-Boxes, Scrollspy, Affix, Popover, Tooltips u.v.m. sind sehr leicht zu integrieren und sorgen dazu für schöne Effekte.

Nachteile von Bootstrap

1. Das CSS hat gut und gerne 100 KB. Für Seiten die vor allem performant laufen müssen bedeutet das zusätzliche Ladezeit. Dafür spart man sich einiges an eigenem CSS.

2. Man muss sich erstmal in die Klassenlogik einarbeiten.

3. Nicht immer macht Mobile First Sinn. Zumeist wird es zu einer Mischung aus Mobile und Desktop First kommen. Dadurch muss man noch eigene responsive Anweisungen erstellen.

4. Bootstrap unterstützt ausschließlich CSS3 und HTML5 und bietet auch keine Fallbacks. D.h. alte Browser haben das Nachsehen. Bei B2C-Websites nicht so das Problem, bei B2B schon eher, da in vielen Firmen noch der IE7/8 Browser der Wahl ist (liebe Verantwortliche, nicht nur das der IE macht was er will, wir sind mittlerweile bei der Version 11 und WindowsXP wird ab April nicht mehr aktualisiert!).
Ggf. sollte hier html5shiv.js sowie modernizr.js eingesetzt werden, um zumindest dieser Zielgruppe ein wenig entgegenzukommen.

5. Gerade bei TYPO3 muss man ggf. tief ins TypoScript einsteigen um Anpassungen vorzunehmen.

Bootstrap und TYPO3

TYPO3 kommt bereits mit einem reichlichen Fundus an CSS daher. Bootstrap wird also überwiegend bei gewrappten Elementen eingesetzt. Um auch von TYPO3 gerenderten Inhalten entsprechende Klassen zuzuweisen, muss man sein TypoScript entsprechend anpassen. Das kann mal mehr, mal weniger komplex ausfallen. Vor allem sollte man sich das TypoScript-Setup von css_styled_content genau ansehen. Anpassungen erfolgen vor allem hier, will man Bootstrap nahezu "voll" einsetzen. Der Aufwand lohnt sich jedoch, da man gleich responsiven Content erhält. Es bleibt jedoch nicht aus, sich tiefer in die Materie TypoScript einzuarbeiten.

Lohnt sich der Einsatz von Bootstrap in meinem TYPO3-Projekt?

Bei Layouts mit einem komplexen Grid-System lohnt sich Bootstrap auf jeden Fall. Es bringt eine sehr gute Klassenbibliothek mit und ist von Anfang an für Bildschirme mobiler Geräte optimiert. Das eigene CSS reduziert sich und die Gefahr fehlerhafter Darstellung in den verschiedensten (neuen) Browsern wird verringert.

Bei einfachen oder sehr minimalistischen Layouts ist es meiner Ansicht nach fraglich ob sich der Einsatz lohnt. Bietet die Seite weder Onepage- oder Flat-Design, hat sie eine klassische Seiten- und Navigationsstruktur sowie relativ wenig unterschiedlichen Inhalt, fährt man mit eigenem CSS und JavaScript besser. außerdem reduziert es die Ladezeit, wenn keine zusätzlichen Scripte gezogen werden müssen. 

Wie bei so vielem muss jeder selbst entscheiden, ob sich Bootstrap für sein Projekt lohnt. Je komplexer ein Projekt ist, umso eher lohnt sich der Einsatz. Besteht eine Website hingegen aus eher "klassischen" Elementen (Navigation, keine Grids etc.) wird man eher zu einer eigenen Lösung greifen.