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

Button

.btn	Links innerhalb eines Containers mit der Klasse .btn oder Links mit dieser werden als Buttons angezeigt.
.btnWhite, .btnGray, .btnSecond	Zusätzlich zur .btn-Klasse: verändert die Farbe des Buttons
.btnCenter	Zusätzlich zur .btn-Klasse: Zentriert einen Button
Seit 1.2.0
.fancyLink	Links innerhalb eines Containers mit der Klasse .fancyLink oder Links mit dieser werden als Animation und Icon hinter dem Link angezeigt angezeigt.

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.