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);
}