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

Hintergrundfarbe (Kopie)

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