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 |
| .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 |
| seit 2.0.0 | |
| .pl0, .pr0, .ml0, .mr0 |
Setzt das Padding / Margin links / rechts auf 0 |
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. |
| Ab 2.0.0 | |
| .gridPlaceContent_end, .gridPlaceContent_center | Positioniere alle Inhalte eines Containers vertikal zentriert oder unten ausgerichtet. Container erhält "display:grid". |
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 |
| Seit 2.0.0 | |
| .border-tl-big, .border-tr-big, .border-bl-big, .border-br-big | Sehr großer Border-Radius an einer der vier Ecken. |
| .imageFullWidth | Streckt ein Bild auf 100% Breite des Containers. |
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. |
| Seit 2.0.0 | |
| .accentBorderBG optional mit .--bottomLeft | Erzeugt einen großen Farbakzent oben rechts oder unten links. |
Animationen
| Ab 2.0.0 | |
| .imgSoftZoomAnimation | Erzeugt ein langsamen, endlosen Zoom auf ein Bild. |
Card / Boxen
| Ab 1.3.0 | |
| .simpleCard | Für ein Text-Element oder einer Elementgruppe, um sie wie eine Card / Box zu gestalten. |
| .imageCard | Für ein Text-Element mit Bild (Über Quelldatei). |
| Ab 1.3.0 | Erzeugt ein langsamen, endlosen Zoom auf ein Bild. |
| .noticeBox | Blaue Schrift, blaue Border für eine Box, die einen Hinweis beinhaltet. |
| Ab 2.0.0 | |
| .glassCard | Eine Card mit Glas-Optik und Hintergrundunschärfe. Wirkt gut auf dunklen Hintergrundbildern oder -videos. |
Border
| Ab 2.0.0 | |
| .borderSolid | Fügt eine durchgängige 1px Border ein |
| .borderColorWhite, oder -Lightgray, -Gray,- Darkgray, -Black, -Main / -Accent, -Second | Ändert die Farbe der Border. |