Version: 2.5.0

Hilfsklassen

Diese Dokumentation beschreibt die verfügbaren CSS-Hilfsklassen für Layout CSS-Flex/Grid, Abstände(Spacings), Stapelung(Stack) und Sichtbarkeit(Visibility).

CSS Flex

Utilities für Flex-Container und Items. Die meisten Eigenschaften unterstützen Breakpoints (z.B. .kern-flex-row-md).

Container

.kern-flex: display: flex
.kern-inline-flex: display: inline-flex
.kern-flex-row[-{breakpoint}]: flex-direction: row
.kern-flex-row-reverse[-{breakpoint}]: flex-direction: row-reverse
.kern-flex-col[-{breakpoint}]: flex-direction: column
.kern-flex-col-reverse[-{breakpoint}]: flex-direction: column-reverse
.kern-flex-wrap: flex-wrap: wrap
.kern-flex-nowrap: flex-wrap: nowrap

Ausrichtung (Justify & Align)

Auch hier sind Breakpoints möglich (z.B. .kern-justify-content-between-lg).

Justify (Hauptachse):
- .kern-justify-content-start[-{breakpoint}]
- .kern-justify-content-end[-{breakpoint}]
- .kern-justify-content-center[-{breakpoint}]
- .kern-justify-content-between[-{breakpoint}]
- .kern-justify-content-around[-{breakpoint}]
- .kern-justify-content-evenly[-{breakpoint}]
Align Items (Querachse):
- .kern-align-items-start[-{breakpoint}]
- .kern-align-items-end[-{breakpoint}]
- .kern-align-items-center[-{breakpoint}]
- .kern-align-items-stretch[-{breakpoint}]
- .kern-align-items-baseline[-{breakpoint}]

Beispiele:

<div class="kern-flex kern-align-items-center kern-justify-content-between">
  <div>Start</div>
  <div>Mitte</div>
  <div>Ende</div>
</div>

Vertikale Ausrichtung (Column) mit Responsive Change:

Wechselt von row (Mobil) zu column (ab md).

<div class="kern-flex kern-flex-row kern-flex-col-md kern-align-items-center">
  <div>Item 1 (Mobil: Row, MD: Col)</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Order

Die Reihenfolge von Flex-Items kann gesteuert werden. Unterstützt auch Breakpoints (z.B. .kern-order-2-sm).

.kern-order-{0-12}[-{breakpoint}]
.kern-order-first[-{breakpoint}] (Setzt order: -9999)
.kern-order-last[-{breakpoint}] (Setzt order: 9999)

<div class="kern-flex kern-align-items-center kern-justify-content-between">
  <div class="kern-order-2 kern-order-first-sm">A (Mobil: 2, SM: 1)</div>
  <div class="kern-order-3 kern-order-2-sm">B (Mobil: 3, SM: 2)</div>    
  <div class="kern-order-1 kern-order-last-sm">C (Mobil: 1 SM: 3)</div>
</div>

CSS Grid

Die KERN Hilfsklassen bieten einen Low-Level-Zugriff auf das CSS Grid System. Sie ermöglichen maximale Flexibilität beim Aufbau komplexer Layouts, ohne Custom CSS schreiben zu müssen.

Funktionsweise:

Ein Grid wird durch den Wrapper .kern-grid definiert (display: grid).
Es ersetzt die klassische .kern-row Architektur.
Spalten und Abstände werden über Modifier-Klassen gesteuert.

Beschreibung

Utilities für display: grid.

.kern-grid: display: grid (Default 12 Spalten, gap-lg)
.kern-inline-grid: display: inline-grid
.kern-grid-cols-{n}[-{breakpoint}]: Definiert Spaltenanzahl (1-12). Beispiel: .kern-grid-cols-3
.kern-grid-rows-{n}[-{breakpoint}]: Definiert Reihenanzahl (1-6).
.kern-gap-{size}[-{breakpoint}]: Definiert Grid-Lücken (Größen wie Spacing). Unterstützt Breakpoints (z.B. .kern-gap-md-lg).
- Auch .kern-gap-x-{size} und .kern-gap-y-{size}.

