Styleguide – nees Sitepackage

Diese Seite dient als Übersicht über die im Sitepackage definierten Typographie-, Farb- und Layout-Richtlinien.

1. Typographie

1.1 Fließtext

Basis-Schriftfamilie (SCSS-Variable $font-family-base):
'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Beispiel-Fließtext in Standardschriftgröße. Dieser Absatz zeigt, wie der normale Text in diesem Theme dargestellt wird. Verwende ihn zur Prüfung von Lesbarkeit, Zeilenabstand und Kontrast.

Basis-Schriftgröße (CSS-Variable): var(--bs-body-font-size)
Berechnete Schriftgröße im Browser: wird ermittelt …

1.4 Interaktive Basis-Schriftgröße

Hier kannst du testweise die Basis-Schriftgröße verändern. Alle darauf aufbauenden Überschriften-Größen passen sich automatisch an, sodass man die Auswirkungen sofort sieht.

Neue Basisgröße (px)

Aktueller Wert: wird ermittelt …

1.2 Überschriften

Überschriftenschrift (SCSS-Variable $headings-font-family):
futura-pt, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Schriftgewicht (SCSS-Variable $headings-font-weight): 400

Überschrift H1 – Seitentitel

Überschrift H2 – Abschnittstitel

Überschrift H3 – Unterabschnitt

Überschrift H4

Überschrift H5

Überschrift H6

Berechnete Schriftgrößen (abhängig von Bootstrap-/Theme-Konfiguration):

Basis-Fließtext: siehe oben
H1: wird ermittelt … (Berechnung: Basis-Fließtext × 2,5 – calc(var(--bs-body-font-size) * 2.5))
H2: wird ermittelt … (Berechnung: Basis-Fließtext × 2 – calc(var(--bs-body-font-size) * 2))
H3: wird ermittelt … (Berechnung: Basis-Fließtext × 1,75 – calc(var(--bs-body-font-size) * 1.75))
H4: wird ermittelt … (Berechnung: Basis-Fließtext × 1,5 – calc(var(--bs-body-font-size) * 1.5))
H5: wird ermittelt … (Berechnung: Basis-Fließtext × 1,25 – calc(var(--bs-body-font-size) * 1.25))
H6: wird ermittelt … (Berechnung: Basis-Fließtext × 1,1 – calc(var(--bs-body-font-size) * 1.1))

Variante mit Klasse .two-colored:

Markenname Zusatz

In .two-colored wird das erste <span> über die SCSS-Variable $primary eingefärbt.

1.3 Hervorhebungen

Beispiel für die Klasse .highlight-nees (verwendet $primary und reduziert das Schriftgewicht):

Hervorgehobener Text im nees-Style

2. Farben

Die folgenden Farbfelder basieren auf den in _variables.scss definierten SCSS-Variablen sowie den Bootstrap-Theme-Farben. Die Farbausgabe aktualisiert sich mit dem kompilierten Theme automatisch.

Primärfarbe

SCSS: $primary
HEX: #e05206

Sekundärfarbe

SCSS: $secondary
HEX: #b2b2b2

Tertiärfarbe

SCSS: $tertiary
HEX: #758c7f

Quartiärfarbe ist im Projekt definiert, wird hier aber bewusst nicht interaktiv demonstriert.

Quartiärfarbe

SCSS: $quaternary
HEX: #2d1e2f

Fließtext-Farbe

SCSS: $font-color / $fc
HEX: #5a5957

Transparente Weiß-Ton

SCSS: $transparentWhite
HEX (mit Alpha): #ffffffbf

Interaktive Farben

Hier kannst du testweise die wichtigsten Projektfarben anpassen. Die Farbfelder oben und Elemente mit den entsprechenden Bootstrap-Klassen übernehmen den gewählten Wert (nur auf dieser Demo-Seite).

Primärfarbe

Aktueller HEX-Wert: #e05206

Sekundärfarbe

Aktueller HEX-Wert: #b2b2b2

Tertiärfarbe

Aktueller HEX-Wert: #758c7f

Fließtext-Farbe

Aktueller HEX-Wert: #5a5957

