CSS Kurs Contao Teil 6 Teaser

Teil 6:
Alles, was ihr über das Contao Grid wissen solltet

Im sechsten Teil unserer Artikelserie CSS-Kurs für Contao dreht sich alles um das seit Version 3.0 vorhandene Contao Grid. Wie funktioniert es? Wann könnt ihr es verwenden? Und wann ihr solltet auf ein anderes Grid System setzen?

Erinnert ihr euch noch an die Zeit, bevor Grid-Layouts so richtig populär wurden? Damals sahen alle Websites irgendwie gleich aus. Zwischen <header> und <footer> hatten wir entweder

  • 3 Spalten: Linke Spalte, Hauptspalte, rechte Spalte oder
  • 2 Spalten: Linke Spalte, Hauptspalte oder für Blogs
  • 2 Spalten: Hauptspalte, rechte Spalte.

Und viele Jahre sind wir damit gut gefahren. Klar, wir haben immer ein wenig neidisch auf die Print-Kollegen geschaut. Die konnten ihre Inhalte für eine Broschüre oder einen Flyer deutlich flexibler auf dem Papier arrangieren. Mithilfe eines vorher definierten Gestaltungsrasters – einem Grid Layout – legten sie fest, dass das Ergebnis hinterher trotzdem gut aussah.

Heute sind Grid Layouts im Web selbstverständlich. Gefühlt basieren 4 von 5 Websites, die heute entwickelt werden, auf einem Grid-Layout. Dennoch tun sich viele Nutzer immer noch schwer, Contao mit einem Grid Layout zu nutzen und das obwohl Contao sogar ein eigenes Grid-Framework integriert hat.

Mit diesem Artikel wollen wir das ändern.

Schiff grau

Aufstieg & Durchbruch von Grid Layouts

Bereits im Jahr 2005 stellte Dirk Jesse mit dem Framework YAML, eines der ersten Grid-Systeme fürs Web vor. Es dauerte aber noch etwa 3–4 Jahre, bis Grid-Frameworks wie 960.gs die breite Masse erreichten. Und es vergingen weitere 1–2 Jahre, bis wir uns langsam von dem klassischen zwei- oder dreispaltigen Layout mit Hauptspalte, linker und/oder rechter Spalte verabschiedeten und begannen, die Inhalte individuell auf der Seite anzuordnen. Erst nur die Startseite, später auch andere Bereiche der Website.

Das Grid Layouts heute so populär sind, hängt nicht zuletzt auch mit der steigenden Beliebtheit von CSS-Frameworks wie Bootstrap, Foundation und Co. zusammen. Diese Frameworks liefern nicht nur eine teilweise sehr gute Dokumentationen und etliche Tutorials, sondern auch gleich die Optimierung für ein weitaus größeres Problem mit: die Darstellung auf kleineren Bildschirmen mittels Responsive Webdesign.

Vor- und Nachteile von Grid Layouts

Dank Grid-Layouts lassen sich Inhalte oftmals wesentlich besser für Smartphones und Tablets anpassen. Die klassische Aufteilung von Hauptspalte und linker oder rechter Spalte hat früher gut funktioniert, aber selbst die Holy-Grail-Lösung ist heute nicht mehr wirklich zufriedenstellend, um eine Website ansprechend auf kleineren Bildschirmen darzustellen.

Allerdings wird vielen Websites, die auf einem Grid Layout basieren, vorgeworfen, dass sie alle gleich aussähen. Manche behaupten sogar, sie fühlten sich in die Zeit von Tabellen-Layouts zurückversetzt.

Klar, wenn die im Grid verwendeten Werte so wie sie sind übernommen werden, müssen zwangsläufig ähnliche Websites dabei herauskommen. Aber die Werte kommen ja nicht von ungefähr. Das viele Grids auf 12 Spalten basieren ist ja kein Zufall, genauso wenig, dass die Abstände zwischen den Spalten je nach Bildschirmgröße zwischen 15 und 30 Pixeln liegen.

