Überschriften¶
Info
Der ThemeManager erweitert die in Contao einstellbaren Überschriften (<h1> - <h6>) durch weitere Elemente
(p, span & div) und ergänzt diese um eine Klasse, sodass sich diese Einstellungen auf die Überschrift bzw.die
im Element/Modul eingestellte Überschrift-Klasse auswirken.
Typografie der Überschriften¶
Über die nachfolgenden Reiter lässt sich das Aussehen von Headlines <h1> - <h6> und CSS-Klassen .h1 - .h6
verändern, wobei die folgenden Einstellungen möglich sind:
- Zeilenhöhe (line-height)
- Schriftgröße über verschiedene Breakpoints (font-size)
- Reguläre und invertierte Farbe (color)
- Schriftstärke (font-weight)
- Zeichenabstand (letter-spacing)
- Textdarstellung (text-transform)
Einstellungen für die Bereiche Hauptspalte / Linke Spalte / Rechte Spalte?
Hiermit werden alle Artikel zusammengefasst, welche sich in den Layout-Bereichen Hauptspalte, Linke Spalte und Rechte Spalte befinden.
Da sich die Einstellungen der Überschriften des Volle Breite und dem mehrspaltigen Layout gleichen, werden diese
zusammen aufgefasst.
Zeilenhöhe¶
$line-height-headline $h[1-6]-line-height $h[1-6]-content-line-height
Dient der Einstellung der vertikalen Zeilenhöhe der Überschrift und kann individuell für jede Größe eingestellt werden.
Die Variable $line-height-headline dient lediglich als globale Einstellung der nachfolgenden Zeilenhöhen, sodass diese
im Standard für alle Überschriften gilt.
Schriftgrößen¶
$h[1-6] - [ |content] - font-size - [ |small|medium]
Für jede Überschrift(/-Klasse) lässt sich die Schriftgröße für die folgenden Breakpoints einstellen:
| Breakpoints | Fensterbreite | Größe / Genutzte Variable |
|---|---|---|
kleiner xs |
<600px |
*-font-size-small |
xs bis m |
600px - 1023.98px |
*-font-size-medium |
ab m |
≥1024px |
*-font-size |
Verfügbare (S)CSS-Variablen
Da sich die Schriftgrößen abhängig des Breakpoints verhalten, gibt es nur eine CSS-Custom-Property für jeden Headline-Typen.
Die Typen (h1 - h6) beziehen sich sowohl auf den normalen als auch auf das Mehrspaltige Layout und müssen beim Kopieren der nachfolgenden CSS mit der gewünschten Zahl (1-6) ausgetauscht werden.
Überschriften-Farben¶
$h[1-6] - [ |content] - color [ |invert]
Sowohl für die reguläre, als auch für die invertierte Text-Farbe können die Schriftfarben jedes Überschrift-Typen für die zwei Layout-Bereiche eingestellt werden.
Verfügbare (S)CSS-Variablen
Durch die Verwendung von Custom-Properties mithilfe der Klassen .color-text-base und .color-text-inv, können
die Farben von Überschriften überschrieben werden.
/** Reguläre Farben */
$h1-color
$h2-color
$h3-color
$h4-color
$h5-color
$h6-color
$h1-content-color
$h2-content-color
$h3-content-color
$h4-content-color
$h5-content-color
$h6-content-color
/** Reguläre Farben über color-text-base */
var(--h1-clr)
var(--h2-clr)
var(--h3-clr)
var(--h4-clr)
var(--h5-clr)
var(--h6-clr)
var(--h1-c-clr)
var(--h2-c-clr)
var(--h3-c-clr)
var(--h4-c-clr)
var(--h5-c-clr)
var(--h6-c-clr)
Schriftstärke¶
$h[1-6] - [ |content] - font-weight
Dient der Einstellung der Schriftstärke pro Überschrift, welche Layout-übergreifen (Normal und Inhalt) wirken. Folgende Schriftstärken stehen hierbei zur Verfügung, wobei diese bei einer individuell eingebundenen Schriftart im Layout eingestellt werden müssen, damit der Effekt sichtbar ist (Im Beispiel werden nur 300, 400 und 600 geladen).
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Verfügbare SCSS-Variablen
$h1-font-weight
$h2-font-weight
$h3-font-weight
$h4-font-weight
$h5-font-weight
$h6-font-weight
$h1-content-font-weight
$h2-content-font-weight
$h3-content-font-weight
$h4-content-font-weight
$h5-content-font-weight
$h6-content-font-weight
Zeichenabstand¶
$h[1-6] - [ |content] - letter-spacing
Auch bekannt als Buchstabenabstand, kann der Zeichenabstand eines Wortes für jede Überschrift angepasst werden:
- Ein Zeichenabstand von 0.02em
- Ein Zeichenabstand von 0.5px
- Mehr Zeichenabstand mit 2px
- Sehr viel Zeichenabstand mit 5px
Textdarstellung¶
$h[1-6] - [ |content] - transform
Die Textdarstellung dient der Hervorhebung von Text, wobei folgende Einstellungen möglich sind:
| Option | Ergebnis | Beschreibung |
|---|---|---|
uppercase |
Die Textdarstellung dient der Hervorhebung von Text. | Jeder Buchstabe wird in Kleinbuchstaben umgewandelt. |
lowercase |
Die Textdarstellung dient der Hervorhebung von Text. | Jeder Buchstabe wird in Großbuchstaben umgewandelt. |
capitalize |
Die Textdarstellung dient der Hervorhebung von Text. | Jedes Wort beginnt mit einem Großbuchstaben. |
Abstände von Überschriften¶
$headline-spacing $headline-spacing-*
Wie bereits in Schriftgrößen erklärt, passt sich diese anhand der Breakpoints an.
Info
Im Standard haben Überschriften einen Abstand von 1rem nach unten.
Wenn die Schriftgröße für Überschriften deutlich zunimmt, kann der Abstand unnatürlich aussehen, sodass dieser visuelle Abstand oft angepasst wird.
Das CSS-Framework liefert hierbei mehrere Abstände für 3 Größen (Mobil, Tablet und Desktop), welche individuell für jeden Breakpoint über den StyleManager eingestellt werden können.
In den nachfolgenden Abschnitten werden die nachfolgenden Einstellungen beschrieben, welche sich verschieden auswirken.
Welche Einstellung soll ich nutzen?
Oft hat es sich ergeben, dass die Einstellung des Globalen Headline-Spacing ausreichend für die eigene Website ist, sofern der Abstand je Breakpoint wachsen soll.
Spacing (Normal)¶
Wenn das Global Spacing nicht aktiviert wird, gelten folgende Regeln für den unteren Abstand (Margin) für Überschriften:
| Breakpoints | Small | Medium | Large |
|---|---|---|---|
| Über jeden Breakpoint | $headline-spacing-medium |
$headline-spacing-s-medium |
$headline-spacing-l-medium |
Verfügbare (S)CSS-Variablen
Durch die Verwendung von Custom-Properties wird grundsätzlich nur die in .hl-mb-* gesetzte Variable --hl-mb
überschrieben.
Global Spacing (Automatisch)¶
Über die StyleManager-Option Global Spacing (activates the Responsive behaviour), wächst die Größe automatisch, sodass dies oft die einzig notwendige Einstellung ist. Die nachfolgende Tabelle zeigt an, welche der Config-Variablen genutzt wird.
| Breakpoints | Small | Medium | Large |
|---|---|---|---|
kleiner s < 767.98px |
$headline-spacing-small |
$headline-spacing-medium |
$headline-spacing-large |
s bis l 768px - 1263.98px |
$headline-spacing-s-small |
$headline-spacing-s-medium |
$headline-spacing-s-medium |
ab l 1264px |
$headline-spacing-l-small |
$headline-spacing-l-medium |
$headline-spacing-l-large |
Verfügbare (S)CSS-Variablen
Durch die Verwendung von Custom-Properties wird grundsätzlich nur die in .hl-mb-* gesetzte Variable --hl-mb
überschrieben.
Kombination¶
Werden sowohl das normale Spacing, als auch das Global Spacing ausgewählt, gelten die Option
-
des normalen Spacings für das Suffix der SCSS-Variable:
- $headline-spacing-
[Option] - $headline-spacing-s-
[Option] - $headline-spacing-l-
[Option]
- $headline-spacing-
-
des globalen Spacings für das Infix der SCSS-Variable
- $headline-spacing-
[Option]-small - $headline-spacing-
[Option]-medium - $headline-spacing-
[Option]-large
- $headline-spacing-
sodass es hier 3*3 Möglichkeiten über jeden Breakpoint gibt, welche der nachfolgenden Tabelle entnommen werden können:
| Small (Spacing) | Medium (Spacing) | Large (Spacing) | |
|---|---|---|---|
| Small (Global Spacing) | $headline-spacing-small |
$headline-spacing-s-small |
$headline-spacing-l-small |
| Medium (Global Spacing) | $headline-spacing-medium |
$headline-spacing-s-medium |
$headline-spacing-l-medium |
| Large (Global Spacing) | $headline-spacing-large |
$headline-spacing-s-large |
$headline-spacing-l-large |
Kombination überschreibt jegliche Global-Spacing-Abstände
Bei Auswahl beider Optionen im ersten Breakpoint werden alle Global-Spacing-Abstände überschrieben, sodass die eingestellte Option zwangsläufig für weitere Breakpoints eingestellt werden muss. Empfohlen wird die Kombination bei anfangender Zwei- bzw. Dreispaltigkeit.