CSS Klassen (Helper Klassen)

Text #

  • .black – Textfarbe schwarz !important
  • .white – Textfarbe weiß !important
  • .fs20 – Font-Size 20 !important
  • .fs40 – Font-Size 40 !important
  • .fwb / .bold – Font Weight Bold !important
  • .fwl – Font Weight Lighter !important
  • .text-center – text-align: center (Bootstrap)
  • .font-heading – Font-Family Customizer Schriftart Überschrift !important
  • .font-text – Font-Family Customizer Schriftart Text !important
  • .font-button – Font-Family Customizer Schriftart Button !important
  • .font-custom – Font-Family Customizer Schriftart Custom !important

Responsive Klassen #

  • .visible-[xs, sm, md, lg] – Nur sichtbar auf (Smartphone, Tablet, Kleiner-, großer PC) (Bootstrap)
  • .hidden-[xs, sm, md, lg] – Versteckt auf (Smartphone, Tablet, Kleiner-, großer PC) (Bootstrap)

Abstände #

  • .mt10 – Margin-Top 10 !important
  • .mt20 – Margin-Top 20 !important
  • .mt60 – Margin-Top 60 !important
  • .mt100 – Margin-Top 100 !important

Farben #

  • .color-main – Color: var(–color-main) !important
  • .color-sub – Color: var(–color-sub) !important
  • .color-heavy – Color: var(–color-heavy) !important
  • .color-light – Color: var(–color-light) !important

Sonstiges #

  • .br20 – Border-Radius 20px !important
  • .float-left – float: left !Important (Bootstrap)
  • .float-right – float: right !Important (Bootstrap)
  • .hidden – display none !important
  • .w100 – Width: 100% !important
  • .flex-center Centert den innenliegenden Container horizontal und vertikal

Theme Variablen in eigenem CSS nutzen #

Das bundesweit.digital Theme bietet mehrere Variablen die per CSS in eigenen Elementen Verwendung finden sollten. Diese werden durch die Theme-Einstellungen vorgenommen und sind für jedes Element per CSS verfügbar.

Vordefinierte Variablen #

Primär und Sekundärfarben #

  • color-main
  • color-sub

Primärfarben mit Transparenz #

  • color-transparent-heavy
  • color-transparent-light

Optionale Farben #

  • color-heavy
  • color-light

Beispiel #

.my-title{
color: var(–color-main);
}

Powered by BetterDocs