Die Komponenten stellen neben den gängigen Elementen diverse Helfer zur Verfügung. Bei ihnen handelt es sich meistens um CSS-Klassen, die in den verschiedensten Fällen zum Einsatz kommen. Im Folgenden werden diese Helfer kurz mit Einsatzzweck und Beispiel vorgestellt.
Clearfix¶ ↑
Die CSS-Klasse .clearfix
ist dafür zuständig, CSS-Floatings aufzuheben. Sie wird in der Regel auf das umgebende HTML-Element angewendet:
Ich folge wieder der normalen Anordnung
<div class="clearfix"> <div style="float: left;">Ich bin links</div> <div style="float: right;">Ich bin rechts</div> </div> <p>Ich folge wieder der normalen Anordnung</p>
Elemente verstecken und Zeigen¶ ↑
Sollen Elemente gänzlich verschwinden, hilft die CSS-Klasse .hidden
. Sie versteckt Elemente auch vor Screen-Readern.
<button type="button" class="hidden">Unsichtbar</button>
Elemente Responsiv verstecken¶ ↑
Sollen Elemente responsiv verschwinden, helfen die CSS-Klassen .hidden-{screenklasse}
& .visible-{screenklasse}-{displaytyp}
sie sind für die Screenklassen 's', 'm', 'l', 'xl' und die Displaytypen 'block', 'inline' und 'inline-block' verfügbar. Die Klassen .hidden-{screenklasse}
versteckt das Element nur in der angegeben Screenklasse! Die Klassen .visible-{screenklasse}-{displaytyp}
zeigt das Element nur in der angegeben Screenklasse! Beide Klassen versteckten die Elemente auch vor Screen-Readern.
Sichtbar auf |
X-Large
X-Large
|
Large
Large
|
Medium
Medium
|
Small
Small
|
Kombiniert Sichtbar auf |
XL und S
|
L und M
|
XS und M
|
XL und L
|
Inhaltsseparatoren¶ ↑
Oft müssen Gruppen von Inhalten visuell separiert werden - hierzu bringen die Componenten Inhaltsseparatoren mit. Sie beinflussen den horizontalen Abstand von Elementen in einer Spalte. Für elemente kann auch ein umschliesendes Div verwendet werden. Separatoren werden von 6
-18
Rastereinheiten angeboten:
Separiert mit 8BU
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Separiert mit 6BU
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div style="border: 1px solid #eee;"> <div class="cont-sep-8"> <h1 class="underline">Separiert mit 8BU</h1> </div> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <div class="cont-sep-6"> <h1 class="underline">Separiert mit 6BU</h1> </div> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div>
Abstandshelfer¶ ↑
Oft benötigen Elemente zusätzlichen Platz, um hervorgehoben oder eingepasst zu werden. Um im vorgegebenen Gestaltungsraster zu bleiben, bringen die Komponenten Abstandshelfer mit. Sie beeinflussen jeweils die margin
-Eigenschaft des Elements, auf das sie angewendet werden. Die CSS-Klasse entscheidet, welches margin
mit welchem Wert beeinflusst wird offset-{screenklasse}-{ausrichtung}-{rastereinheiten}
. Aktuell gibt es die Screenklassen 's', 'm', 'l', 'xl' und Ausrichtungen top
, right
, bottom
, left
. Es werden jeweils 1
-10
Rastereinheiten angeboten:
<div style="border: 1px solid #eee;"> <div class="offset-left-5 offset-l-left-5 offset-m-left-10">5 Rastereinheiten nach rechts</div> </div>
Zentrierhelfer¶ ↑
Oft müssen Elemente in einer Spalte Zentriert werden - hierzu bringen die Componenten Zentrierhelfer mit. Sie beinflussen die horizontale Ausrichtung von Elementen in einer Spalte. Hierfür wird jedoch ein umschliesendes Div benötigt.
<div style="border: 1px solid #eee;"> <div class="h-ctr"> <button type="button" class="btn btn-default">Standard</button> </div> </div>
<div style="border: 1px solid #eee; height: 100px"> <div class="h-ctr v-ctr"> <div> <button type="button" class="btn btn-default">Standard</button> </div> </div> </div>