Kann man Bootstrap mit Contao betreiben?

Gut, dass ihr fragt. Denn just in diesen Tagen setzen wir unser zweites Projekt mit eben dieser Kombination um. Während wir bei dem ersten Projekt nur ein paar der von Bootstrap angebotenen Möglichkeiten nutzten, gehen wir nun in die Vollen. Hier meine Erfahrungen.

Mitte Juni 2013 habe ich damit begonnen unsere Erfahrungen mit Bootstrap und Contao in ein eigenes Theme einfließen zu lassen. Weitere Informationen

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.

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

8 Kommentare

  1. Toni sagt:

    Hi Dennis! Ich bin mal gespannt. Ich werde heute ein Projekt beginnen und eine Contao 3 Installation mit Twitter Bootstrap verknüpfen!

    Ich werde mal berichten, wie es mir dabei ergangen ist!

    Viele Grüße,
    Toni

  2. herbert sagt:

    @Toni: und wie sieht die Sache aus? gibt es ggf. eine Seite wo man gucken kann?

  3. Marcus sagt:

    Gibt es schon Fortschritte? Evt eine Demo-Seite?

  4. Dennis Erdmann sagt:

    Vielen Dank für die Mails und Kommentare der letzten Tage. Ich habe mich nun rangemacht, diesen Artikel auf den neuesten Stand zu bringen. Außerdem will ich Teile unserer Contao-Anpassungen für Bootstrap auf Github zur Verfügung stellen.

    Wenn ihr Bootstrap einmal im Einsatz mit Contao sehen wollt, schaut euch den Relaunch der Segeberger Kliniken mal an. Die Seite nutzt das Grid von Bootstrap, die Buttons und Icons von Bootstrap, bzw. von Font Awesome.

  5. Daniel sagt:

    Hallo zusammen,

    das ist wirklich hoch interessant und ich freue mich über weitere Informationen zu diesem Thema!

    liebe Grüße,
    Daniel

  6. Stefan sagt:

    Also ich bin nach wie vor interessiert an einer einbindung von Bootstrap in Contao! Erfahrungen zu diesem Thema und auch Probleme beim Umsetzten würden mich brennend interessieren!

  7. Toni sagt:

    Hallo! Sorry, hatte leider nicht mehr auf diese Seite geschaut.

    Hier der Link der damaligen Seite von Januar 2013: http://www.skischuleflachau.at/de/

    Wir arbeiten gerade an einem neuen, weiteren Projekt mit BS3 und Contao.

    Viele Grüße,
    Toni

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *