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
  • .uppercase – Text Transform zu Großbuchstaben (ab v.1.6.5)
  • .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 <=768px
  • .hidden-[xs, sm, md, lg] – Versteckt auf <= 768px

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
  • .color-custom – Color: var(–color-custom) !important (ab v.1.6.5)
  • .color-custom-2 – Color: var(–color-custom-2) !important (ab v.1.6.5)
  • bg-color-main – Background-Color: var(–color-main) !important (ab v1.6.10)
  • bg-color-sub – Background-Color: var(–color-sub) !important (ab v1.6.10)
  • bg-color-heavy – Background-Color: var(–color-heavy) !important (ab v1.6.10)
  • bg-color-light – Background-Color: var(–color-light) !important (ab v1.6.10)
  • bg-color-custom – Background-Color: var(–color-custom) !important (ab v1.6.10)
  • bg-color-custom-2 – Background-Color: var(–color-custom-2) !important (ab v1.6.10)

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