Ticketsystem

Möchtest du einen Bug melden oder eine Individualisierung anfragen? Nutze dafür einfach mein Ticketsystem.

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.