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 |
| .checklist (für Listenelemente li) | Checkliste mit Häkchen |
| .noHyphens | Entfernt automatischen Trennungen in einem Wort |
| .uppercase | Gibt Text in Großbuchstaben aus |
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 |
| seit 1.0.4 / 1.1.0 | |
| .mlAuto,.mrAuto | Margin-left: auto, Margin-right: auto |
| seit 1.3.3 | |
| .m0, mXS bis m2XL | Außenabstand in alle vier Richtungen |
| .p0, pXS bis p2XL | Innenabstand in alle vier Richtungen |
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
| ,.bgWhite, .bgLightgray, .bgGray, .bgDarkgray, .bgBlack, .bgAccent, .bgSecond | Färbt den Hintergrund in die entsprechende Farbe ein. |
| .bgGradientWhite, .bgGradientLightgray, .bgGradientGray, .bgGradientDarkgray, .bgGradientBlack, .bgGradientAccent, .bgGradientSecond | Färbt den Hintergrund in einen entsprechende Farbverlauf ein. |
Maximale Breite
| Seit 1.0.4 / 1.1.0 | |
| .maxW400px bis .maxW900px | Maximale Breite auf einem view-port von mindestens $width-smartphone |
| .m_maxW400px bis .m_maxW900px | Maximale Breite auf einem view-port bis maximal $width-smartphone |
| Seit 1.2.0 | |
| .width100 | Setzt die Breite eines Containers auf 100% |
Bilder
| .imageBorderRadiusXS bis .imageBorderRadiusXL | Rundet die Ecken des innenliegenden Bildes ab |
| Seit 1.0.4 / 1.1.0 | |
| .imageCenter, .imageRight | Positioniert das innenliegende Bild |
Allgemeines Styling
| .borderRadiusXS bis .borderRadiusXL | Rundet Container ab - für Bilder siehe imageBorderRadiusXS |
| Seit 1.2.0 | |
| .boxShadowS bis boxShadowXL | Erzeugt einen Schatten hinter dem Element. |