Letztendlich ist es aber bei einem Printlayout ganz ähnlich. Auch hier sorgt ein Grid mitunter dafür, dass das Layout einheitlich-langweilig aussieht. Die Kunst liegt darin, mit einem Grid zu arbeiten, ohne dass man es auf den ersten Blick sieht.

Steuerrad grau

Die Technik hinter einem Grid-Framework

Das Prinzip hinter einem Grid System ist relativ einfach erklärt. Die zur Verfügung stehende Fläche wird in eine feste Anzahl von Spalten unterteilt. Zwischen den Spalten wird ein fester Abstand definiert. Das kann zum Beispiel so aussehen:

Contao Grid System

Um die Abstände zwischen den Spalten hin zu bekommen, gab es in der Vergangenheit sehr unterschiedliche Ansätze. Heute basieren nahezu alle Grid Layouts auf einer der 2 folgenden Techniken:

Abstand links

Um zwischen den Spalten einen Abstand zu erzeugen, wird jeder Spalte ein margin-left mit dem entsprechenden Abstand gegeben. Das erste Element bekommt dann per :first-child ein margin-left: 0;. Beispiele hierfür sind Gumby und das Fluid Grid System von Bootstrap 2.

Grid System margin

Halber Abstand links und rechts

Um zwischen den Spalten einen Abstand zu erzeugen, hat jede Spalte links und rechts die Hälfte des gewünschten Abstands. So ergibt sich zwischen der Spalten der finale Abstand. Beispiele hierfür sind das Grid von Bootstrap ab Version 3, Zurb’s Foundation, aber auch das Contao Grid.

Grid System

Erschwerend kommt allerdings hinzu, dass nahezu jedes Framework eine eigene Vorstellung davon hat, wie die Gesamtbreite, die Spaltenbreite und die Abstände definiert werden:

  • Spaltenbreite in Pixeln oder Prozent?
  • Abstände in Pixeln, Prozent oder rem?
  • Gesamtbreite inklusive oder abzüglich der äußere Abstände der ersten und letzten Spalte?

Und wie ist es beim contaoeigenen Grid gelöst?

Kompass grau

Das Contao Grid

Bereits im Jahr 2012 hat Leo Feyer mit Contao 3.0 ein auf 960.gs basierendes Grid-Framework (siehe Grafik 1) eingeführt. Dieses lässt sich superleicht über das Seitenlayout im Bereich CSS-Framework aktivieren und ist sogar <zitat>„responsive“</zitat>. Eher weniger leicht war es hingegen, zu verstehen, wie man das Grid-Framework benutzt. Deswegen waren viele Contao-Nutzer froh, als Peter Müller & Thomas Weitzel auf der Contao Konferenz 2013 zwei Workshops zu dem Thema veranstalteten.

Basisdaten für das Contao Grid:

  • 12 Spalten Layout
  • Pixelbasierte Angaben
  • Abstand mit margin
  • Desktop First Ansatz
  • Gesamtbreite von 960px
  • 1 Spalte = 60px + 10px Abstand links + 10px Abstand rechts
  • 2 weitere Viewports: < 980 Pixel und < 768 Pixel

Im Normalfall genügt es, wenn ihr einem Content-Element, einem Modul oder einem Artikel die entsprechende Klasse von .grid1- .grid12 gebt und das Objekt erhält die entsprechende Spaltenbreite. Allerdings ist es wichtig zu wissen, bei welchen Objekten Contao einen margin vorsieht und bei welchen nicht.

Die folgende Angaben stammen aus der grid.css von Contao, zu finden unter assets/contao/css/grid-uncompressed.css:

1. Float und Margin für alle Elemente, deren Klasse das Wort „grid“ enthält:

*[class*="grid"] {
	float:left;
	margin-left:10px;
	margin-right:10px;
	display:inline;
}

