Irgendwie – und ich weiß nicht mehr genau wie – bin ich die vergangenen Tage auf „CSS Grid Systeme“ gekommen. Gestern hab ich mir ganz kurz http://cssgrid.net/ angeschaut, jedoch bin ich zu diesem Zeitpunkt noch etwas daneben gestanden.
Nundenn, egal.
Was ist denn nun ein Gridsystem? Kurz gesagt ist es nichts anderes wie ein Raster, der dem „Designer“ beim Erstellen der Website helfen soll. Klingt wenig spektakulär, bis man schließlich erkennt, dass diese Grids noch mehr können.
Das besprochene Gridsystem passt sich automatisch auf das jeweilige Endgerät an, auf dem die Site angezeigt wird (Stichwort Media Queries). Toll, oder?
Erste Tests
Die heruntergeladenen Daten kann man ohne weiteres gleich lokal speichern und im Browser aufrufen (index.html)
Versucht dann mal das Browserfenster größer oder kleiner zu ziehen. (Das Template wächst und schrumpft mit). Der Autor des 1140px Systems hat ausserdem wohl relativ weitreichende Tests auf verschiedensten mobilen Geräten durchgeführt.
Sehr interessant wie ich finde, denn heutzutage „rennt“ ja fast schon jede(r) mit einem smarten Phone oder einem Hightech-Tablet (Kellner ausgenommen) herum. Auch diese Sparte will also mit entsprechend aufbereiteten Webinhalten versorgt werden.
Aber nun wieder zum Template bzw. der index.html…
In der index.html gibt es eine <div class=“row“>. Diese div class leitet immer eine „neue“ Zeile von Spalten (columns) ein. Über die div classes „onecol, twocol, threecol, fourcol, …“ wird definiert, wie breit die Zeile sein soll (genauer gesagt, in wie viele Spalten die Zeile aufgeteilt wird.)
Anmerkung: das Bild wächst/schrumpft automatisch…
Übrigens, wenn man ein Bild in einen Container einfügt, darf man keine Dimensionsangaben (height, width) tätigen! Nur so skaliert das Bild automatisch mit der Fenstergröße!
Die letzte „Column“ muss zusätzlich die Klasse „last“ im Quelltext bekommen. Das Ganze schaut dann so aus, wenn zb als letzte Column auf der Website eine 3-Spalten Column zum Einsatz kommt:
<div class=“threcol last“>
<p>Three columns</p>
</div>
Jedenfalls werde ich die Sache weiter verfolgen und demnächst noch einen (einige?) detailliertere Beiträge dazu schreiben, die dann auch „schöner“ formatiert sein werden. (ich brauche einen CSS Syntax Highlighter).