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