Spalten-Platzierung (Items)

Für die Platzierung von Elementen im Grid:

.kern-col-{n}[-{breakpoint}]: grid-column: span n (Spannweite)
.kern-col-start-{n}[-{breakpoint}]: Startet bei Spaltenlinie n.
.kern-col-end-{n}[-{breakpoint}]: Endet bei Spaltenlinie n.

Beispiele:

<!-- Grid mit 3 Spalten und kleinem Abstand, größer ab md -->
<div class="kern-grid kern-grid-cols-3 kern-gap-sm kern-gap-xl-md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Spalten überspannen (Col Span):

<div class="kern-grid kern-grid-cols-3 kern-gap-sm">
  <div class="kern-col-2">Item 1 (Span 2)</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div class="kern-col-2">Item 4 (Span 2)</div>
</div>

Drei Spalten Layout

Hier werden drei gleich breite Spalten über alle Viewports hinweg erzeugt.

<div class="kern-grid">
    <div class="kern-col-4">.kern-col-4</div>
    <div class="kern-col-4">.kern-col-4</div>
    <div class="kern-col-4">.kern-col-4</div>
    <div class="kern-col-4">.kern-col-4</div>
    <div class="kern-col-4">.kern-col-4</div>
</div>

Responsive Anpassung

Nutze responsive Suffixe, um das Layout anzupassen. Hier starten wir mit 2 Spalten auf Mobile und wechseln zu 4 Spalten ab dem md-Breakpoint.

<div class="kern-grid kern-gap-sm">
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
    <div class="kern-col-12 kern-col-6-sm kern-col-4-md">.kern-col-12 .kern-col-6-sm .kern-col-4-md</div>
</div>

Verwendungsregeln

1. Raster Definition

Definiert die Grundstruktur des Grids auf dem Container.

Klasse	Beschreibung
`kern-grid`	Aktiviert CSS Grid.
`kern-grid-cols-[n]`	Definiert `n` gleich breite Spalten (n=1-12, none).
`kern-grid-rows-[n]`	Definiert `n` gleich hohe Reihen (n=1-6, none).
`kern-grid-flow-row`	Füllt Elemente horizontal (Standard).
`kern-grid-flow-col`	Füllt Elemente vertikal.

2. Abstände (Gap)

Steuert den Abstand zwischen Spalten und Reihen.

