[euf_grid] Version 3: Jetzt auf Basis von CSS Grid Layout

Wer uns auf Twitter folgt, der weiß es bereits. Anlässlich unseres neuen Contao Themes LASR haben wir unsere Grid-Erweiterung in Version 3 veröffentlicht. Die wichtigsten Neuerungen haben wir in diesen Artikel zusammengefasst.

Die Vorgeschichte

Bisher basierte unsere Grid Erweiterung [euf_grid] auf dem guten alten floating. Auch wenn sich damit bestimmte Layouts nur schwer oder gar nicht umsetzen ließen, hatte sie sich über die Jahre bewährt. Außerdem musste man sich beim Stichwort Browser-Support keine Gedanken machen, im Gegensatz zu Flexbox und Grid-Layout.

Während wir für die Contao Themes SOLO und SIRIUS durchaus auch Flexbox einsetzten, blieb das Floating als Basis erhalten. Unser Vorgehen lässt sich am Besten mit dem Begriff „Progressive Enhancement“ beschreiben. Wir schafften eine gemeinsame Basis für alle Nutzer und darauf aufbauend entwickelten wir Darstellungen, von denen moderne Browser profitierten.

Doch für das LASR-Theme wollten wir einen Schritt weiter gehen. Das Theme sollte diesmal auf dem Grid-Layout Modell basieren und dazu gehörte auch, die Grid-Erweiterung zu überarbeiten. Denn bisher basierte unser Grid auf dem Bootstrap-Grid. Und während man bei Bootstrap immer noch diskutiert, wie man Grid-Layout in Bootstrap umsetzen könnte (und vorerst weiter auf Flexbox setzt), haben wir stattdessen unsere eigenen Überlegungen und Erfahrungen in die Grid-Erweiterung integriert. Das bedeutet aber auch, dass sich unsere Grid-Erweiterung immer weiter von Bootstrap entfernt.

Das ändert sich mit Version 3

Wie oben erwähnt, basiert die Grid-Erweiterung nun nicht länger auf floats, sondern auf dem Grid-Layout. Dabei war uns vor allem die Website Grid by Example von Rachel Andrews eine große Hilfe. Wenn du bisher keine oder wenig Erfahrungen mit Grid-Layouts hast, dann schau dir die Beispiele an.

Neue CSS-Klassen

Wir haben versucht, so viele CSS-Klassen wie möglich aus den vergangenen Versionen beizubehalten. Deswegen lassen sich Klassen wie .col-sm-6 auch nach wie vor verwenden, um eine Spalte in einem 12er-Grid mit 6/12 Breite dazustellen.

Anders sieht es bei den Offset-Klassen aus, also zum Beispiel .offset-md-1. Diese Klasse hat in Version 2 ein margin-left von 1/12 Breite erzeugt. In einem Grid-Layout wird diese Anweisung ignoriert. Stattdessen sollen zusätzliche Abstände dadurch definiert werden, indem man die Startspalte definiert. Ein Beispiel, wie so etwas aussehen kann, findest du im LASR-Theme.

Die neuen Klassen, um den Start einer Spalte zu definieren, heißen .col-start-xs-1 bis .col-start-xl-12.

Außerdem gibt es neue Klassen, um den Inhalt einer Spalte innerhalb dieser zu positionieren:

• .align-[viewport]-start, .align-[vp]-center, .align-[vp]-end, .align-[vp]-stretch
• .justify-[viewport]-start, .justify-[vp]-center, .justify-[vp]-end, .justify-[vp]-stretch

Eine Demo, wie die neuen Klassen funktionieren findest du hier:

Browser-Support

Dadurch, dass wir die Vorzüge von Grid-Layout im vollen Umfang nutzen wollen, mussten wir auch den Browser-Support anheben. Der Internet-Explorer wird nun gar nicht mehr berücksichtigt, im MS Edge wird Grid-Layout erst ab Version 18 unterstützt. Im LASR-Theme haben wir für ältere Browser noch ein paar Weichen eingebaut. Außerdem gibt es einen permanenten Warnhinweis.

Wenn du aber die Grid-Erweiterung mit der beigefügten CSS-Datei verwendest, dann musst du dich selbst um Fallbacks und Hinweise kümmern. 

Installation/Aktualisierung der Grid-Erweiterung

Die Erweiterung lässt sich wie bisher über den Contao Manager oder Composer installieren. Wenn du die Grid-Erweiterung bereits bei einem oder mehreren Projekten einsetzt, dann wird der Contao Manager nicht automatisch auf Version 3 aktualisieren.

Das ist auch gut so, denn der Wechsel ist zu vergleichen mit einem Update von Contao 4.4 auf 4.5. Es kommen neue Funktionen hinzu, andere fallen weg und es besteht die Möglichkeit, dass du das Layout anpassen musst.

Wenn du dennoch die neue Version einsetzen möchtest, dann empfehle ich dir zunächst, diese in einer separaten Contao-Installation zu testen. Wenn du die Grid-Erweiterung in Verbindung mit unserem Nutshell-Framework verwendest, dann musst du zusätzlich das Nutshell Framework auf Version 1.X aktualisieren. Auch hier gibt es größere Änderungen, die dein Layout stören können.

Und was ist mit SOLO, SIRIUS und SPLASH?

Aktuell kommt die neue Version der Grid-Extension nur bei LASR zum Einsatz, genauso die neue Version 1.X des Nutshell Frameworks. Langfristig sollen aber auch SOLO und SIRIUS auf die neue Version aktualisiert werden. SPLASH wird weiterhin auf den bisherigen Versionen laufen und auch noch einige Zeit mit Updates versorgt.

Hast du Fragen zur neuen [euf_grid]-Version? Dann schreib sie gerne in die Kommentare.