CSS Klassen
Diese vorgefertigten CSS-Klassen fehlen dir bei der Gestaltung deiner Webseite.
Font Klassen
| .h1 bis .h6 | Lasse einen Paragraph wie die jeweilige Überschrift aussehen |
| .colorFarbe* (z.B. colorWhite, colorAccent) | Färb Text in die entsprechende Farbe ein. |
| .fontSizeS bis .fontSize5XL | Schriftgröße ( M = Standard) |
| .subline | Gestaltet einen Text als Subline |
| .checkliste (für Listenelemente li) | Checkliste mit Häkchen |
| .noHyphens | Entfernt automatischen Trennungen in einem Wort |
Margin & Padding
Mit diesen Klassen kannst du den Abstand der Elemente konfigurieren. Dafür eine kurze Beschreibung der wichtigen Begriffleichkeiten:
Margin: Außenabstand (Abk.: m), Padding: Innenabstand (Abk.: p), Top: Oben (Abk.: t), Bottom: Unten (Abk.: b).
Ein großer Außenabstand nach oben, wäre also ein margin top in XL. Ergibt: mtXL
Ein kleiner Innenabstand nach unten wäre padding bottom in S. Ergibt: pbS
| .mt0, mtXS bis mt2XL | Außenabstand oben |
| .mb0, mbXS bis mb2XL | Außenabstand unten |
| .marginAuto | Setzt margin-left und margin-right auf auto, zentriert so das Element. |
| .pt0, ptXS bis pt2XL | Innenabstand top |
| .pb0, pbXS bis pb2XL | Innenabstand unten |
Grid
Ich empfehle, die Grid-Klassen nicht direkt in einem Element einzutragen, sondern mit dem mitgelieferten Grid-System zu arbeiten. Möglich ist dies natürlich trotzdem.
| .grid | Grundlage für das Grid, gefolgt von Spalteneinhalten: |
| .grid2Col bis .grid12Col | Erzeugt ein Grid mit zwei bis zwölf gleichmäßigen Spalten. |
| .grid1ColTablet bis .grid6ColTablet | Grid mit gleichmäßigen Spalten für das Tablet. |
| .grid1ColSmartphone bis .grid6ColSmartphone | Grid mit gleichmäßigen Spalten für das Smartphone. |
Artikel-Breite
| .fullWidth | Klasse für einen Artikel, um diesen auf die volle Breite zu strecken. |
| .maxWidthContainerSize | Klasse für ein Element einerhalb eines Artikels auf voller Breite (stattdessen: Hintergrund-Wrapper verwenden) |
Anzeige Einstellungen
| .hideOnMobile | Versteckt (display:none) auf dem Smartphone-Breakpoint |
| .hideOnTablet | Versteckt (display:none) auf Smartphone- und Desktop-Breakpoint |
| .hideOnDesktop | Versteckt (display:none) auf dem Desktop-Breakpoint |
Hintergrundfarbe
| .bgFarbe* (z.B. bgWhite, bgAccent) | Färbt den Hintergrund in die entsprechende Farbe ein. |
| .bgGradientFarbe* (z.B. bgGradientWhite, bgGradientAccent) | Färbt den Hintergrund in einen entsprechende Farbverlauf ein. |
