Responsive Flexbox-Layouts für Fortgeschrittene

Was ist ein Holy-Grail-Layout?

Testen Sie unsere 1865 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein Holy-Grail-Layout mit durchgehenden Kopf- und Fußbereichen und dazwischen gleich hohen Spalten ist mit Flexbox einfach zu realisieren. Außerdem kann man die Spaltenreihenfolge ändern, ohne das HTML anpassen zu müssen.

Transkript

Im Webdesign gibt es ein Layout, das als Holy Grail, also als Heiliger Gral bezeichnet wird, weil es bis jetzt eigentlich fast ziemlich unmöglich war, dieses Layout tatsächlich zu bauen. Ein solches Layout sehen Sie hier. Es gibt einen durchgehenden Header über die volle Layoutbreite, ganz unten gibt es einen durchgehenden Footer über die volle Layoutbreite und im Inhaltsbereich gibt es mehrere Spalten, die unabhängig von ihrem Inhalt alle gleich hoch sind. Deswegen ist das ein Heiliger Gral, denn Spalten, die gleich hoch sind, das ist in CSS fast unmöglich und man müsste dazu entweder auf JavaScript oder auf wirklich kompliziertes CSS zurückgreifen. Wie das früher ging, das wird in diesem Artikel hier von 2006 geschildert "In Search of the Holy Grail" und entweder studieren Sie diesen Artikel und lernen das komplizierte CSS oder Sie machen es einfach mit Flexbox. Mit den Techniken aus den vorherigen Kapiteln können Sie ein vollfunktionierendes Holy-Grail-Layout erstellen, hier mit einem Header über die volle Layoutbreite, unten ein Footer und dazwischen zwei oder mehr Spalten, die über die volle Höhe gehen, unabhängig davon, wie viel Inhalt Sie haben. Das Layout ist zudem responsiv und in schmalen Viewports stehen die Layoutbereiche einfach untereinander. Aber es gibt noch mehr. Mit Flexbox können wir die Reihenfolge von Elementen am Bildschirm ändern, ohne das Markup anzupassen. Also Sidebar nach links statt nach rechts ist sehr einfach und das funktioniert, ohne im HTML irgendwas ändern zu müssen. Aber es gibt noch mehr, denn im nächsten Schritt werden Sie nach der Erstellung des Heiligen Grals dann es dem Benutzer ermöglichen, mit ein paar kleinen Symbolen, Flexbox und einer Prise jQuery, das Layout selbst zu ändern. Klick, Sidebar links. Klick, Sidebar rechts. Und das jQuery dient nur dazu, im HTML Klassen hinzuzufügen oder zu entfernen. Die eigentliche Gestaltung erfolgt mit Flexbox-Eigenschaften. Und man kann damit natürlich auch, Klick, die Sidebar ganz verschwinden lassen und der Inhaltsbereich wächst und füllt den freigewordenen Bereich automatisch aus. Und wenn man die Sidebar wieder einblendet, dann passt er sich wieder an. Ein sehr flexibler Inhaltsbereich. Also los geht's mit Flexbox and the Holy Grail auf der Suche nach dem Heiligen Gral.

Responsive Flexbox-Layouts für Fortgeschrittene

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!