Ein Frame ist das Raster einer Seite: welche Bereiche es gibt — Kopfbereich, Seitenleisten, Inhalt, Fußzeile —, wo sie liegen und wie breit sie sind.
Drei Dinge sind daran zu trennen, und sie liegen in drei Reitern der Layout-Seite:
| Frage | Wo |
|---|---|
| Wie ist die Seite aufgeteilt? | Frames — diese Seite |
| Was erscheint in welchem Bereich, und welcher Seitentyp nimmt welchen Frame? | Komponenten, siehe 4.7 |
| Wie sieht das zusammen aus? | Übersicht, ebenda |
Quartz bringt drei Frames mit — Standard, Volle Breite, Minimal. Hier baut man eigene.
Der Reiter „Frames“: oben Frame und Breite, darunter die Maße, rechts die Einstellungen des gewählten Bereichs.
Einen Frame wählen und anlegen
Oben steht ein Wähler mit allen eigenen Frames und dem Quartz-Standard (nur ansehen). Der
Standard zeigt, wie Quartz eine Seite aufteilt, solange kein eigener Frame gewählt ist, mit den
Maßen aus variables.scss und base.scss des Projekts. Ändern lässt er sich nicht, aber
Als eigenen Frame anpassen macht eine Kopie daraus, die man ändern kann.
Daneben Neuer Frame für einen leeren, Duplizieren für eine Kopie des gewählten und der Mülleimer zum Löschen. Seitentypen, die einen gelöschten Frame benutzt haben, fallen auf den Standard zurück.
Drei Breiten
Jeder eigene Frame wird für drei Bildschirmbreiten gebaut: Desktop, Tablet und Mobil. Die Umschaltung oben nennt zu jeder Breite, ab wie vielen Pixeln sie gilt, und jede hat ihr eigenes Raster. Auf Tablet kopieren und Auf Mobil kopieren übernehmen das Raster der gerade gezeigten Breite in eine andere.
Zu jeder Breite gehören die Karte Frame und ihre Maße: Zeilen und Spalten mit ihren Breiten und Höhen, die Abstände dazwischen, eine Maximalbreite, eine Ausrichtung und Innenabstände. Zwei Feinheiten dazu stehen im Editor:
- Ohne Maximalbreite nutzt der Rahmen die volle Fensterbreite.
- Die Ausrichtung wirkt erst mit einer Maximalbreite — vorher bleibt nichts zu verteilen.
Bereiche ins Raster ziehen
Ein Bereich wird aus der Liste auf eine Zelle gezogen; an seinem Platz bleibt er blass zurück.
Über dem Raster stehen die Bereiche, die hier nicht im Raster liegen. Einen Bereich auf eine freie Zelle ziehen platziert ihn; ihn zurück in die Liste ziehen löst ihn wieder. An den Rändern eines platzierten Bereichs zieht man, über wie viele Zeilen und Spalten er reicht. Überschneidet sich ein Bereich dabei mit einem anderen, bleibt er, wo er war, und QuartzControl sagt das.
Das geht auch mit der Tastatur: Mit Leertaste oder Eingabetaste aufnehmen, mit den Pfeiltasten bewegen, mit Leertaste oder Eingabetaste ablegen, mit Escape abbrechen. QuartzControl sagt dabei an, was passiert.
Ein Klick auf einen Bereich zeigt rechts seine Einstellungen:
- Bereichsname — wie er im Frame heißt.
- Belegung — welche Position der Seite er zeigt: Kopfbereich, eine der Seitenleisten, vor dem Inhalt, der Seiteninhalt, nach dem Inhalt, Fußzeile, oder Keine (leer). Zwei Bereiche mit derselben Belegung zeigen dieselben Komponenten, also doppelt; der Editor sagt das.
- Eigener Bereich — der Bereich zeigt dann nur die Komponenten, die man im Reiter „Komponenten“ ausdrücklich hierher zieht, nicht alles, was die Belegung sonst noch hat. So lässt sich eine Seitenleiste in zwei Bereiche teilen.
- Zeilen-Spanne und Spalten-Spanne, dazu Sichtbar auf der gerade gezeigten Breite: Ein ausgeblendeter Bereich behält seine Spannen und lässt sich auf einer anderen Breite zeigen.
- Aus Raster lösen und Bereich löschen.
+ Bereich hinzufügen legt einen weiteren an. Sieben Bereiche entsprechen den sieben Positionen der Seite; wer mehr braucht, gibt den zusätzlichen eine Belegung und macht sie zum eigenen Bereich.
Unter dem Raster sammelt der Editor, was beim Bauen auffallen würde: Positionen, die kein Bereich zeigt (ihre Komponenten erscheinen in diesem Frame nicht), Bereiche, die auf keiner Breite sichtbar sind, sich überschneiden oder über das Raster hinausreichen.
Änderungen wirken sich sofort in der Vorschau des Editors aus — gespeichert wird trotzdem erst mit Speichern.
Breakpoints
Ab welcher Fensterbreite auf Tablet beziehungsweise Mobil umgeschaltet wird, steht seit 1.1 hier, im aufklappbaren Abschnitt Breakpoints unter den Maßen. Vorgabe ist 1200 / 800 — dieselben Werte, die Quartz benutzt.
Zwei Einschränkungen, die QuartzControl nennt: Die Werte gelten für die eigenen Frames dieses Projekts. Quartz’ eingebaute Frames und Community-Themes bringen eigene Werte mit und folgen diesen hier nicht.
Linien benennen
Der Abschnitt Benannte Grid-Lines (optional) vergibt Namen für die Linien zwischen Spalten und Zeilen. Der Editor braucht das nicht — Bereiche platziert man per Ziehen. Nützlich ist es nur, wenn man diese Linien später aus eigenem CSS ansprechen will.
Frames, die ein Plugin mitbringt
Manche Plugins bringen für ihre eigene Art von Seite einen eigenen Frame mit. Für den zeigt die Layout-Seite keine Vorschau, und das ist ehrlich gemeint: Wie so ein Frame aufgebaut ist, weiß nur das Plugin selbst.
Wo Frames sonst noch auftauchen
Quartz registriert jeden eigenen Frame als Plugin — deshalb stehen sie auch in der Plugin-Liste. Eingestellt werden sie trotzdem hier; die Liste dort sagt das auch.