Framework Testseite

Diese Seite dokumentiert und testet die wichtigsten Bausteine des SCSS-Frameworks: Typografie, Buttons, Formulare, Tabellen, das Flex-Grid-System, Cards und Utilities. Jeder Abschnitt zeigt sowohl das optische Ergebnis als auch Beispiel-Markup mit den verwendeten Klassen.

Typografie

Die Grundtypografie wird in 4_elements/_typography.scss definiert. Basis sind die Design-Tokens aus 1_settings/_config.scss (z. B. --font-size-base, --line-height-base, --color-text).

Dies ist ein einleitender Absatz. Hier testest du Schriftart, Zeilenhöhe (line-height), Farben und den Standard-Absatzstil.

H1 – Haupttitel (nur einmal pro Seite sinnvoll)

H2 – Abschnittstitel

H3 – Unterabschnitt

H4 – Card- oder Widget-Titel

H5 – kleinere Überschrift

H6 – Label / Meta-Information

Ein normaler Absatz mit einem stark hervorgehobenen Wort und einem betonten Teil. Außerdem ein Link im Fließtext.

Ein Absatz mit zentriertem Text, Primärfarbe und leichter Hinterlegung über Utility-Klassen.

„Dies ist ein Zitat-Block. Er sollte sich klar vom normalen Text unterscheiden.“

function test() {
  const message = "Hello World";
  console.log(message);
}

Listen & Definitionen

• Listenpunkt eins
• Listenpunkt zwei
  • Unterpunkt A
  • Unterpunkt B
• Listenpunkt drei

1. Erster Schritt
2. Zweiter Schritt
3. Dritter Schritt

Begriff 1

Beschreibung zum Begriff 1.

Begriff 2

Beschreibung zum Begriff 2.

Buttons

Buttons basieren auf der Klasse .btn und werden durch Modifikatoren wie .btn--primary, .btn--secondary oder .btn--danger variiert. Größenvarianten sind z. B. .btn--small und .btn--large.

Primärer Button Sekundärer Button Gefahr-Button Deaktiviert

Klein Standard Groß

Link als Button

Formulare

Formular-Elemente nutzen die Basisklassen .form-group, .form-control und .form-feedback. Zustände wie Validierung werden über .is-invalid abgebildet.

Tabellen

Tabellen werden in 4_elements/_tables.scss grundlegend gestylt. Standardmäßig nutzen sie border-collapse, Zeilenabstände über --spacing-2 und eine leichte Zebra-Stilierung jeder zweiten Zeile.

Flex-Grid – Basis & Gewichte

Das Flex-Grid basiert auf einem Container .flex und Spaltenklassen wie .col, .col-2, .col-3. Mobile-first sind alle Spalten 100 % breit; ab md greifen die Gewichte.

Drei gleich breite Spalten (ab md nebeneinander)

Layout 1 : 2 : 1 (Gewichte .col + .col-2)

Flex-Grid – Alignment & flex-break

Zusätzliche Klassen wie .justify-between, .vertical-center und .flex-reverse steuern die Ausrichtung der Inhalte innerhalb von .flex. .flex-break erzwingt einen Zeilenumbruch innerhalb desselben Flex-Containers, z. B. in CMS-Layouts.

justify-between & vertical-center

flex-reverse

flex-break (CMS-Szenario)

Cards

Cards sind mit .card als Block und Elementklassen wie .card__header, .card__body, .card__footer aufgebaut. Modifikatoren wie .card--shadow oder .card--media-top verändern Optik und Layout.

Card mit Bild

Diese Card demonstriert ein Bild oben und Text darunter.

Details

Utilities (Trumps)

Utility-Klassen in 6_trumps/_utilities.scss überschreiben gezielt Eigenschaften und sind ideal für Prototyping oder kleine Layout-Korrekturen. Sie nutzen die Design-Tokens, z. B. --spacing-* oder --color-primary.

Dieser Text kombiniert mehrere Utility-Klassen: zentrierter Text, Primärfarbe, größerer Abstand und mehr Padding.