Flex Layout Version 2.0 ist da, und der Versionssprung ist bei diesem Update nicht unbegründet. Im Mittelpunkt der neuen Version steht ganz klar die Verbesserung des responsiven Verhaltens eurer Landingpages und Layouts.
Responsive Layouts!
Wo man früher nur eine einzige Pixelbreite definieren konnte, ab der alle Spaces eines Flex Layouts in voller Breite dargestellt werden sollen, kann man nun beliebige Breakpoints setzen und so verschiedene Ansichten für verschiedene Seitenbreiten erstellen. Die genaue Funktion der Breakpoints (und alles rundherum) zeigt das folgende Video.
Alle Details
Die Dokumentation des Flex Layouts ist mit der neuen Version beträchtlich angewachsen. Hier findet ihr neben detaillierten Infos zu allen Funktionen und einigen Videosequenzen übrigens auch einen Bereich für Best Practice und Hinweise zur Migration eurer Flex Layouts der Versionen 1.x. An dieser Stelle haben wir euch die wichtigsten Punkte kurz zusammengefasst.
1. Breakpoints
Über vordefinierte Breakpoints könnt ihr eure Flex Layouts für bestimmte Seitenbreiten anpassen, die sich an heute üblichen Gerätetypen orientieren (Desktop, Notebook, Tablet, Smartphone, ...). Dabei können Spaces gezielt ausgeblendet oder in der Breite angepasst werden.
Ihr könnt sogar eigene Breakpoints erstellen oder auch bestehende editieren. So sind Layouts für quasi beliebige Seitenbreiten möglich.
2. Query Modus - Seitenbreite vs. Containerbreite
Mit dem "Query Modus" ist einstellbar, ob sich die Breite der Breakpoints auf die aktuelle Seitenbreite oder die Breite des Einfügeortes eures Flex Layout beziehen soll. Letzteres kann bspw. sinnvoll sein, wenn ihr Flex Layouts in schmaleren Elementen wie der Sidebar unterbringen und auf Änderungen der Breiten dieser Elemente reagieren wollt.
3. Spaces Verstecken vs. Verschieben, Löschen und Deaktivieren
Spaces können für die jeweilige Ansicht versteckt werden, um bspw. zu umfangreiche Inhalte auf Smartphones zu reduzieren. Technisch realisiert wird das Verstecken via CSS (display: none).
Spaces können auch verschoben, deaktiviert oder komplett gelöscht werden. Solche Manipulationen wirken sich allerdings - analog zum Ausblenden via Darstellungsfiltern - immer auf alle vorhandenen Ansichten aus.
Mehr zu den Unterschieden von Verstecken, Ausblenden, Deaktivieren und Co. erfahrt ihr im Video und in der Dokumentation!
4. Update von Flex Layout 1.x
Nach einem Update findet ihr eure ursprünglichen Spaces zunächst in einer MAX Ansicht. Ein MIN Breakpoint wird passend zu eurer alten Einstellung zum responsiven Verhalten erstellt (ab welcher Breite sollten Spaces umbrechen).
Bitte testen!
Durch das Update ändert sich die DOM-Struktur eurer Flex Layouts etwas. Auch wenn wir sehr auf Kompatibilität geachtet haben, kann es in seltenen Fällen zu Layout-Verschiebungen kommen. Zum Beispiel, wenn ihr zusätzlich Bootstrap-Grid-Klassen (col-lg-3 col-md-6 col-xs-12) auf Spaces gesetzt habt.
Kostet das Update etwas?
Auch wenn wir auf die Version 2.0 gehen: das Update wird euch - wie bisher bei all unseren Drops üblich - nichts kosten! Allerdings haben wir den Preis des Flex Layout Drops für neue Installationen etwas angehoben.
Feedback
Wir freuen uns sehr auf euer Feedback zur neuen Version! Lief das Update reibungslos? Fehlen euch Funktionen? Ist der Ansatz der Breakpoints verständlich? Schreibt uns!