Ein Grid ist ein Gestaltungsraster
Grids sind eigentlich alte Hüte: Grafiker, Architekten und andere Kreative arbeiten schon lange mit ähnlichen Gestaltungsrastern. Und wir kennen alle das karierte Rechenpapier, das uns dabei hilft, unser Geschriebenes auszurichten. Genau das macht auch ein Grid im Webdesign. So ein Grid kann aber noch viel mehr und das erläutern wir auf dieser Seite.
Grid-Haupteinsatzgebiete sind mehrspaltige Inhalte und deren Ausrichtung - fangen wir mal mit einem Zweispalter an.
Grid für mehrspaltige Inhalte
Ein bisschen Theorie muss an dieser Stelle mal kurz sein: So ein Grid besteht aus einem Elternelement, das man als Außencontainer bezeichnen kann. Dieses Elternelement wird im HTML "grid-x" genannt. Die jeweiligen Gridspalten heißen im HTML "xxx cell" (das xxx steht für die jeweilige Spaltenkonfiguration).
Aber ganz locker bleiben: Niemand muss in unseren TYPO3-Backends HTML eingeben oder können! Wir haben dafür eine schicke Oberfläche gebaut, mit der man Grids im Einfach- oder Expertenmodus einstellen kann!
Beispiel: ein 50/50-Zweispalter
Erste Spalte
Dieser Zweispalter zeigt zwei gleich breite Spalten. Man kann die Breite der einzelnen Gridspalten im Backend von TYPO3 einstellen - dazu später mehr.
Damit man die Konfiguration der Spalten und Inhalte erkennen kann, haben wir den Spalten einen Rahmen (border) und eine Hintergrundfarbe (background) zugewiesen. Dem Elternelement haben wir eine hellblaue Hintergrundfarbe verpasst.
Zweite Spalte
Wir haben den Spalten einen Innenabstand gegeben, damit der Inhalt nicht direkt an den Rändern klebt. Diesen Innenabstand bezeichnet man als "padding".
Beide Spalten haben ebenfalls einen Abstand zueinander (der hellblaue Bereich zwischen den Gridspalten). Das ist der Außenabstand und den bezeichnet man als "margin".
Wenn man ohne Hintergründe bzw. nur mit Text arbeitet, benötigt man meistens nur den Außenabstand.
Dann konfiguriert man das Raster-Elternelement mit "grid-x grid-margin-x" und so sieht das dann aus:Spalte1:
Übrigens: das Grid und die Spaltenkonfigurationen kann man im TYPO3-Backend ganz bequem über ein Plugin auswählen.
Spalte2:
Expert-Modus: damit können spezielle Konfigurationen, CSS-Helper oder data-Anweisungen eingegeben werden.
Ganz ohne padding oder margin geht es auch.
Das sieht dann so aus und wird zum Beispiel für Bilder verwendet, wenn die nebeneinander ohne Abstand dargestellt werden sollen:Spalte1:
Quis at amet nunc purus orci, pretium sodales accumsan ac in dignissim porttitor leo a quisque faucibus aliquam leo a.
Spalte1:
Quis at amet nunc purus orci, pretium sodales accumsan ac in dignissim porttitor leo a quisque faucibus aliquam leo a.
Immer zwölf
Ein Grid besteht - in dem Framework, das wir verwenden - immer aus zwölf Spalten (cell):
1
2
3
4
5
6
7
8
9
10
11
12
Ja, richtig gelesen, auch ein Zweispalter besteht aus zwölf Spalten (cell)!
1
2
3
4
5
6
7
8
9
10
11
12
Die entsprechenden Gridspalten (cell) werden dabei zusammengefasst, wobei die Summe immer zwölf ergibt. Im HTML-Code sieht das so aus:
<div class="grid-x">
<div class="small-12 medium-6 cell"> ... </div>
<div class="small-12 medium-6 cell"> ... </div>
</div>Jetzt wird es wieder spannend: die Breakpoints
small - medium - large
Wir haben gesehen: Ein Grid ermöglicht mehrspaltige Inhalte. Was aber noch viel cooler ist: Ein Grid ermöglicht die individuelle Anpassung der Webseite an unterschiedliche Endgeräte! Die da zum Beispiel wären: Smartphone, Tablet, PC, etc. Diese unterscheiden sich in einem wesentlichen Punkt: der Bildschirmauflösung.
Bildschirmauflösung: Je größer die Bildschirmauflösung ist, desto mehr Pixel und damit mehr Platz stehen für Inhalte zur Verfügung. Die Bildschirmauflösung wird in Pixeln angegeben. Wir alle kennen zum Beispiel das HD-Format: 1920x1080 Pixel.
Video: Responsive Simulation Zweispalter im Browser:
klicken um zu starten...Erläuterung: Ab einer bestimmten Auflösung rutschen die beiden Spalten untereinander. Diesen Punkt, an dem das passiert, nennt man Breakpoint. In diesem Beispiel gibt es nur zwei Breakpoints: small (für Smartphones bzw. kleine Endgeräte) und groß: Tablet oder PC. Später zeigen wir noch ein Beispiel mit drei Breakpoints.
Hier geht es zum Demo-Zweispalter mit den Zahlen
Es passiert aber noch mehr und das zeigen wir im nächsten Beispiel:
Video Zweispalter: Simulation Endgeräte
klicken um zu starten...Erläuterung: In der Ansicht sieht man, dass sich bei verschiedenen Endgeräten neben der Spaltenaufteilung auch Abstände und Schriftgrößen ändern. Responsive Websites können also nicht nur eine für Endgeräte, alternative Struktur haben, sondern auch ein entsprechend optimiertes Erscheinungsbild aufweisen.
Im Zweispalter-Beispiel haben wir zwei Breakpoints gesehen: small und medium. Es gibt aber - ja nach Framework - noch mehr davon. Wir arbeiten in der Regel mit drei Breakpoints:
- small (Smartphones)
- medium (Tablets)
- large (Desktop-PC)
Dazu hier ein weiteres Beispiel:
Video Vierspalter: Simulation Endgeräte
klicken um zu starten...Erläuterung: Hier sieht man, wie die unterschiedlichen Endgeräte auf die drei Breakpoints reagieren.
Vierspalter - HTML
1
2
3
4
5
6
7
8
9
10
11
12
Im Quelltext sieht das für den Vierspalter dann so aus:
<div class="grid-x grid-margin-x">
<div class="small-12 medium-6 large-3 cell"> ... </div>
<div class="small-12 medium-6 large-3 cell"> ... </div>
<div class="small-12 medium-6 large-3 cell"> ... </div>
<div class="small-12 medium-6 large-3 cell"> ... </div>
</div>Und noch ein Beispiel: Dreispalter - Variabel
klicken um zu starten...Erläuterung: Die Spalten dürfen auch gerne ungleich sein - das sieht man in diesem Beispiel.
3/3/6-Dreispalter - HTML
1
2
3
4
5
6
7
8
9
10
11
12
Im Quelltext sieht das dann so aus:
<div class="grid-x grid-margin-x">
<div class="small-12 medium-3 cell"> ... </div>
<div class="small-12 medium-3 cell"> ... </div>
<div class="small-12 medium-6 cell"> ... </div>
</div>Wieso es sinnvoll ist, das mit den Grids zu verstehen
Nahezu jede moderne Webseite basiert auf einem Gestaltungsraster und setzt ein Grid ein. Dieses Grid kann in Form eines Frameworks (das erklären wir weiter unten) oder via guter, alter Handarbeit (Code selbst schreiben) eingebaut werden.
Wer seine Webseite über ein Content-Management selbst pflegt, möchte vielleicht auch Inhalte in Spalten strukturieren oder speziell für mobile Endgeräte optimieren. An dieser Stelle ist es dann hilfreich, wenn man versteht, wie das mit so einem Grid dann funktioniert. Wir freuen uns, wenn wir mit den Erläuterungen und Beispielen auf dieser Seite genau dazu beitragen!
Und wer hat's erfunden?
Richtig! Die von ZURB waren es!
Das Grid-System, das wir hier benutzen, heißt Foundation und wurde von der amerikanischen Internet-Agentur ZURB erfunden.
Foundation ist ein sogenanntes Framework. So ein Framework stellt Vorlagen, Bausteine oder Layout-Komponenten für Webseiten zur Verfügung. Entwickler sparen durch den Einsatz eines Framework Zeit und können auf ein in der Praxis bewährtes Gerüst zugreifen.
Das Foundation-Framework ist frei verfügbar (MIT License) und darf also für private und kommerzielle eingesetzt werden.
