Kann man Bootstrap mit Contao betreiben?

Aber beginnen wir von vorne:

LESS CSS

Wer sich Twitters Bootstrap genauer anschaut, wird feststellen, dass empfohlen wird, für die CSS-Sammlung auf die LESS-CSS Dateien zurückzugreifen. Nun könnte man per Javascript dafür sorgen, dass die LESS-Dateien clientseitig kompiliert werden, aber wir haben ja mit Contao ein ziemlich gutes CMS im Hintergrund laufen,warum sollte das CMS nicht die Arbeit serverseitig übernehmen? Wir bringen also Contao einfach bei, mit LESS-Dateien umgehen zu können.

Da wir schon vorher mit der Erweiterung Stylesheets External gearbeitet haben, hat Phil in seiner Freizeit eine kleine Erweiterung geschrieben, mit der man Stylesheets External beibringt, LESS zu verstehen und umzuwandeln in normale CSS-Anweisungen.

Theoretisch wäre es auch möglich die Anweisungen wie bisher in CSS zu schreiben. Allerdings sind Tutorials und sämtliche Erleichterungen auf die Funktionsweise von LESS zugeschnitten (Mixins, Variablen, Grid-Layout), weshalb ich jedem dazu rate, sich vorher mit LESS zu beschäftigen, bevor er beschließt, Bootstrap nur als CSS-Styling Sammlung in Contao zu sehen, aus der man sich die jeweils benötigten Snippets rauskopiert.

GRID-System

Wer das Grid-System, von Bootstrap in Contao nutzen möchte, der wird außerdem feststellen, dass er in den Seitenlayouts nun besser ein paar Einstellungen weniger macht. Dort, wo man vorher die Breite der linken und/oder rechten Spalte gewählt hat, sollen diese nun direkt aus der CSS ihre Weiten bekommen. Dies ist besonders wichtig, wenn die Webseite „responsive“ sein soll.

HTML5 und CSS3

Wer alle Funktionen von Boostrap nutzen will, wird nicht drum herum kommen, sein Projekt mit HTML5 umzusetzen (Danke @joldag. Glücklicherweise mit Contao kein Problem, da HTML5 schon seit ein paar Monaten unterstützt wird.

Was CSS3 betrifft, findet man sehr viele Hinweise darauf, dass der Internet Explorer Nutzer nicht im Fokus von Bootstrap stand. Buttons und Navigationen kommen standardmäßig mit abgerundeten Ecken und Verläufen daher, wohlwissend, dass diese Elemente im IE erstmal nicht so schön aussehen (außer man bringt es ihm per JavaScript bei, was teilweise sehr zu Lasten der Performance geht).

BTW: Hat man sich die am häufigsten verwendeten Mixins für Verläufe und abgerundete Ecken einmal angesehen, ist man schon froh über die Erleichterung, dass man die ganzen Vendor-Prefixes nicht jedes Mal dazu schreiben muss.

Aber zurück zum Thema Bootstrap mit Contao nutzen: Stylesheets External kennt sehr viele der CSS3-Anweisungen bereits. Nichtsdestotrotz kann es sein, dass bei eingeschalteter Komprimierung die Erweiterung etwas zu gut meint und somit wichtige Anweisungen rausschmeißt. Hier heißt es ausprobieren.

Formulare

Geht es um Standardfunktionalitäten eines Formulars, so lässt sich für das angelegte Formular in Sekundenschnelle durch Bootstrap eine gewisse Grund-Schönheit erreichen. Komplizierter wird es dann, wenn man auch noch einen gewissen Standard an Usability einhalten will, was Contao ja schon von sich aus mitbringt. Da tauchen dann plötzlich Labels auf, die man in Bootstrap so eigentlich nicht vorgesehen hatte. Da wir allerdings bisher vor allen Dingen mit den Standards gearbeitet haben, kann ich nicht sagen, welche Probleme sich im Bereich der Formulare u.U. noch ergeben könnten. Ich bin mir aber sicher, dass es welche geben wird, da in Contao doch der ein oder andere DIV-Container mehr gesetzt wurde und so die unmittelbar benachbarten Inputfelder auseinanderzerrt wurden. Möglicherweise hilft jedoch ein Anpassen der Form-Templates.

Fazit: Es ist durchaus möglich sich Bootstrap innerhalb einer Contao-Installation zu Nutze zu machen. Meine Empfehlungen sind u.a.:

• LESS-Kenntnisse
• Stylesheets External + LESS-Erweiterung
• Anpassungen am Seitenlayout (wegen den inline-Styles)
• CSS3 Kenntnisse

Da Bootstrap aber nicht explizit für Contao erstellt wurde, findet man immer Bereiche, wo doch noch mal Hand anlegen muss. Sei es in den Contao-Templates oder in den LESS-Dateien, wo man die ein oder andere Anweisung überschreibt.

Jetzt seid gefragt. Habt ihr schon Erfahrungen mit Bootstrap in Zusammenhang mit Contao gemacht? Wird vielleicht Contao 3 einen Schritt in Richtung Bootstrap machen? Eure Meinungen wie immer gerne in die Kommentare oder per Mail an mich.