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 |
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 |
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. |