+- Joopi (https://forum.hermann-splitthoff.de)
+-- Forum: Wissenswertes (https://forum.hermann-splitthoff.de/forumdisplay.php?fid=1)
+--- Forum: Programmieren (https://forum.hermann-splitthoff.de/forumdisplay.php?fid=6)
+--- Thema: [HTML/CSS] Responsive Grid (/showthread.php?tid=112)
Responsive Grid - Joopi - 08-01-2023
Aus dem Internet sind jede Menge HTML5-Templates für den Download zur Verfügung. Im Grunde genommen ist es eine HTML5-Struktur mit Beispiel-Inhalt und einem responsiven Layout für die Darstellung auf verschiedenen Bildschirmen. Das ist im Grunde genommen die Krux.
Zwei Templates habe ich nun soweit analysiert, dass ich endlich verstanden habe, wie diese Templates an sich funktionieren. In Teilen konnte ich auch den CSS-Code nachvollziehen. Leider aber ist mir das nicht zu 100 % gelungen. Der HTML-Code dagegen ist recht einfach und simple nachzuvollziehen.
Alles basiert im Grunde genommen auf feste Bereiche, die meist mit DIV-Tags ausgezeichnet werden. Innerhalb dieser Bereich kann dann über das grundlegende GRID-Konstrukt, oftmals sind es 12 Spalten, ein responsives Layout erstellt werden. Wie im CSS diese Spalten (columns) tatsächlich deklariert und programmiert werden müssen, ist mir noch ein Rätsel, da es vielfach auch Abwandlungen gibt. Letztlich aber wäre mir ein einfach Layout lieb. Das ist bei vorgefertigten Layouts aber nicht immer der Fall.
Das HTML5-Template für ein Magazin ist recht kompliziert. Dennoch habe ich gerade an diesem Template verstanden, wie das mit den grids und rows und cols ineinander greift.
Ohne mich in die Tiefen der HTML-Strukturierung und Auszeichnung mit allen möglichen Tags verlieren zu wollen, ist die nachfolgende Darstellung wohl so eine Art von optimalem Vorgehen:
section
Um in einem HTML-Dokument Struktur zu haben nutzt man das Tag section. Es kann mehrere solcher Sektionen geben.
container
Der Container kann in einer Sektion mehrfach vorkommen und ist auch wieder ein in sich abgeschlossener Bereich für die Strukturierung des Dokuments.
row
Die Zeile (row) kann innerhalb eines Containers mehrfach vorkommen und ist auch hier ein in sich abgeschlossener Bereich.
In dem Mag-Template (post.html) sind mehrere Sektionen enthalten, aber innerhalb der Sektion sind jeweils nur ein Container und ein Row ausgezeichnet.
Innerhalb von Row wurden nun mit dem 12-Spalten-Layout zwei weitere Bereiche ausgezeichnet, die zum einen mit **col-md-8** und zum anderen mit col-md-4 benannt wurden. In der Summe sind das wieder 12 Spalten, denn col ist nichts anderes als eine Spalte (column). Beide Bereich umfließen sich und werden in der maximalenn Breite des Bildschirm nebeneinander dargestellt. Wäre beide Bereiche mit col12 benannt, würde sie natürlich immer untereinander stehen.
Verkleinert sich die Ausgabe auf einem Bildschirm, weil entweder das Browserfenster verkleinert wird oder das Dokument wird auf einem kleineren Ausgabegerät aufgerufen, wandert der Bereich mit den 4 Spalten nach unten, weil eben nicht mehr genügend Platz vorhanden ist. Damit ist das System des responsiven Layout erfüllt. Ist das Ausgabegerät ein Smarphone, steht grundsätzlich alles an Artikeln untereinander, die Menüs werden in Seitentaschen gepackt und können dann in den Vordergrund geholt werden.
Es versteht sich in HTML von selber, dass alle Tags zu schließen sind. Das Einrücken hat hier eine besondere Bedeutung, da bei umfangreichen Dokumenten ansonsten bei der Fehlersuche oder anderen Analyse das Chaos ausbrechen könnte.
Auch das Template Halcyonic wird nach diesem Prinzip funktionieren. Dieses Template ist allerdings nicht ganz so aufwendig wie das Magazin-Template. Hier war es relativ einfach, um die Gesamtbreite meines Bildschirms auszunutzen, wenn ein Dreispalte anzeigt wurde. Die weitere Analyse werde ich bald angehen und dann in PHP-Include-Dateien umsetzen.