08 — Layout
37 Felder in sieben Reitern. Alles zum Thema Proportion: wie groß, wie weit auseinander, wie rund.
Fast jedes Feld hier darf leer bleiben. Leer heißt „den Wert des Themes verwenden“ — und der Wert des Themes ist meist der richtige. Ein Feld nur füllen, wenn genau diese Site abweichen soll.
Reiter: Logo (9 Felder)
Alles zum Logo steht hier — die beiden Dateien und jede Höhe, die es auf dem Weg vom breiten Desktop-Header bis zum Telefon annimmt.
| Feld | Anmerkung |
|---|---|
| Logo | Pfad zur Logodatei, z. B. EXT:yavi_lucerne/Resources/Public/Images/logo.svg oder fileadmin/… |
| Logo (inverted) | Für dunkle Hintergründe — der transparente Header über einem Hero-Bild, der Footer |
| Logo height | Höhe im normalen, ungescrollten Desktop-Header |
| Logo width | Breite der Box, in die das Logo eingepasst wird |
| Logo height (scrolled) | Höhe im geschrumpften Header, nachdem gescrollt wurde |
| Logo height (mobile header) | Höhe unter 992px, im Header selbst |
| Logo height (mobile navigation) | Höhe im Header von Navigation Art Mobile — Bottom Sheet, Orbit FAB, N4. 0 folgt der Desktop-Logo height. |
| Footer logo height | Höhe des invertierten Logos im Footer. 0 folgt dem Header. |
| Footer logo width | Dasselbe für die Breite |
Die ersten beiden sind Dateipfade, keine Uploads. Die Datei nach fileadmin/ legen und darauf verweisen.
Höhe und Breite spannen eine Box auf, sie zerren das Logo nicht. Ein SVG behält sein Seitenverhältnis in dieser Box; nur die Höhe zu erhöhen fügt also Leerraum darüber und darunter hinzu, statt das Logo größer zu machen. Beides erhöhen.
Logo height (scrolled) tut nur etwas, wenn Fixed Navigation Transition eingeschaltet ist — dieser Schalter liegt auf der Seite Navigation, unter Behaviour.
Reiter: Container (3 Felder)
| Feld | Bedeutung |
|---|---|
| Container max width | Breite der normalen Inhaltsspalte, z. B. 1320px |
| Wide container side padding | Seitliches Padding der Variante container-80, z. B. 12vw |
| Content block gap | Vertikaler Abstand zwischen den Blöcken innerhalb eines Inhaltselements, z. B. 3rem |
Reiter: Section spacing (5 Felder)
Die fünf Stufen XS · SM · MD · LG · XL, die die Redaktion je Element als Abstand davor / Abstand danach auswählt.
| Stufe | Vorgabe im Core |
|---|---|
| XS | 1rem |
| SM | 3rem |
| MD | 5rem |
| LG | 7rem |
| XL | 9rem |
Das sind die einzigen Layout-Felder mit einer nicht leeren Core-Vorgabe, denn eine Abstandsskala mit Löchern ist schlimmer als eine, die bloß nicht die eigene ist.
Reiter: Fonts (5 Felder)
| Feld | Bedeutung |
|---|---|
| Font family | Der vollständige CSS-Schriftstapel der Site |
| Google Font — primary (self-hosted) | Name der Familie, z. B. Inter. Wird heruntergeladen und vom eigenen Server ausgeliefert. |
| Google Font — primary weights | z. B. 400;600;700 |
| Google Font — body (self-hosted) | Eine zweite Familie für den Fließtext, falls abweichend |
| Google Font — body weights | wie oben |
Die Google-Schriften werden selbst gehostet: Die Familie wird einmal heruntergeladen, zwischengespeichert und von der eigenen Domain ausgeliefert. Beim Seitenaufruf geht keine Anfrage an Google — und genau das macht die Funktion DSGVO-tauglich.
Nur die Schnitte anfordern, die tatsächlich verwendet werden. Jeder Schnitt ist eine Datei, die die Besucherin herunterlädt.
Reiter: Headings (7 Felder)
Schriftgrößen H1–H6 plus das Gewicht der Überschriften.
Größen nehmen einen festen Wert (50px) oder einen fließenden (clamp(35px, 4vw, 50px)) entgegen — das Badge neben dem Feld sagt, welche Art gerade gesetzt ist. Fließend ist die bessere Vorgabe: ein Wert, der vom Telefon bis zum Desktop trägt.
Heading font weight ist eine Auswahl mit vier Stufen — Light (300), Normal (400), Semibold (600), Bold (700) —, jede in ihrem eigenen Gewicht dargestellt. Ob ein Gewicht sichtbar ist, hängt an der geladenen Schrift: Trägt die Familie den Schnitt nicht, wählt der Browser den nächstgelegenen, und Light sieht aus wie Normal. Deshalb zeigt die Auswahl Schriftproben statt Zahlen.
Reiter: Buttons (5 Felder)
| Feld | Bedeutung |
|---|---|
| Button radius | Eckenradius des primären Buttons |
| Secondary button radius | Dasselbe für den sekundären Button |
| Button padding X | Horizontales Padding, z. B. 40px |
| Button padding Y | Vertikales Padding — Buttons tragen zusätzlich eine Mindesthöhe, ein kleiner Wert macht sie also unter Umständen nicht niedriger |
| Button rounding (factor) | Ein Multiplikator, keine Länge |
Reiter: Corners & radii (3 Felder)
| Feld | Bedeutung |
|---|---|
| Corner rounding (factor) | Skaliert jede gerundete Ecke auf einmal |
| Global element radius | Der Basisradius von Bootstrap, z. B. 15px |
| Card Border Radius | Jede Kartenfläche: Kartengruppen, Panels, Team, Preise, Diagramme, Fortschritt, Swiper, Partner, Menükarten |
Faktor oder Länge — der eine Fehler, den man vermeiden sollte
Zwei Felder dieser Seite nehmen einen Faktor entgegen, keine Länge:
- Corner rounding (factor)
- Button rounding (factor)
1 behält die Form des Themes, 0 macht alles eckig, 2 verdoppelt sie. Es sind Faktoren, damit Karten, Buttons und Chips ihre Proportionen zueinander behalten.
12px in ein Faktorfeld einzutragen bewirkt nichts: Eine Länge dort ergäbe calc(28px * 12px), und das ist keine gültige CSS-Länge — der Wert wird also verworfen und die Form des Themes bleibt. Wer 12px-Ecken will, nimmt Global element radius oder Card Border Radius — die Längenfelder.
Längenfelder sind dagegen nachsichtig: 12 und 12px funktionieren beide.
Radien je Element
Karteneinträge haben ein eigenes Feld Eckenradius mit vier Ecken und einem Kettensymbol: verbunden ändert ein Wert alle vier, gelöst wird jede Ecke einzeln gesetzt. Bleibt es leer, folgt die Karte dem Card Border Radius der Site.