Liste der verfügbaren CSS-Klassen

Mit CSS-Klassen können Design und Verhalten auf einfache Weise gesteuert werden.
Verschiedene CSS-Klassen können miteinander kombiniert werden (z.B. text-s max-400 = kleine Schrift, maximal 400 Pixel breit). Klassennamen einsetzen unter: Experteneinstellungen > rechtes Feld.
Klassen immer getrennt durch ein Leerzeichen (keine Kommas) ins Klassenfeld schreiben.

Typographie

Anwenden auf Textelemente oder Überschriften.

  • text-xs sehr kleine Schrift (Fußnoten, etc.)
  • text-s kleine Schrift
  • text-l mittelgroße Schrift
  • text-xl große Schrift
  • text-center Text zentriert
  • text-right Text rechtsbündig
  • text-grey graue Schrift
  • uppercase Großbuchstaben

Listen

Anwenden auf Listenelemente.

  • list-margin Liste mit größeren Abständen zwischen den Listenpunkten
  • list-line Liste mit Trennlinien
  • list-check Liste mit Check-Icons (Häkchen)
  • list-numbers Nummerierte Liste mit runden Bullets

Layout

Anwenden auf verschiedene Inhaltselemente.

  • block-left Block links ausrichten
  • block-center Block zentrieren
  • center Block und Text zentrieren
  • max-1300 Absatz/Bild über ganze Breite des Inhaltsbereichs (1300px)
  • max-900 Absatz/Bild maximal 900px breit für bessere Lesbarkeit (voreingestellt für Absatz)
  • max-1200 ... max-200 Absatz/Bild maximal 1200px breit … in 100er-Schritten bis 200px
  • margin-top-s kleiner Abstand nach oben
  • margin-top-m mittlerer Abstand nach oben
  • margin-top-l großer Abstand nach oben
  • margin-bottom-s kleiner Abstand nach unten
  • margin-bottom-m mittlerer Abstand nach unten
  • margin-bottom-l großer Abstand nach unten
  • text-column-2 Text fließt automatisch in zwei Spalten (Smartphone: einspaltig), anwenden auf Textelement

Hintergrundfarben

Anwenden auf Artikel.

  • background-white weißer Hintergrund (normalerweise voreingestellt)
  • background-grey-light hellgrauer Hintergrund
  • background-grey-mid mittelgrauer Hintergrund
  • background-grey-dark dunkelgrauer Hintergrund
  • background-sky hellblauer Hintergrund
  • background-blue-dark dunkelblauer Hintergrund

Spalten

  • columns Gruppenelement, das Spalten beinhaltet. Die Spaltenanordnung funktioniert auch ohne Gruppenelement, wird aber nicht empfohlen. Vorgabe: Spalten verteilen sich gleichmäßig über die gesamte Breite und übernehmen die Höhe der höchsten Spalte.
    Unterklassen:
    • justify-left Spalten im Gruppenelement sind linksbündig
    • justify-right Spalten im Gruppenelement sind rechtsbündig
    • justify-center Spalten im Gruppenelement sind horizontal zentriert
    • justify-evenly Spalten im Gruppenelement haben einen gleichen Abstand zueinander
    • align-top Spalten im Gruppenelement ordnen sich oben an
    • align-bottom Spalten im Gruppenelement ordnen sich unten an
    • align-center Spalten im Gruppenelement sind vertikal zentriert
    • align-baseline Spalten im Gruppenelement orientieren sich an der Textgrundlinie
  • column-100 Spalte mit voller Breite, als Abschluss aller darüber liegenden Spaltenaufteilungen (wird mit Gruppenelement + columns nicht benötigt)
  • column-66 Spalte, 66% Breite
  • column-60 Spalte, 60% Breite
  • column-50 Spalte, 50% Breite
  • column-40 Spalte, 40% Breite
  • column-33 Spalte, 33% Breite (zusammen mit column-66 oder 3x column-33)
  • column-25 Spalte, 25% Breite (auf kleineren Displays 50% Breite)

Bilder

  • img-80, img-70, img-60, img-50, img-40, img-33, img-30 Bildbreite 80% ... 30% der Spaltenbreite