3. Sonderelemente & Module

Nachfolgend werden ausgewählte, im SCSS definierte Module exemplarisch dargestellt. Die HTML-Struktur orientiert sich an den in specialElements.scss und weiteren Dateien definierten Klassen.

1. Leistungen-Kacheln (`.leistungen-cats`)

Definiert als Grid mit $globalGridTemplateColumns und $globalGap. Einzelne Einträge werden durch Rahmen und Bild-/Caption-Bereich dargestellt.

Leistung 1

Leistung 2

Leistung 3

Leistung 4

3.2 Referenzen-Kacheln (`.referenzen-cats`)

Nutzt analoge Struktur wie .leistungen-cats, ergänzt um Referenz-spezifische Bild-/Caption-Gestaltung.

Referenz 1

Referenz 2

Referenz 3

Referenz 4

2. Referenz-Grid mit Overlay (`.frame-layout-reference-grid`)

Overlay-Effekt beim Hover auf der Referenz. Die Struktur orientiert sich an .frame-layout-reference-grid mit .frame-inner, .referenz, .referenz-inner und .overlay.

Titel der Referenz
Kurze Beschreibung, die beim Hover sichtbar wird.

Referenz-Titel

Projektname

Kurze Beschreibung des Projekts. Textgröße und Farbe folgen den definierten Typographie- und Farbregeln.

3. Schräge Bildkachel (`.frame-slope`)

Die Klasse .frame-slope schneidet das Bild mittels clip-path schräg ab. Die Ausrichtung hängt davon ab, ob das Text/Bild-Element als .textpic-right oder .textpic-left ausgegeben wird.

Slope rechts

Beispiel für eine schräge Bildkante bei .textpic-right.

Slope links

Beispiel für eine schräge Bildkante bei .textpic-left.

4. Halb-breite Bildbühne (`.frame-half`)

Die Klasse .frame-half nutzt die volle Browserbreite für das Bild (50vw) und zentriert den Textbereich auf eine maximal lesbare Breite.

Frame Half – Bild rechts

Textbereich mit begrenzter Breite und Bild, das rechts bis an den Browserrand reicht.

Frame Half – Bild links

Variante mit Bild links und Text auf einer begrenzten Breite rechts daneben.

5. Frame-Höhen (`.frame-layout-h-…`)

Über die Klasse .frame-layout-h-100, .frame-layout-h-75, .frame-layout-h-50 oder .frame-layout-h-25 kann die Höhe eines Frames (z. B. einer Hero-Bühne) gesteuert werden.

.frame-layout-h-25

.frame-layout-h-50

.frame-layout-h-75

.frame-layout-h-100

6. Frame-Optionen: Überschriften & Positionierung

Die folgenden Beispiele zeigen die Auswirkungen der in TYPO3 verfügbaren Frame-Optionen, die über frame_options bzw. frame_class gesetzt werden können.

1. Border unter Überschrift (`.frame-option-border-headline`)

Beispiel-Überschrift

Subheadline

2. Switch Headline (`.frame-option-switch-headline`)

Die Option switch-headline vertauscht die Reihenfolge von Haupt- und Subheadline. In Kombination mit border-headline bleibt die Linie unter der Überschrift erhalten.

Beispiel-Überschrift

Subheadline (oben)

3. X-/Y-Position der Inhalte

Über die Optionen x-left, x-center, x-right sowie y-top, y-center, y-bottom wird die Position des Inhaltscontainers innerhalb eines Frames gesteuert.

x-left / y-top

oben links

x-center / y-center

zentriert

x-right / y-bottom

unten rechts

4. Meta-Informationen

Template-Datei

EXT:nees/Resources/Private/Templates/Page/Styleguide.html

SCSS-Basis

EXT:nees/Resources/Public/Scss/Theme/_variables.scss
EXT:nees/Resources/Public/Scss/Theme/theme.scss
EXT:nees/Resources/Public/Scss/Theme/Page/fonts.scss
EXT:nees/Resources/Public/Scss/Theme/Page/base.scss
EXT:nees/Resources/Public/Scss/Theme/Modules/specialElements.scss