Responsive Flexbox-Layouts für Fortgeschrittene

Die Struktur der Beispieldateien im Überblick

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In diesem Film stellt der Trainer kurz die grundlegende HTML-Struktur der Beispieldateien vor und erläutert die per @import in einem zentralen Stylesheet eingebundenen CSS-Dateien.

Transkript

Bevor es richtig losgeht, möchte ich Ihnen hier kurz die Übungsdateien vorstellen. Es geht hier los mit einer html-Vorlage die das Grundgerüst enthält. Und die sieht im Editor so aus: ganz normales html5-Dokument, utf-8, view port wird definiert, title, metaname description und ein Link zur zentrale.css im Unterordner css. Dann am Anfang ein skip-link mit der Klasse screen-reader-text, erzähle ich gleich mehr dazu. Ein header, eine Klasse "centered", auch da kommt gleich noch mehr dazu, ein Main-Bereich, wieder mit "centered", ein bisschen Inhalt, und ganz unten ein footer, sowie /body und /html. Nichts besonderes. Es geht dann gleich weiter mit zentrale.css. Da sehen Sie, das ganze ist hier in Modulbauweise gehalten, also alle benutzten Modul-stylesheets werden hier importiert. Während der Entwicklung ist das eine bewährte Methode. Man kann Module einfach austauschen und kombinieren. Wenn man die Seite live schaltet sollte man diese Module natürlich zusammenführen. Das erste Modul, was eingebunden wird, ist normalize.css. Das ist eine bekannte Sache, hier auf necolas.github.io.normalize.css können sie sich die herunterladen und dann einbinden und auch bei Bedarf genauer informieren, was das damit auf sich hat. Das ist also, anstelle eines harten resets wird hier eine sanfte Normalisierung bevorzugt, um Browserunterschiede sanft auszugleichen. Danach geht es weiter mit accessibility.css. Da ist eigentlich nur ein style relevant. Da wird Text ausgeblendet, der am Bildschirm nicht erscheinen soll aber sehr wohl vorgelesen oder per Tastatur aufgerufen werden soll. Beispiel ist der skip-link hier, ganz oben auf der Seite. Der hat diese Klasse und der erscheint im Browser hier normalerweise nicht. Wenn ich aber jetzt durchtabbe mit der Tabulatortaste, dann kommt er schon - dann war er ganz schnell wieder weg, zum Inhalt springen, so erscheint das dann, das wird in accessibility.css geregelt hier. Layout.css enthält die Definition für das Center. Das ist ein full page layout, von ganz links bis ganz rechts. Damit der Inhalt nicht auch ganz rüberläuft wird das hier mit dieser Klasse geregelt. Desweiteren noch "figure", der margin wird auf null gesetzt und image mit max-width 100 Prozent. Typography oder typographie.css, da sind eigentlich nur die ersten styles relevant. Da wird für body die Schriftart definiert und für Absätze die Abstände nach unten. Ich scrolle einfach mal runter, der Rest kommt aber in diesem Training gar nicht zum Einsatz. Das ist noch ein bisschen länger, last but not least hier pagehead.css, der header der Seite wird hier gestaltet, im Browser noch mal hellgrau. Da ist nicht so sehr viel, was spektakulär ist. Das wird hier mit hsl-Farbschema gemacht. Sie können aber auch gerne ein anderes nehmen, falls sie da nicht so vertraut mit sind. Das ist grundlegende Formatierung, und hier sind ein paar Media queues, wo die Schriftgröße sich entsprechend ändert. Das ist also die Vorlage. Der Rest der Beispieldateien ist nach Kapiteln geordnet. Falls Sie die Beispieldateien nicht zur Verfügung haben, können Sie das Training folgen, können dann Schritt für Schritt die Dateien aufbauen, das wird dann jeweils kurz erläutert.

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
Laufzeit:2 Std. 25 min (34 Videos)

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!