Teil 7:
Das Bootstrap Grid in Contao
Im siebten Teil unserer Artikelserie CSS-Kurs für Contao erklären wir euch, wie ihr das Bootstrap Grid in Contao nutzen könnt. Wie funktioniert es? Wie lässt es sich integrieren? Und welche Einschränkungen gibt es?
Das Bootstrap-Framework und damit auch das darin enthaltene Grid, war das erste Grid, mit dem wir uns intensiver auseinandergesetzt haben. Und mit intensiver meine ich, dass wir uns wirklich angeschaut haben, wie das Bootstrap Grid aufgebaut ist. Von der generellen Funktionsweise bis hin zu jeder Zeile CSS, die dafür zum Einsatz kommt. Über die letzten Jahre haben wir dabei nicht nur die Entwicklung verfolgt, sondern auch die Stärken und Schwächen kennengelernt.
Mit diesem Artikel wollen wir euch den Einstieg erleichtern, Contao mit dem Bootstrap Grid zu verwenden. Und das, ohne jede Zeile CSS des Grids zu kennen.
Grundlagen des Bootstrap Grid
Im letzten Teil des CSS-Kurses sind wir bereits darauf eingegangen, dass es 2 Arten gibt, den Abstand zwischen den Spalten zu erzeugen: Entweder jede Spalte bekommt den vollen Abstand links oder die Hälfte des Abstands jeweils links und rechts zugeordnet (siehe Teil 6).
Bei dem Bootstrap Grid wurde in Version 2 noch der Abstand links zugeordnet wird, während man ab Version 3 nun den halben Abstand jeweils links und rechts zuordnet:
Unser Artikel bezieht sich auf das neue Grid seit Version 3!!!
Standardmäßig besteht das Grid aus 12 Spalten und ist auch darauf optimiert. Die Anzahl lässt sich aber für LESS- und SASS-Nutzer über die Variablen, oder für CSS-Nutzer über den Bootstrap Customizer anpassen.
Im Gegensatz zum Contao Grid, sind bei Bootstrap die Spaltenbreiten in Prozent angegeben, die Abstände zwischen den Spalten allerdings weiterhin in Pixeln. Standardmäßig sind das jeweils 15 Pixel links und rechts (ab Bootstrap Version 4 soll der Abstand in (R)EM angegeben werden). Außerdem unterstützt das Grid aktuell 4 Viewports: Extra Small (xs, <768px), Small (sm, ≥768px), Medium (md, ≥992px) und Large (lg, ≥1200px). Das Grid basiert dabei auf dem Mobile-First-Ansatz. Auch die jeweiligen Breakpoints lassen sich über die Variablen oder den Customizer anpassen.
Wichtig: Wer mit dem Bootstrap Grid arbeiten will, sollte sich von dem Gedanken verabschieden, ein pixelperfektes Layout umzusetzen. Durch die Breitenangaben in Prozent sind die Spalten häufig gerundete Werte. Es kann also durchaus passieren, dass in einem 4-spaltigen Layout 2 Spalten jeweils einen Pixel größer sind, als die anderen beiden. Das fällt aber, durch die gleichmäßigen Abstände, normalerweise nicht auf.
Basisdaten für das Bootstrap Grid:
- standardmäßig 12 Spalten Layout, Anzahl der Spalten lässt sich aber frei wählen
- prozent- und pixelbasierte Angaben
- Mobile First Ansatz
- 4 Viewports: Extra Small (Smartphone hoch + quer), Small (Tablet), Medium (Desktop), Large (große Desktops)
Funktionsweise des Bootstrap Grid
Um das Bootstrap Grid zu verwenden, empfehlen die Macher jeweils einen DIV-Container mit der Klasse .container anzulegen. In diesem befindet sich ein weiterer DIV-Container mit der Klasse .row, in dem sich die jeweiligen Elemente befinden, die am Grid ausgerichtet werden sollen:
<div class="container">
<div class="row">
<div class="col-sm-6">
…
</div>
<div class="col-sm-6">
…
</div>
</div>
</div>
Im Gegensatz zum contaoeigenen Grid kann beim Bootstrap Grid jedes Element pro Viewport eine individuelle Breite zugeordnet werden. Dafür werden einfach mehrere Klassen miteinander kombiniert. Möglich machen dies Grid-Klassen bzw. Klassen-Prefixe, die den jeweiligen Viewports zugeordnet sind:
Ein Beispiel
Wir haben insgesamt 6 Textboxen. Auf dem Tablet sollen jeweils 2 nebeneinander dargestellt werden, während auf dem Desktop auch Platz für 3 Boxen nebeneinander ist.
Um jeweils 2 Textboxen auf dem Tablet nebeneinander anzuzeigen, geben wir den 6 Boxen jeweils die Klasse .col-sm-6:
<div class="row">
<div class="col-sm-6">
…
</div>
<div class="col-sm-6">
…
</div>
<div class="col-sm-6">
…
</div>
<div class="col-sm-6">
…
</div>
<div class="col-sm-6">
…
</div>
<div class="col-sm-6">
…
</div>
</div>
Da das Bootstrap Grid nach dem Mobile-First-Ansatz aufgebaut ist, wird die zweispaltige auch für alle Viewports größer als Tablet (also md und lg)übernommen, es sei denn, die Anweisungen werden von einer anderen Klasse überschrieben, wie in unserem Fall. Um ab Desktop-Viewport jeweils 3 Textboxen nebeneinander darzustellen ergänzen wir die Boxen nun durch die Klasse .col-md-4:
<div class="row">
<div class="col-sm-6 col-md-4">
…
</div>
<div class="col-sm-6 col-md-4">
…
</div>
<div class="col-sm-6 col-md-4">
…
</div>
<div class="col-sm-6 col-md-4">
…
</div>
<div class="col-sm-6 col-md-4">
…
</div>
<div class="col-sm-6 col-md-4">
…
</div>
</div>
Dadurch werden die Anweisungen von .col-sm-6 ab Desktop-Größe überschrieben und es werden 3 Textboxen nebeneinander dargestellt.
Was bewirken die Klassen .container und .row?
Standardmäßig erhält jedes Spaltenelement (.col-) links und rechts ein padding von 15 Pixeln. Beim ersten und letzten Element einer Reihe ist dieser Abstand aber eigentlich unerwünscht, denn dadurch sind die Element nicht bündig zur Gesamtbreite:
Um die Spaltenelemente doch bündig zu bekommen, sollen die Spaltenelemente von einem .row-Container umschlossen werden. Dieser hat links und rechts einen negativen margin (standardmäßig –15px) und gleicht damit das padding des ersten und letzten Elements der Reihe aus. Die Spaltenelemente sind nun bündig und im Grid:
.row {
margin-left: -15px;
margin-right: -15px;
}
Um den negativen margin der .row-Klasse zu kompensieren und um zu verhindern, dass das Layout größer als die verfügbare Breite ist, besitzt .container ebenfalls ein padding links und rechts. Zusätzlich zwingt .container das Layout auf die im Viewport zur Verfügung stehende Breite (zzgl. 30 Pixel Spaltenabstand).
.container {
width: 970px // (viewport md)
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Den Sinn dahinter zu durchschauen ist nicht immer leicht. Gerade bei der .container-Klasse hat es eine Weile gedauert, bis wir verstanden haben, warum dieser ein padding links und rechts gegeben wird. Die Lösung liegt in der Darstellung auf Smartphones, also der Viewport, bei dem keine feste Breite angegeben ist. Damit der Inhalt dennoch einen Abstand links und rechts hat, wurden diese der .container-Klasse hinzugefügt.
Vor- und Nachteile des Bootstrap Grids
Vorteile:
Der wahrscheinlich größte Vorteil am Bootstrap Grid liegt in seiner Popularität. Das Bootstrap Framework ist unheimlich verbreitet und es sind dementsprechend viele Tutorials und Dokumentationen vorhanden. Dadurch, dass relativ viele Personen an und mit Bootstrap arbeiten, stehen die Chancen gut, dass das Framework und damit auch das Grid stetig weiterentwickelt werden.
Nachteile:
Wer das Contao Grid mit dem Bootstrap Grid vergleicht, stellt einerseits fest, dass es relativ viele Möglichkeiten gibt, er andererseits aber auch wesentlich länger braucht, um den Aufbau und die Funktionsweise des Grid-Frameworks zu verstehen. Obwohl die Dokumentation gut ist, dauert es doch eine Weile, das Grid für seine eigenen Bedürfnisse anzupassen oder, wie in unserem Fall, für Contao anzupassen.
Das Bootstrap Grid in Contao verwenden
Um mit dem Bootstrap Grid arbeiten zu können, müsst ihr eigentlich nur die entsprechenden CSS-Anweisungen in Contao laden. Der Teufel steckt aber wie so oft im Detail.
Installation & Konfiguration
Bootstrap bietet euch die Möglichkeit, entweder das Komplettpaket als CSS, eine Auswahl von CSS-Anweisungen über den Customizer zu erstellen oder die quelloffenen LESS- bzw. SASS-Dateien zu verwenden. Wenn ihr nicht mit LESS oder SASS arbeitet, empfehlen wir euch auf jeden Fall den Customizer zu verwenden, um die CSS-Datei so klein wie möglich zu halten. Da diese immer auch den CSS-Normalize und ein paar „unnötige Anweisungen“ für Schriftgröße, Farbe etc. enthält, haben wir für das Standard Bootstrap-Grid eine Light-Version für Contao erstellt.
Allgemeine Verwendung des Grids
Ist das Bootstrap Grid einmal eingebunden, könnt ihr es direkt verwenden. Wenn ihr also beispielsweise einem Text-Element die Klasse .col-md-6 gebt, sollte das Element in der Desktop-Ansicht nur noch 50% breit sein. Damit die Objekte aber auch tatsächlich die richtige Breite bekommen, ist es wichtig, dass sie mindestens innerhalb eines .row-Containers platziert werden.
Verwendung für Elemente
Wollt ihr Text-, Bild- oder ähnliche Elemente oder Module innerhalb eines Artikels im Grid anordnen ist es relativ einfach. Gebt dem Artikel die Klasse .row und die darin enthaltenen Elemente werden korrekt, also mit den richtigen Abständen und Breiten, angezeigt. Das klappt für einfache Grid-Darstellungen, also gefühlt in 9 von 10 Fällen, sehr gut. Wer allerdings mit komplexeren Grid-Layouts zu tun hat, oder wer es etwas übersichtlicher haben möchte, dem empfehlen wir die Bootstrap-Grid-Erweiterung von Netzmacht creative in Kombination mit Subcolumns von Felix Pfeiffer. Über einen eigenen Menüpunkt lassen sich Spaltensets anlegen und dann in Subcolumns (oder alternativ Semantic HTML5) abrufen.
Einziger Wermutstropfen: Die Dokumentation der Bootstrap-Grid-Erweiterung ist momentan noch sehr lückenhaft (David sucht aber Unterstützung, um dies zu ändern). Kleiner Tipp: die Erweiterung bringt selbst keine CSS-Anweisungen mit, das heißt ihr müsst sie selbst einbinden (siehe oben: Installation & Konfiguration). Ihr könnt auch unsere oben erwähnte bootstrap-grid.css verwenden.
Artikel und Module im Grid anordnen
Schwieriger wird es, wenn ihr ganze Artikel und/oder Module, die ihr im Seitenlayout zugewiesen habt, im Grid anordnen wollt. Denn hier ist der nächste, übergeordnete Container der .inside-Container des HEADER, FOOTER, MAIN- oder eures CUSTOM-Containers.
Genau hier stoßen wir an die Grenzen der Kombination von Contao mit dem Bootstrap Grid. Ihr könnt die Anweisungen (den negativen margin) von .row dem .inside-Container des jeweiligen Seitenbereichs zuordnen, dann müsst ihr aber auch den Objekten, die nicht im Grid angeordnet werden sollen, links und rechts das entsprechende padding geben. Außerdem sollten die Objekte ein clear: both erhalten. Bei uns sieht das dann in etwa so aus:
#footer .inside {
margin-left: -15px;
margin-right: -15px;
}
/* clearfix */
#footer .inside:before,
#footer .inside:after {
clear: both;
display: table;
content: " ";
}
#footer .inside > *:not([class*="col-"]) {
clear:both
padding-left: 15px;
padding-right: 15px;
}
Erklärung: Der Inside-Container des FOOTER bekommt die CSS-Anweisungen von .row, inkl. clearfix. Alle Objekte im FOOTER, die keine Klasse haben, die mit col- beginnt, sollen ebenfalls ein padding und ein clear erhalten.
Das Problem ist, dass Contao im Kern noch nicht für die Darstellung von Spalten-Layouts optimiert ist. Man sieht dies sehr gut an den Einstellungen im Seitenlayout, wo Einstellungen für 1-, 2- oder 3-spaltige Layouts mit linker und rechter Spalte immer noch Standard sind und Grid-Layouts mehr oder weniger als CSS-Dateien aktiviert werden können (da ist die Bootstrap-Grid-Erweiterung von Netzmacht schon einen deutlichen Schritt weiter).
Das bedeutet in letzter Konsequenz auch, dass es gar nicht so einfach ist, an jeder x-beliebigen Stelle zusätzliche DIV-Container mit Klassen für .container und .row einzufügen. Zumindest, wenn man nicht eine Vielzahl von eigenen Layoutbereichen und größere Template-Anpassungen vornehmen will.
Unser Fazit:
Wir verwenden jetzt schon seit einiger Zeit das Bootstrap Grid in Contao und sind dabei sogar ohne Erweiterungen ausgekommen. Ob mit oder ohne Erweiterung ist dabei unter Umständen auch eine Frage des Komforts und des Vertrauens.
Allerdings gibt es Situationen, in denen auch die Erweiterungen nicht helfen. Schwierig wird, sobald man das Grid Layout nicht mehr innerhalb eines Artikels verwenden will. Hier muss man abwägen, ob es sich lohnt die Contao-Templates anzupassen und die jeweiligen Klassen hinzuzufügen, ob man die CSS-Anweisungen des Bootstrap Grids kopiert und auf weitere Objekte anwendet oder ob man gleich die Anweisungen selbst schreibt. LESS- und SASS-Nutzer haben es da etwas einfacher und können – so wir wir – einfach auf die vorhandenen Mixins zurückgreifen.
Kommentare
Kommentar von Philipp |
Danke für den Artikel. Gerade die Erklärung mit dem negativen margin der Spalten links und rechts. Hatte genau das Problem heute bei WordPress und dem Foundation Framework.
Da ich aber in baldiger Zukunft eine bestehende Contao-Website und auch eine alte bestehende Website ohne CMS auf Contao mit Hilfe von Bootstrap responsiv gestalten will, hat mir der Artikel ein wenig Mut gemacht. Wenn auch ein wenig Skepsis bleibt.
Gruß und weiter so
Philipp
Antwort von Dennis Erdmann
Moin Philipp,
„Learning by Doing“ ist hier das richtige Stichwort. Man kann sich noch so viele Artikel und Tutorials zu Grid-Layouts und deren Funktionsweise ansehen, aber letztendlich hilft nur der Sprung ins kalte Wasser und selbst ausprobieren.
Aber das wird schon werden :-)
Kommentar von Nicolas |
Danke für den Artikel, habe es endlich mal geschafft ihn komplett zu lesen!
Eine Frage:
Benutzt ihr das Bootstrap-Grid nur für Inhalte oder auch für den kompletten Aufbau einer Website, sprich für Logo, Nav etc.?
Weitere Frage: Könntet ihr für euer Logbuch ein RSS-Feed anlegen? wäre super!
Antwort von Dennis Erdmann
Moin Nicolas,
sehr gute und berechtigte Frage. Wir nutzen das Grid vor allen Dingen für Inhalte. Das Logo richten wir eigentlich nie am Grid aus, bei der Navigation ab und zu bei Unternavigationen und häufiger bei Footernavigationen.
Unseren RSS-Feed findest du normalerweise am Ende eines jeden Artikels. Und wer lieber per E-Mail benachrichtigt werden will, für den gibt es unseren Newsletter (den du ja bereits abonniert hast).
Kommentar von Doro |
Herzlichen Dank für den sehr guten Artikel,
war für mich eine echte Ergänzung. Mögt Ihr bitte noch sagen warum Ihr normalize.css bei Eurem Grid-File rausgenommen habt?
"23.03 removed normalize from grid file"
und ist der file noch aktuell, ist ja inzwischen schon wieder fast ein halbes Jahr her. Ich würde gerne bei meinem 2ten Versuch mit Bootstrap auf die Erweiterung verzichten und einfach nur schlank mit dem grid-file arbeiten ohne den anderen "Kladderadatsch" :-) obwohl das schon toll ist was netzmacht da anbietet, keine Frage
Gruß D.
Antwort von Dennis Erdmann
Moin Doro,
ich habe die normalize Anweisungen entfernt, da sie sich doppeln würden, wenn wir die Contao-Reset-CSS einsetzen. Außerdem hatte ich das Gefühl, dass die Anweisungen in der Grid-Datei nicht so richtig gut aufgehoben wären.
Was die Aktualität betrifft:
Vor ein paar Tagen wurde die neue Version 4 von Bootstrap vorgestellt. Sie soll auch Änderungen für das Grid mitbringen. Da wir uns aber noch nicht mit Bootstrap 4 beschäftigt haben, setzen wir vorerst noch das Grid von Bootstrap 3 ein.
Kommentar von Ansgar |
Hallo Denis,
vielen Dank für diese interessante Artikelserie. Auch ich als "Fortgeschrittener" kann da noch einige interessante Punkte für mich herausziehen.
Nur eine Sache verstehe ich nicht: In den ersten Artikeln geht es Dir sehr stark darum, möglichst effizienten, sparsamen und dennoch übersichtlichen CSS-Code zu produzieren. Das finde ich gut und darum bemühe ich mich auch immer.
Aber wie paßt dazu Bootstrap? Für mich ist Bootstrap ein riesen Monster, um das ich einen weiten Bogen mache. Ich meine: alleine 6.700 Zeilen in der Boostrap.css - ernsthaft? Mit handgeschriebenem Code und eigenen Grid-System brauche ich ein Sechstel bis maximal ein Drittel (und das inkl. CSS-Code für Slider und andere tolle Features). Und obendrei wird der HTML-Code nicht so zugemüllt.
Aus meiner Sicht ist das einzige verlockende an Bootstrap, dass Einsteiger einfach coole Funktionen nutzen können, ohne sich um die dahinterstehenden CSS-Tricks kümmern zu müssen.
Wie siehst Du das? Wann macht Bootstrap für Dich Sinn?
Herzliche Grüße
Ansgar
Antwort von Dennis Erdmann
Moin Ansgar,
du hast vollkommen Recht. Bootstrap so wie es ist einzubinden ist zu viel des Guten. Deswegen hatte ich mich in dem Artikel auch mehr auf das Grid bezogen, dass man entweder über den Bootstrap Customizer beziehen kann oder aber man verwendet die CSS-Datei, die wir im Artikel zur Verfügung stellen.
Auch meine Meinung zu „Wann macht Bootstrap für dich Sinn?“ hat sich seitdem ich diesen Artikel geschrieben habe stark geändert. Zu Anfang habe ich noch Projekte basierend auf Bootstrap realisiert. Aber im Laufe der Zeit habe ich immer mehr Probleme an Bootstrap in Verbindung mit Contao entdeckt. Heute ist nur noch die Klassenbezeichnung und die Idee hinter dem Grid übrig geblieben. Alles andere löse ich über unser Nutshell Framework.