CSS: Responsive Flexbox-Layouts für Profis

Holy Grail 1: HTML und Basisgestaltung

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Im HTML gibt es zwei div-Container, die die Gestaltung per Flexbox erleichtern. Alle Bereiche erhalten mit einfachem CSS die grundlegende Gestaltung verpasst, sodass das Layout in einem schmalen Viewport schon recht brauchbar aussieht.

Transkript

Die Ausgangsposition für die Erstellung des Holy Grail Layouts sehen Sie hier im Browserfenster. Es gibt einen Kopfbereich, hellgrauer Hintergrund, einen Navigationsbereich, dunkler Hintergrund, einen Inhaltsbereich mit weißem Hintergrund, ein Side das später eine Sidebar wird, hier mit einer Navigation mit Transition und ganz unten einen Footer, der über die gesamte Breite geht. Soweit die einzelnen Layoutbereiche, hier im Inhaltsbereich sehen Sie einen kleinen Text von Morten Rand-Hendriksen, der dieses Videotraining konzipiert hat. Da erzählt er über seine erste Begegnung mit 'Monty Python and the Holy Grail', zu deutsch: die Ritter der Kokosnuss, falls Sie sich das einmal anschauen möchten, aber wir gehen jetzt rüber in den Editor und schauen uns das HTML an. Oben, Language steht auf "en-Us", weil der Haupttext doch eher englisch ist, aber interessanter wird es im Body. Dort gibt es drei große Bereiche. <div class="outer-wrap" umschließt alle diese Bereiche. Der ist neu, also ein <div class="outer-wrap" das hört ganz unten wieder auf, vor "/body", ein "Pagewrapper", oder wie immer man so ein Element nennen möchte. Das wird wichtig beim 'layouten' per Flexbox. Innerhalb des <div class="outer-wrap" gibt es drei große Bereiche, wie gesagt: Header mit der Klasse "pagehead", dann ein 'div' mit der Klasse "content" und ganz unten den Footer mit der Klasse "footer-area" Und innerhalb dieser drei großen Bereiche gibt es weitere Unterteilungen. Im Header ist ein "site-title" und die Navigation, im Content-Bereich, im <div class=content" ist hier ein <main class="main-area" und ein <aside class="sidebar" Innerhalb von 'main' gibt es einen <article class="post-content", "post" im Sinne von Beitrag/Artikel. Und das können ruhig mehrere sein, deswegen haben wir hier ja Klassen und in der Sidebar gibt’s noch einen <div class="squish-container" der nicht weiter benutzt wird und eine Überschrift, sowie eine <nav class="example-menu". Das ist das HTML im Überblick. Und diese Einteilung ist wichtig, denn hier das <div class=outer-wrap das wird später eine Flexbox mit "flex-direction: column", so dass die drei Bereiche, <header, <div class="content" und <footer untereinander stehen. <div class"content" hier wird selbst auch zur Flexbox, mit "flex-direction: row", so dass "main" und "aside" nebeneinander stehen. Das ist die grundlegende Verschachtelung der Flexboxen zur Erstellung des Holy Grail. Jetzt geht’s rüber in "holy-grail.css", dort ist eine bisschen Basisformatierung, das ist alles nicht weiter spektakulär, das Menü wird etwas dunkler, "post-content" bekommt ein bisschen Padding, das ist der Artikel in der Mainarea, die Sidebar bekommt eine Hintergrundfarbe, die Liste in der Sidebar wird gestaltet und bekommt hier eine "transition" und beim 'hovern' wird das Ganze dann sichtbar. So, hier ist "footer-area" noch mit einer Hintergrundfarbe und ein bisschen Padding. Im Browser sieht das Ganze... - so, ich scroll’ noch einmal runter - und im Browser sieht das Ganze später etwa so aus, wie bereits am Anfang gesehen. Dieses Basis-Layout sieht in einem breiten Viewport, so wie hier, doch eher mittelprächtig aus, deswegen wird daran später ja auch noch gearbeitet, so dass hier Dinge nebeneinander stehen können, denn Platz ist genug da aber in einem schmalen Viewport, wie zum Beispiel auf einem Smartphone sieht das gar nicht so schlecht aus, denn hier stehen die Dinge einfach untereinander. Ich scroll’ mal eben nach unten hier. So, das ist einfach alles untereinander und das sieht gar nicht so schlecht aus. Das ist gut bedienbar, gut lesbar. Sie sehen übrigens, hier wird in Chrome gleich ein Touchscreen simuliert und da gibt’s kein 'hovered' also wird hier auch nichts 'transitioned'. Wenn Sie das simulieren möchten, müssen Sie hier im Menü, oben die "device type" hinzufügen und dann können Sie sagen "Desktop", dann sehen Sie quasi den kleinen Bildschirm mit einem Mauszeiger und dann gibt’s auch wieder Hover-Befehle hier, aber "Mobile" ist für kleine Bildschirme hier der Standard. Also, auf kleinen Bildschirmen sieht das gar nicht so schlecht aus und auf großen wird ja noch dran gearbeitet, denn hier kommt der Holy Grail.

CSS: Responsive Flexbox-Layouts für Profis

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!