Klasse	Eigenschaft
`kern-gap-[size]`	Abstand horizontal und vertikal (`xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `none`).
`kern-gap-x-[size]`	Nur horizontaler Abstand (Spalten).
`kern-gap-y-[size]`	Nur vertikaler Abstand (Reihen).

3. Wrapping

Grid-Items brechen automatisch in die nächste Zeile um, wenn mehr Spalten als verfügbar (12) belegt werden.

<div class="kern-grid kern-grid-cols-12 kern-gap-sm">
    <!-- 4 Items à 6 Spalten = 24 Spalten = 2 Zeilen -->
    <div class="kern-col-6">.kern-col-6</div>
    <div class="kern-col-6">.kern-col-6</div>
    <div class="kern-col-6">.kern-col-6</div>
    <div class="kern-col-6">.kern-col-6</div>
</div>

4. Positionierung (Starts & Ends)

Ersetzt traditionelle Offsets. Definiert explizit, wo ein Element beginnt oder endet.

Klasse	Beschreibung
`kern-col-start-[n]`	Beginnt an der vertikalen Linie `n` (1-13, auto).
`kern-col-end-[n]`	Endet an der vertikalen Linie `n` (1-13, auto).
`kern-row-start-[n]`	Beginnt an der horizontalen Linie `n` (1-7, auto).
`kern-col-end-1`	Endet an der letzten Linie (rechts außen).

<div class="kern-grid kern-grid-cols-6 kern-gap-sm">
    <div class="kern-col-2 kern-col-start-2">.kern-col-start-2</div>
    <div class="kern-col-start-5 kern-col-end-1">.kern-col-start-5</div>
</div>

5. Automatische Spalten (Auto Columns)

Elemente ohne explizite Spalten-Klasse belegen standardmäßig eine Einheit des 12er-Rasters. Die Klasse kern-col-auto sorgt dafür, dass das Element seine Breite basierend auf seinem Inhalt berechnet, jedoch innerhalb des Raster-Systems bleibt. kern-col-auto nimnt in CSS-Grid genau eine Raster-Zelle ein, egal wie breit der Inhalt ist.

<div class="kern-grid kern-grid-cols-12 kern-gap-sm">
    <div class="kern-col-3">.kern-col-3</div>
    <div class="kern-col-auto">.kern-col-auto</div>
    <div class="kern-col-3">.kern-col-3</div>
</div>

6. Verschachtelung (Nesting)

Grids können unendlich tief verschachtelt werden. Das innere Grid erbt nicht automatisch die Spaltenanzahl des Eltern-Elements, es definiert einen neuen Grid-Kontext.

<div class="kern-grid kern-grid-cols-2 kern-gap-md">
    <div>Spalte 1</div>
    <div class="kern-grid kern-grid-cols-2 kern-gap-xs">
        <div>Nested 1</div>
        <div>Nested 2</div>
    </div>
</div>

7. Ausrichtung (Alignment)

Horizontal (Justify) & Vertikal (Items)

<!-- Container Level -->
<div class="kern-grid kern-grid-cols-3 kern-gap-sm kern-align-items-center">
    <div>Default (Center)</div>
    <!-- Item Level Overrides -->
    <div class="kern-align-self-start">.kern-align-self-start</div>
    <div class="kern-align-self-end">.kern-align-self-end</div>
</div>

Bestandteile

Breakpoints

Suffix	Breakpoint	Pixel (min-width)
(kein)	Default	0px
`-sm`	Small	576px
`-md`	Medium	768px
`-lg`	Large	992px
`-xl`	X-Large	1200px
`-xxl`	XX-Large	1400px

Alle Klassen folgen dem Mobile First Ansatz.

Dos and Don'ts

Do: Nutze kern-gap, um Abstände zu definieren.
Do: Verwende kern-col-full für Elemente, die aus dem Raster ausbrechen sollen.
Don't: Mische kern-row (Legacy) und kern-grid Syntax.

Container

Kern Container

Der Container ist eine der wichtigsten Layout-Komponenten, da er die zentrale Begrenzung für den Inhalt Ihrer Website definiert.
Die Utility-Klasse .kern-container dient als primäres Layout-Element, das sicherstellt, dass der gesamte Seiteninhalt horizontal zentriert und auf eine maximale, lesbare Breite begrenzt wird.
Sie sollte das direkte Kind des body-Tags oder des Haupt-Layout-Bereichs sein.

Kern Container Fluid

Der Fluid Container .kern-container-fluid ist eine Variante des Standard-Containers, die im Gegensatz zu diesem keine maximale Breite (max-width) definiert.
Stattdessen nimmt er auf allen Breakpoints und Bildschirmgrößen immer die volle Breite des Viewports ein. Die Klasse wird typischerweise nur verwendet, um den horizontalen Abstand (padding-left, padding-right) an den Seiten der Seite beizubehalten, während der Inhalt selbst die gesamte verfügbare Fläche nutzen kann.
Dies ist ideal für Design-Elemente, die sich über die volle Breite erstrecken müssen

Funktionsweise

Zentrierung: Setzt margin-left und margin-right auf auto, um den Container immer in der Mitte des Viewports auszurichten.
Breitenbegrenzung: Definiert eine max-width, die an Ihre Breakpoints gebunden ist.
Dies verhindert, dass der Inhalt auf sehr breiten Bildschirmen (z.B. großen Monitoren) unleserlich breit wird.
Horizontaler Abstand (Padding): Wendet ein horizontales padding an, um zu verhindern, dass der Inhalt an den Rändern des Browsers klebt, insbesondere auf kleinen Viewports (Handys).

Breakpoints	Max-Width
sm: 576px	sm: 96%
md: 768px	sm: 96%
lg: 992px	sm: 96%
xl: 1200px	sm: 96%
xxl: 1400px	xxl: 1536px

Gap (Abstände)

Diese Klassen nutzen die gap-Eigenschaft, um Abstände zwischen den Flex und Grid Elementen zu definieren, ohne zusätzliche Margins oder Paddings.

Hier sind alle KERN-Spaces anwendbar:

Eigneschaft	Wert
none	var(--kern-metric-space-none) - (0px)
xxs	var(--kern-metric-space-2x-small) - (2px)
xs	var(--kern-metric-space-x-small) - (4px)
sm	var(--kern-metric-space-small) - (8px)
md	var(--kern-metric-space-default) - (16px)
lg	var(--kern-metric-space-large) - (24px)
xl	var(--kern-metric-space-x-large) - (32px)

Die KERN Spaces Eigenschaften können in die CSS-Klassen eingesetzt werden

CSS-Klasse	CSS-Eigenschaft	Beschreibung
.kern-gap-[none, xxs, ..]	gap: wert;	Definiert den Abstand zwischen Spalten und Zeilen.
.kern-gap-x-[none, xxs, ..]	column-gap: wert;	Definiert nur den horizontalen Abstand (Spalten).
.kern-gap-y-[none, xxs, ..]	row-gap: wert;	Definiert nur den vertikalen Abstand (Zeilen).

Beispiele:

<p class="kern-body">Beispiel: None (Default)</p>  
<div class="kern-flex">
  <div>1</div>
  <div>3</div>
  <div>2</div>
</div>

<p class="kern-body">Beispiel: 2x-small</p>  
<div class="kern-flex kern-gap-xxs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: x-small</p>  
<div class="kern-flex kern-gap-xs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: small</p>  
<div class="kern-flex kern-gap-sm">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: Default</p>  
<div class="kern-flex kern-gap-md">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: Large</p>  
<div class="kern-flex kern-gap-lg">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p class="kern-body">Beispiel: X-Large</p>  
<div class="kern-flex kern-gap-xl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive Beispiel:

<div class="kern-grid kern-grid-cols-2 kern-grid-rows-2 kern-gap-md kern-gap-xxs-sm kern-gap-xl-md kern-gap-xs-xl kern-gap-xl-xxl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Spacing

Die Abstandsklassen steuern margin und padding und folgen dem Schema:

.kern-{property}{sides}-{size}[-{breakpoint}]

Property: m (Margin) p (Padding)
Sides:
- (leer): Alle Seiten
- t: Top (Oben)
- b: Bottom (Unten)
- l: Left (Links)
- r: Right (Rechts)
- x: Horizontal (Links & Rechts)
- y: Vertikal (Oben & Unten)
Size: Definiert die Größe des Abstands.
Breakpoint: (Optional) Definiert ab welcher Bildschirmbreite die Klasse gilt.

Beispiele: .kern-m-md, .kern-pt-lg .kern-p-lg-sm (Large Padding ab Breakpoint Small)

Verfügbare Größen

Suffix	Größe	Beschreibung
`none`	0px	Kein Abstand
`xxs`	2px	Ultra klein
`xs`	4px	Extra klein
`sm`	8px	Klein
`md`	16px	Mittel (Standard)
`lg`	24px	Groß
`xl`	32px	Extra Groß
`auto`	auto	Automatisch (nur Margin)

Verfügbare Breakpoints

Gleiche Breakpoints wie beim Grid-System:

(kein Suffix): Immer aktiv (Mobile First)
-sm: ab 576px
-md: ab 768px
-lg: ab 992px
-xl: ab 1200px
-xxl: ab 1600px

Beispiele:

<!-- Außenabstand (Margin) oben und unten: Mittel (16px) -->
<div class="kern-my-md">
  Inhalt mit vertikalem Margin
</div>

<!-- Innenabstand (Padding) überall: Groß (24px) -->
<div class="kern-p-lg">
  Inhalt mit viel Padding
</div>

Responsive Abstände:

Verwende Suffixe um Abstände responsiv zu ändern. Beispiel: kern-p-sm kern-p-lg-md => Kleines Padding auf Mobile großes Padding ab Tablet (md).

<div class="kern-p-sm kern-p-lg-md">
  Responsive Padding: Klein (8px) auf Mobile Groß (24px) ab Tablet.
</div>

Horizontal zentrieren:

Mit kern-mx-auto kann ein Block-Element mit fester Breite horizontal zentriert werden.

<div class="kern-mx-auto">
  Zentriertes Element (50% Breite)
</div>

Stack

Die Stack-Komponente dient dazu, Elemente vertikal anzuordnen.
Sie ist hochflexibel und kann an jeder Stelle innerhalb des Layouts eingesetzt werden, um konsistente Abstände zwischen Elementen zu gewährleisten.

Default: .kern-stack: Vertical Flex Container mit Standard-Gap (md).
Sizes: .kern-stack-{size}: Ändert den Abstand zwischen den Elementen. Gilt für alle Bildschirmgrößen.
- Größen: none xxs, xs, sm, md, lg, xl.
Responsive: .kern-stack-{size}-{breakpoint}

Beispiele:

<div class="kern-stack kern-stack-lg">
  <div>Item Oben</div>
  <div>Item Mitte</div>
  <div>Item Unten</div>
</div>

Verschachtelter Stack

Die Stack-Komponente unterstützt eine uneingeschränkte Verschachtelung, wodurch hochflexible Layout-Hierarchien innerhalb einer Seite möglich sind.

<div class="kern-stack">
<p class="kern-body">Zeile 1 (stack)</p>
<p class="kern-body">Zeile 2 (stack)</p> 
<div class="kern-stack-sm">
  <p class="kern-body">Zeile 3-1 (stack-sm)</p>
  <p class="kern-body">Zeile 3-2 (stack-sm)</p> 
</div>
<p class="kern-body">Zeile 4 (stack)</p> 
<p class="kern-body">Zeile 5 (stack)</p> 
<div class="kern-stack-lg">
  <p class="kern-body">Zeile 6-1 (stack-lg)</p>
  <p class="kern-body">Zeile 6-2 (stack-lg)</p> 
    <div class="kern-stack-sm">
      <p class="kern-body">Zeile 6-3-1 (stack-sm)</p>
      <p class="kern-body">Zeile 6-3-2 (stack-sm)</p> 
    </div>
  <p class="kern-body">Zeile 6-4 (stack-lg)</p> 
  <p class="kern-body">Zeile 6-5 (stack-lg)</p> 
    <div class="kern-stack-none">
      <p class="kern-body">Zeile 6-6-1 (stack-none)</p>
      <p class="kern-body">Zeile 6-6-2 (stack-none)</p> 
    </div>
  <p class="kern-body">Zeile 6-7 (stack-lg)</p> 
  <p class="kern-body">Zeile 6-8 (stack-lg)</p> 
    <div class="kern-stack-xl">
      <p class="kern-body">Zeile 6-9-1 (stack-xl)</p>
      <p class="kern-body">Zeile 6-9-2 (stack-xl)</p> 
    </div>
  <p class="kern-body">Zeile 6-10 (stack-lg)</p> 
  <p class="kern-body">Zeile 6-11 (stack-lg)</p> 
</div>
<p class="kern-body">Zeile 7 (stack)</p> 
<p class="kern-body">Zeile 8 (stack)</p> 
</div>

Responsive Stack

<div class="kern-stack kern-stack-none-md">
<p class="kern-body">kern-stack kern-stack-none-md</p>
<p class="kern-body">kern-stack kern-stack-none-md</p> 
<p class="kern-body">kern-stack kern-stack-none-md</p>
</div>

<div class="kern-stack kern-stack-xs kern-stack-xl-lg">
<p class="kern-body">kern-stack-xs kern-stack-xl-lg</p>
<p class="kern-body">kern-stack-xs kern-stack-xl-lg</p> 
<p class="kern-body">kern-stack-xs kern-stack-xl-lg</p> 
</div>

Visibility & Display

Unterstützt Breakpoints für responsives Ein-/Ausblenden (z.B. .kern-hidden-sm).

.kern-block[-{breakpoint}]: display: block
.kern-flex[-{breakpoint}]: display: flex
.kern-inline-block[-{breakpoint}]: display: inline-block
.kern-inline[-{breakpoint}]: display: inline
.kern-hidden[-{breakpoint}]: display: none
.kern-sr-only: Nur für Screenreader sichtbar (visuell versteckt).
.kern-sr-only-mobile: Visuell versteckt auf Mobile (≤ 767px) sichtbar auf Desktop.
.kern-overflow-{auto|hidden|visible|scroll}: Steuert Overflowverhalten.

Beispiel:

<div>
  <!-- Nur für Screenreader -->
  <span class="kern-sr-only">Wichtige Info für seheingeschränkte Personen</span>

  <!-- Visuelle Demo -->
  <div class="kern-block">
    Immer sichtbar
  </div>
  
  <div class="kern-hidden-md">
    Sichtbar auf Mobile, versteckt ab MD.
  </div>

  <div class="kern-sr-only-mobile">
      Versteckt auf Mobile (sr-only) sichtbar auf Desktop.
  </div>
</div>

Size, Aspect Ratio & Overflow Utilities

Diese Klassen bieten eine schnelle Möglichkeit, die Abmessungen (Breite, Höhe) und das Seitenverhältnis von Elementen festzulegen.
Alle Klassen sind responsiv, d.h. sie können mit einem Suffix wie -md oder -lg kombiniert werden (z.B. .kern-w-full-lg).

Kategorie	Klasse	CSS Eigenschaft	Beschreibung
Aspect Ratio	.kern-aspect-*	aspect-ratio	Steuert das Seitenverhältnis von Elementen.
Width	.kern-w-*	width	Steuert die Breite.
Height	.kern-h-*	height	Steuert die Höhe.
Min/Max	.kern-min/max-w/h-*	min/max-width/height	Setzt minimale/maximale Begrenzungen für Abmessungen.

Sizes

Width Height

Verwenden Sie .kern-w/h-full für 100% der Elterngröße und .kern-w/h-screen für 100% der Viewport-Größe.

Breite	Höhe	CSS	Beschreibung
.kern-w-full	.kern-h-full	100%	Volle Breite/Höhe des Elternelements.
.kern-w-auto	.kern-h-auto	auto	"Automatische Größe, bestimmt durch den Inhalt."
.kern-w-screen	.kern-h-screen	100vw / 100vh	Volle Breite/Höhe des Viewports (Bildschirmausschnitt).

Min und Max

.kern-min-h-screen wird oft für Layouts verwendet, um sicherzustellen, dass der Inhalt immer mindestens den Bildschirm ausfüllt.

Klasse	CSS Eigenschaft	Wert	Beschreibung
.kern-min-w-0	min-width	0	Setzt minimale Breite auf 0.
.kern-min-w-full	min-width	100%	Erzwingt mindestens volle Elter-Breite.
.kern-max-w-full	max-width	100%	Maximal 100% der Elter-Breite.
.kern-max-w-none	max-width	none	Keine Begrenzung der maximalen Breite.
.kern-min-h-screen	min-height	100vh	Minimale Höhe entspricht der Viewport-Höhe.

Aspect Ratio mit Beispielen

Mit den .kern-aspect-* Klassen können Sie ein Element zwingen, ein bestimmtes Seitenverhältnis beizubehalten, auch wenn sich die Breite ändert.

<div class="kern-grid kern-grid-cols-3 kern-gap-md">
  <div class="kern-aspect-square">Square (1:1)</div>    
  <div class="kern-aspect-video">Video (16:9)</div>
  <div class="kern-aspect-auto">Auto</div>
</div>

Klasse	CSS	Ergebnis
.kern-aspect-square	aspect-ratio: 1 / 1;	Quadratisches Seitenverhältnis (1:1).
.kern-aspect-video	aspect-ratio: 16 / 9;	Klassisches Video- oder Breitbild-Format (16:9).
.kern-aspect-auto	aspect-ratio: auto;	Das Seitenverhältnis wird automatisch vom Inhalt bestimmt.

Overflow

Diese Klassen bestimmen, was passiert, wenn der Inhalt eines Elements größer ist als das Element selbst. Sie werden typischerweise auf Container-Elementen verwendet.

Klasse	CSS	Erklärung
.kern-overflow-auto	overflow: auto;	Zeigt Scrollbars nur dann an, wenn sie benötigt werden. (Beste Wahl).
.kern-overflow-hidden	overflow: hidden;	Schneidet den Überlaufenden Inhalt ab (verhindert Scrollbars).
.kern-overflow-visible	overflow: visible;	Überlaufender Inhalt ragt über das Element hinaus (Standard).
.kern-overflow-scroll	overflow: scroll;	Zeigt Scrollbars immer an, auch wenn sie nicht benötigt werden.
.kern-overflow-x-*	overflow-x	Steuert den Überlauf nur in horizontaler Richtung.
.kern-overflow-y-*	overflow-y	Steuert den Überlauf nur in vertikaler Richtung.

Die .kern-overflow-* Klassen sind entscheidend, um das Layout bei Inhaltsüberlauf zu kontrollieren. .kern-overflow-auto ist in den meisten Fällen die empfohlene Standardeinstellung.

Beispiel

<div class="kern-grid kern-grid-cols-2 kern-gap-md">
  <div class="kern-overflow-auto">
    <p class="kern-boby" style="width: 120%; height: 120px;">
      .kern-overflow-<strong>auto</strong>: Scrollbars erscheinen nur, weil der Text zu lang ist.
    </p>
  </div>
  
  <div class="kern-overflow-hidden">
    <p class="kern-boby" style="width: 120%; height: 120px;">
      .kern-overflow-<strong>hidden</strong>: Dieser Text wird abgeschnitten, es gibt keine Scrollbars.
    </p>
  </div>

  <div class="kern-overflow-y-scroll">
    <p class="kern-boby" style="width: 90%; height: 120px;">
      .kern-overflow-y-<strong>scroll</strong>: Hier gibt es nur eine vertikale Scrollbar.
    </p>
  </div>
  
  <div class="kern-overflow-visible">
    <p class="kern-boby" style="width: 120%; height: 120px;">
      .kern-overflow-<strong>visible</strong>: Inhalt ragt über die Grenzen hinaus.
    </p>
  </div>
</div>

CSS Flex​

Container​

Ausrichtung (Justify & Align)​

Order​

CSS Grid​

Beschreibung​

Spalten-Platzierung (Items)​

Drei Spalten Layout​

Responsive Anpassung​

Verwendungsregeln​

1. Raster Definition​

2. Abstände (Gap)​

3. Wrapping​

4. Positionierung (Starts & Ends)​

5. Automatische Spalten (Auto Columns)​

6. Verschachtelung (Nesting)​

7. Ausrichtung (Alignment)​

Horizontal (Justify) & Vertikal (Items)​

Bestandteile​

Breakpoints​

Dos and Don'ts​

Container​

Kern Container​

Kern Container Fluid​

Funktionsweise​

Gap (Abstände)​

Spacing​

Verfügbare Größen​

Verfügbare Breakpoints​

Stack​

Verschachtelter Stack​

Responsive Stack​

Visibility & Display​

Size, Aspect Ratio & Overflow Utilities​

Sizes​

Width Height​

Min und Max​

Aspect Ratio mit Beispielen​

Overflow​

Inhaltsverzeichnis

KERN Chat (Beta 2.1)

Hallo!

CSS Flex

Container

Ausrichtung (Justify & Align)

Order

CSS Grid

Beschreibung

Spalten-Platzierung (Items)

Drei Spalten Layout

Responsive Anpassung

Verwendungsregeln

1. Raster Definition

2. Abstände (Gap)

3. Wrapping

4. Positionierung (Starts & Ends)

5. Automatische Spalten (Auto Columns)

6. Verschachtelung (Nesting)

7. Ausrichtung (Alignment)

Horizontal (Justify) & Vertikal (Items)

Bestandteile

Breakpoints

Dos and Don'ts

Container

Kern Container

Kern Container Fluid

Funktionsweise

Gap (Abstände)

Spacing

Verfügbare Größen

Verfügbare Breakpoints

Stack

Verschachtelter Stack

Responsive Stack

Visibility & Display

Size, Aspect Ratio & Overflow Utilities

Sizes

Width Height

Min und Max

Aspect Ratio mit Beispielen

Overflow