Hilfsklassen

Um Elemente und Module weiter zu individualisieren, stehen dir außerdem ein paar Hilfsklassen zur Verfügung, um Abstände, Breiten, Rahmen und Textfarbe zu beeinflussen.

Standardmäßig sind der Theme Toolbox Außenabstände (margins) für Elemente und Module vorgesehen, während Innenabstände (paddings) für Artikel verwendet werden. Alle Abstände basieren der Variable --base-spacing-unit.

• Abstand oben 0 bis 5: .m-t-0 – .m-t-5 und .p-t-0 – .p-t-5 – schafft einen Abstand nach oben
• Abstand unten 0 bis 5: .m-b-0 – .m-b-5 und .p-b-0 – .p-b-5 – schafft einen Abstand nach unten

Abstände werden in der trumps/helper.scss definiert.

• Um einen Artikel weniger breit und zentriert darzustellen, gibt es in der Theme Toolbox die Option Artikel schmal+zentriert in den Artikeleinstellungen. Diese bewirkt, dass dem Artikel die Klassen article-lg-10 article-xl-8 article-start-lg-2 article-start-xl-3 gegeben werden. In einem 12-spaltigen Grid ist der Artikel also ab dem lg-Viewport nur noch 10/12 breit, ab dem xl-Viewport nur noch 8/12 breit.

• Weitere Breiteneinstellungen können nach dem gleichen Schema ergänzt werden. Die Artikel-Klassen article- werden in der trumps/helper.scss definiert.

• .text--inverted - Gibt dem Text die Farbe aus var(--color-text-inverted)

• .border-top - Fügt dem Element einen Rahmen im Stil von var(--base-border) zu
• .border-bottom - Fügt dem Element einen Rahmen im Stil von var(--base-border) zu

• .block--center – zentriert das Element horizontal mittig