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.

Abstände

• .m-t-0 – .m-t-5 und .p-t-0 – .p-t-5 – schafft einen Abstand nach oben auf Basis der $base-spacing-unit
• .m-b-0 – .m-b-5 und .p-b-0 – .p-b-5 – schafft einen Abstand nach unten auf Basis der $base-spacing-unit

Breiten

• .article-[viewport]-[cols] - Mit den Klassen .article-xs-1 – .article-xl-12 kannst du Artikel auf eine prozentuale Breite beschränken, um so beispielsweise zu verhindern, dass Texte eine zu große Laufweite haben.

Text

• .text--inverted - Gibt dem Text die Farbe aus $color-text--inverted

Rahmen

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

Block

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