2. Margin für alle Elemente, innerhalb von .mod_article, wenn sie eine Klasse beginnend mit ce_ oder mod_ enthalten:

.mod_article *[class*="ce_"],
.mod_article *[class*="mod_"] {
	margin-left:10px;
	margin-right:10px;
}

3. kein Margin für .mod_article, wenn sie eine .grid-Klasse haben:

.mod_article.grid1,
.mod_article.grid2,
[…]
.mod_article.grid6,
[…]
.mod_article.grid12 {
	margin-left:0;
	margin-right:0;
}

Stattdessen wird der Abstand direkt in die Spaltenbreite eingerechnet:

.mod_article.grid1 { width:80px; }
.mod_article.grid2 { width:160px; }
[…]
.mod_article.grid6 { width:480px; }
.mod_article.grid12 { width:960px; }

Hier kommt es immer wieder zu Verwirrungen, weil viele Nutzer verunsichert sind, wann der Abstand per margin hinzugefügt wird und wann er bereits in der Spaltenbreite enthalten ist. Nachfolgende Grafik soll die 3 Anweisungen noch mal verdeutlichen:

Contao Grid im Ueberblick

Für weitere Infos könnt ihr euch auch die offizielle Contao Demo anschauen, die ebenfalls auf dem Contao Grid basiert.

Nachteile des Contao Grids

Dadurch, dass das Contao Grid pixelbasiert ist, lässt es sich auch nicht auf andere Layouts anwenden. Das Layout muss eine Desktop-Breite von exakt 960 Pixel haben, auf 12 Spalten basieren und die Spaltenabstände müssen 20 Pixel betragen. Für jeden anderen Zweck ist das Contao Grid unbrauchbar.

Vor 3 Jahren waren pixelbasierte Grid Layouts noch die Regel. Heute hingegen gelten sie als veraltet und fallen streng genommen auch nicht in die Kategorie Responsive Webdesign, sondern werden dem Adaptive Webdesign zugeordnet. Wer sich nur an den Pixeln im Grid stört, dem empfehlen wir, sich mal die Contao Extension [grid_16_columns] von Glen Langer alias BugBuster anzusehen. Die Erweiterung basiert auf 16 Spalten und verfügt wahlweise über ein pixelbasiertes oder prozentbasiertes Grid.

Aber vielen von euch wird das vermutlich nicht mehr reichen. Gerade, wenn man sich den Funktionsumfang von anderen Grids anschaut. In Bootstrap und Foundation lassen sich für jeden Viewport, wenn man denn will, ganz individuelle Spaltenaufteilungen erstellen. Heißt also, ein 6-spaltiges Layout auf dem Desktop, kann auch dem Tablet im Hochformat auch gerne 3-spaltig und auf dem Smartphone 2-spaltig sein. Möglich wird dies durch unterschiedliche Klassennamen, die man einfach miteinander kombiniert.

Dass das Contao Grid nicht mehr zeitgemäß ist, hat auch Joe Ray Gregory, einer der Betreuer der offiziellen Contao Demo, festgestellt. Auf Github hatte er deswegen eine Umfrage gestartet, welche Wünsche Entwickler an ein überarbeitetes Contao Grid hätten. Das Ergebnis: Die COD für Contao 3.5 soll sowohl ein prozentbasiertes 12-spaltiges Grid, als auch ein frei konfigurierbares Grid auf Basis von SCSS bekommen. Wir sind schon gespannt auf die neue Version.

ZL;NG:

Das Contao Grid ist den heutigen Anforderungen nicht gewachsen. Moderne Grid Systeme sind prozentbasiert und ermöglichen die individuelle Spalteneinteilung pro Viewport.

Kommentare

Kommentar von Manuel |

Wieder mal ein toller Artikel, ich freu mich auf mehr. Was mich interessieren würde, wäre ein Grid ohne Framework ala Bootstrap, Foundation, etc.

