Transkript
Moin und herzlich Willkommen zum vierten Tag des Kurses „Bessere Websites mit OPTIMIST“. Heute zeige ich dir, wie das Grid-System in OPTIMIST und unseren anderen Themes funktioniert und wie du mit der Grid-Erweiterung Inhalte mehrspaltig darstellen kannst.
Wenn wir uns die OPTIMIST Demo anschauen, dann finden wir mehrere Stellen, an denen Inhalte mehrspaltig dargestellt werden. Zum Beispiel hier bei den Sprachen, aber auch hier bei den Kursmodellen und sogar hier oben haben wir ein Text und Bild-Element, die über die Grid-Erweiterung nebeneinander dargestellt werden.
Das Besondere ist, dass ich in OPTIMIST die Darstellung pro Viewport anpassen kann. Ich passe mal die Bildschirmbreite an, damit du siehst, was ich meine.
Auf Bildschirmen kleiner als 940 Pixel, also zum Beispiel einigen Tablets im Hochformat, werden nur noch 2 Sprachen nebeneinander dargestellt. Und auf ganz kleinen Bildschirmen wie bei den meisten Smnartphones werden alle Sprachen untereinander dargestellt.
Und auch die Text-Bild Kombination verändert sich, je nachdem wie breit der Bildschirm ist. Auf kleinen Bildschirmen steht der Text über dem Bild, während auf Tablets der Text bereits neben dem Bild steht.
Schauen wir uns mal das Backend an, wie das in OPTIMIST gelöst ist:
Im Artikel Sprachen sehe ich die einzelnen Text-Elemente, die mehrspaltig dargestellt werden. Ich sehe in der Übersicht bereits, dass meine Text-Elemente von einem Reihe-Start und Reihe Ende-Element umschlossen sind. Außerdem sehe ich an den Elementen die Grid-Klassen col-sm-6 und col-lg-4.
Diese Grid-Klassen sorgen dafür, dass auf mittleren Bildschirmen 2 Elemente nebeneinander stehen und ab einer gewissen Größe 3 Elemente nebeneinander ausgerichtet werden.
Aber warum col-sm-6 und col-lg-4?
OPTIMIST basiert auf einem 12-Spaltigen Grid, d.h. immer wenn ein Reihen-Konstrukt erstellt wird, wird ein 12-spaltiges Grid angelegt, in dem die Inhalte platziert werden können. Wenn ich keine Angaben machen würde, würde das Grid versuchen, das Element auf 1/12 Breite anzulegen. Um die Inhalte nun mehrspaltig darzustellen, gebe ich also an wieviele Spalten, das Element in einem 12-spaltigen Grid breit sein soll. Die 6 in col-sm-6 bedeutet also, dass das Element 6/12 breit sein soll und die 4 in col-lg-4 bedeutet, dass das Element 4/12 breit sein soll.
Bleibt eigentlich nur noch zu klären, was das SM beziehungsweise LG bedeutet. Der mittlere Teil in den Grid-Klassen steht für den Breakpoint, ab dem diese Anweisung gelten soll.
Denn OPTIMIST basiert auf dem Mobile First Ansatz. Das bedeutet, dass du dir vom kleinsten bis zum größten Breakpoint überlegst, wie breit dein Inhalt sein soll. Das Besondere dabei: Du musst erst angeben, wann ein Inhalt erstmals mehrspaltig dargestellt werden muss. Für die Breakpoints davor wird dein Inhalt automatisch auf die komplette Breite gestreckt.
Bezogen auf unsere Sprachen bedeutet das folgendes: Auf kleinen Bildschirmen gehen unsere Textelemente über die komplette Breite. Ab dem Small-Breakpoint sollen sie 6/12 breit sein und diese Anweisung gilt auch für den Medium-Viewport, weil ich für diesen keine eigene Klasse zugewiesen habe. Ab dem Large-Viewport sollen die Elemente dann 4/12 breit sein und diese Anweisung gilt dann auch für den XL-Breakpoint.
Auf das Thema Breakpoints und wie du diese anpassen kannst, werde ich im nächsten Video genauer eingehen. Für die Verwendung der Grid-Erweiterung ist für dich erstmal nur folgendes wichtig:
Es gibt in OPTIMIST für die Grid-Erweiterung 5 Breakpoints:
- der XS-Viewport geht von 0 bis 549 Pixel
- der SM-Viewport von 550 bis 767 Pixel
- der MD-Viewport von 768 bis 939 Pixel
- der LG-Viewport von 940 bis 1099 Pixel und
- der XL-Viewport startet ab 1100 Pixel
Um zu sehen, wie du die Grid-Klassen einem Element zuweist, gehen wir jetzt einfach mal in eines der Textelemente rein.
Im unterem Bereich Grid-Einstellungen siehst du die Grid-Klassen, die ich dem Element gegeben habe. Ich kann hier aus einer Vielzahl von Klassen wählen, ich kann aber auch durch die eingebaute Suche, die Auswahl beschränken, und mir zum Beispiel nur Klassen des Small-Breakpoints anzeigen lassen.
Schauen wir uns noch ein anderes Beispiel an:
Wie eingangs erwähnt, habe ich auch die Text-Bild-Kombination oben mit der Grid-Erweiterung umgesetzt. Wenn ich in den dazu passsenden Artikel gehe, siehst du direkt eine Besonderheit: Das Grid beginnt mit dem Reihe-Start Element, danach folgt noch ein Spalte-Start-Element. Diese Kombination aus Spalte-Start und Ende kann ich nutzen, wenn ich 2 oder mehr Elemente in einer Spalte kombinieren möchte.
In der Demo ist es so, dass ich den Text mit einem Link-Element in einer Spalte kombinieren wollte. Diese Spalte sollte ab dem Medium-Breakpoint 7/12 breit sein und ab dem Large-Breakpoint 5/12 breit. Das Bild hingegen soll ab dem Medium-Breakpoint 5 Spalten breit und ab dem Large-Breakpoint 7 Spalten breit sein.
Wenn ich das Spalte-Start-Element bearbeite, dann sehe ich auch hier wieder die Grid-Einstellungen und die Klassen, die ich vergeben habe. Außerdem sehe ich, dass hier auch eine Grid-Option align-center aktiv ist. Wenn ich hier durch die möglichen Optionen gehe, dann siehst du, dass es auch hier wieder die Klassen mit Breakpoint gibt und auch welche, die sich auf die Anzahl der Spalten beziehen.
Mit der Option align-center sage ich meiner Spalte, dass sie vertikal mittig ausgerichtet werden soll. Und zwar immer, vorausgesetzt, meine Inhalte werde mehrspaltig dargestellt. Ich zeige dir das nochmal im Frontend. Über den Web-Inspector lasse ich mir einmal das Grid anzeigen. Dadurch kann ich sehen, dass meine Spalte oben und unten den gleichen Abstand hat. Noch besser lässt sich das erkennen, wenn ich den Text entferne.
Mithilfe der Grid-Optionen kann ich Inhalte oben, unten, links, rechts und sowohl horizontal als auch vertikal mittig ausrichten. Außerdem kann ich die Start-Spalte eines Elements festlegen und so Inhalte einrücken beziehungsweise einen zusätzlichen Abstand zwischen Elementen schaffen.
Am Besten nimmst du dir jetzt nochmal ein paar Minuten Zeit und schaust dir ein paar der Unterseiten in der Demo genauer an und spielst ein wenig mit den Grid-Klassen und Optionen rum.
Wir sehen uns hoffentlich im nächsten Video wieder, wenn ich dir von den Breakpoints erzählen werde. Bis dahin, mach's gut und Erstma!