Habt ihr Erfahrungen mit zB Susy?

Antwort von Dennis Erdmann

Moin Manuel,

ich habe mir schon seit längerer Zeit vorgenommen, mal in Susy reinzuschauen, aber bisher fehlte die Zeit. Ich würde mich ebenfalls freuen, wenn sich jemand, der schon mit Susy arbeitet, melden würde.

Kommentar von Manuel |

Bei mir siehts eben ähnlich aus, ich komme auch nicht dazu mir das ganze anzusehen :)

Kommentar von Philipp |

ich beschäftige mich gerade mit bootstrap, foundation, wordpress und natürlich contao.
Man ist echt hin und her gerissen, welches Framework man nehmen sollte. WordPress hat ja schon mehrere Frameworks die darauf beruhen, oft zuviel aufgebläht nach meinem Geschmack. Ich will irgendwie nich die Kontrolle über meine CSS behalten. Contao bewegt sich anscheinend gerade dahin, flexible auf Wunsch bootstrap oder auch andere Frameworks zu ermöglichen. Leider fast alles nur wenn man den Composer nutzt. Spannendes Thema auf alle Fälle.

Achja, und Dennis .... Wie immer ein gut geschriener Artikel!

Antwort von Dennis Erdmann

Moin Philipp,

danke Dir. Genau das Gefühl haben wir auch. Deswegen will ich mir in den nächsten Wochen mal die beiden Bootstrap- und Foundation-Erweiterungen für Contao ansehen und dann hier meine Erfahrungen schildern. Composer ist da ein guter Punkt. Solange er nicht zum Contao Core gehört, ist es für viele Nutzer eine Hemmschwelle.

Kommentar von Christian |

Danke Dennis, tolle Tutorials.

Ich habe meine Contao-Projekte bisher immer ohne Grid umgesetzt und war eigentlich ganz zufrieden.

Für Spalten verwende ich die Erweiterung subcolumns. Da ist ja das YAML Grid im Einsatz.

Bin mal gespannt wie das neue Grid in der 3.5 wird.

Grüße
Christian

P.S. Trifft man dich auch auf der Konferenz?

Antwort von Dennis Erdmann

Moin Christian,

ich bin auch gespannt auf das neue Grid. Es wird hoffentlich das ein oder andere individuelle Grid, was ich bisher erstellt habe, ersetzen können.

Leider bin ich dieses Jahr nicht auf der Konferenz dabei. Aber ich hoffe, dass ich es zum Contao Camp schaffe. 

Kommentar von Toni |

Wenn ich alle Elemente einer Zeile (z.B. ce_text grid9, ce_text grid3) mit der selben Hintergrundfarbe belegen möchte, habe ich durch das margin dazwischen immer eine andersfarbige Lücke. Wie kann man ein solches Problem lösen? Oder wende ich das Grid System komplett falsch an?

Antwort von Dennis Erdmann

Nein nein, die andersfarbige Lücke ist in deinem Fall der Abstand margin-left und margin-right. Wenn du eine durchgehende Hintergrundfarbe erreichen möchtest, solltest du die Hintergrundfarbe dem übergeordneten Container geben, also zum Beispiel dem mod_article.

Kommentar von Andreas |

Mir fehlen beim Contao Grid noch Queries für unter 768px.
Gerade wenn man das Endgerät ins Landscape dreht, hat man eigentlich noch Platz.

Antwort von Dennis Erdmann

Ja, das stimmt. Das Contao-Grid ist für den Einstieg noch ganz gut. Aber man merkt schnell, dass man zu viele Kompromisse eingehen muss, wenn man nur einen Breakpoint für Tablet und Smartphone hat.

Bitte addieren Sie 2 und 4.

Grid-Layouts in Contao

Wir zeigen dir, wie du Grid-Layouts in Contao realisierst

mehr infos