NativeCSS Design System

Reine CSS Custom Properties, kein LESS, kein Compile-Schritt. Fließende Skalen (clamp()) als Standard, Container Queries statt Viewport-Breakpoints, @layer statt Spezifitäts-Kämpfe. Diese Seite zeigt alle Bausteine live.

Typografie

H1 - Hauptüberschrift

H2 - Abschnittsüberschrift

H3 - Unterüberschrift

H4 - Kleinere Überschrift

Ein normaler Absatz mit einem Link, fettem und kursivem Text, markiertem Text und einer CSS-Abkürzung. Auch Inline-Code ist enthalten.

Ein Blockzitat mit etwas längerem Text, um zu zeigen, wie der Zeilenumbruch und der linke Rand wirken.

function hello() {
  return "ncss";
}

• Erster Listeneintrag
• Zweiter Listeneintrag
  • Verschachtelt

Kleiner, gedämpfter Hinweistext (.ncss-text-sm .ncss-text-muted).

State-of-the-Art-Typografie

Dieser Absatz beginnt mit einem Drop Cap (.ncss-drop-cap, natives initial-letter). Überschriften oben nutzen bereits text-box-trim - der unsichtbare Leerraum über/unter dem Text (Font-Metrik-Reserve) ist weg, Abstände stimmen jetzt exakt mit den Design-Tokens überein statt "ungefähr".

Silbentrennung (.ncss-hyphenate) in einer schmalen, blockformatierten Spalte: Donaudampfschifffahrtsgesellschaftskapitän, Rechtsschutzversicherungsgesellschaften.

Tabellarische Ziffern (.ncss-nums-tabular): 1111 vs. 8888 - gleiche Breite, kein "Wackeln" nebeneinander.

Textumfluss (float + shape-outside, responsive per Container Query)

Farben

Text-Brand · Text-Success · Text-Warning · Text-Danger

Abgestufte Skalen (color-mix() in oklch, aus einer Basisfarbe berechnet)

Badges (Beispiel-Nutzung der Skala, kein Utility-Klassen-Wildwuchs)

Listen

Fertige Varianten für <ul>/<ol>/<dl> - components/lists.css. Vollständige Referenz im Handbuch.

Buttons

Formulare

Intrinsisches Grid (kein Breakpoint nötig)

Fenster/Container schmaler ziehen - die Karten fließen automatisch um, ganz ohne Media Query.

Container Queries

Diese Box per Ecke unten rechts in der Breite ziehen - die Karte darin reagiert auf IHREN Container, nicht den Viewport.

Erweiterbares Suchfeld & Divider

.ncss-search startet schmal, wächst beim Fokussieren per reiner width-Transition auf volle Breite - kein JS. Bleibt zusätzlich breit, solange bereits Text eingegeben ist.

.ncss-divider--vertical (auf einem <hr>) für Trenner innerhalb einer Flex-Zeile, horizontal ist bereits der native <hr>-Default:

Transform-Center

.ncss-transform-center zentriert ein Element auf sich selbst (position:absolute + translate:-50% -50%) - der Elterncontainer braucht dafür eine eigene position (hier position:relative per Inline-Style auf dem Platzhalter).

<div style="position: relative;">
  <span class="ncss-badge ncss-transform-center">Zentriert</span>
</div>

Medien (aspect-ratio)

Native Elemente (details, dialog)

3D-Varianten: perspective() als Transform-Funktion in der eigenen transform-Kette (kein perspective auf einem Elternelement nötig/wirksam, <dialog> rendert im Top Layer).

Einblendvarianten: statt der Standard-Skalierung slidet/wächst das Modal aus einer Richtung heran (langsamere, deutlich abbremsende Bezier-Kurve statt der neutralen Standardkurve).

AJAX-Modal-Router (js/modal-router.js, opt-in): Trigger-Links mit echtem href laden ihr Ziel per fetch() in ein geteiltes Modal nach, die Adresse wandert per history.pushState() mit (eigenständig öffnen):

Cards

Media-Position: links/rechts brauchen eine Klasse (Flex-Richtung dreht sich um), oben ist die natürliche Reihenfolge, unten braucht nur .ncss-card-media als LETZTES Kind im Markup. Links/rechts brauchen mindestens 24rem CONTAINER-Breite, um nebeneinander zu stehen - Box unten ziehen, um den Umbruch zu sehen:

Footer bleibt immer unten ausgerichtet, unabhängig von der Textlänge der Nachbarkarte (.ncss-card-body{flex:1 1 auto} füllt den Rest, der Footer folgt direkt danach):

Split: Text neben Bild

Bild links vs. rechts braucht keinen Modifier - reine Dokumentreihenfolge (.ncss-split-media als erstes oder letztes Kind), genau wie bei Card oben. Ab 36rem CONTAINER-Breite stehen beide Spalten nebeneinander, darunter stapeln sie sich automatisch:

<div class="ncss-split-container">
  <div class="ncss-split">
    <div class="ncss-split-media"><img src="foto.jpg" alt="..."></div>
    <div class="ncss-split-content">
      <h3>Titel</h3>
      <p>Text ...</p>
    </div>
  </div>
</div>

Tile: Farbflächen-Sektionen

Bekannt aus UIkit (uk-tile-*) - volle-Breite Blöcke zum Gliedern einer langen Seite. --brand/--brand-2 kippen automatisch auf hellen Text, Karten/Code-Blöcke DARIN bleiben normal dunkel-auf-weiß:

<section class="ncss-tile ncss-tile--brand">
  <h2>Titel</h2>
  <p>Text ...</p>
</section>

Ohne weiteres Zutun bleibt eine Tile innerhalb ihres Containers - für volle Bildschirmbreite bis zum Bildschirmrand zusätzlich .ncss-full-bleed kombinieren, siehe Handbuch (Landingpage-Bausteine) für ein Beispiel.

Accordion-Split: transformierendes Akkordeon

Bekannt von apple.com - Text-Akkordeon links, dazugehöriges Bild rechts wechselt automatisch. Komplett nativ (<details name> + :has()), kein JS. Fenster/Panel schmaler als 36rem ziehen, um das Bild inline im geöffneten Punkt zu sehen:

Container Queries

Komponenten reagieren auf ihren eigenen Platz, nicht auf den Viewport.

Cascade Layers

Reihenfolge statt Spezifitäts-Kämpfe - kein !important nötig.

light-dark()

Ein Wert pro Token deckt Hell und Dunkel ab - kein zweites Stylesheet.

Ausführliches Beispiel inkl. reproduzierbarem Code im Handbuch (Landingpage-Bausteine).

Randnotizen (Marginnote)

Bild oder Text bricht aus der Textspalte aus, bleibt aber NEBEN dem Fließtext statt am Bildschirmrand zu landen (das leistet bereits .ncss-bleed-start/-end) - Sidenote-Muster, komplett nativ per CSS Grid. Panel schmaler als 60rem ziehen, um den Fallback (Randnotiz stapelt normal im Text) zu sehen:

Ausführliches Beispiel inkl. reproduzierbarem Code im Handbuch (Landingpage-Bausteine).

Feste Spaltenzahl, Spannweiten & Bento-Grid

minmax(MIN, MAX) steckt schon länger hinter .ncss-grid - MIN verhindert zu schmale Spalten, MAX begrenzt zusätzlich das Wachstum nach oben (Default 1fr, unbegrenzt). Nur 2 Karten in einem breiten Grid, einmal ungedeckelt und einmal mit --ncss-grid-max:

.ncss-grid--cols-3 statt der intrinsischen .ncss-grid - immer exakt 3 Spalten (ab 36rem Containerbreite, darunter 1 Spalte). Eine Karte mit .ncss-col-span-2 nimmt 2 der 3 Spalten ein, die nächste füllt den Rest:

.ncss-bento: gemischte Kachelgrößen, grid-auto-flow: dense füllt Lücken automatisch mit nachfolgenden kleineren Kacheln auf:

Responsive Tabelle (Scroll-Strategie, a11y-sicher)

Karten-Stapel-Variante (Container schmaler ziehen):

Tree-Navigation (Sidebar-Variante)

Sticky & Scroll-Reveal

Der Balken oben (.ncss-scroll-progress) und der schmale Streifen am rechten Bildschirmrand zeigen beide denselben Lesefortschritt. Farbe/Verlauf brauchen KEINE eigene Klasse - einfach .ncss-gradient-brand/-subtle oder .ncss-surface--brand-2/-neutral dazu kombinieren (wie beim oberen Balken). Vertikal statt horizontal: .ncss-scroll-progress--vertical (+ optional --end für die rechte statt linke Kante, wie beim seitlichen Streifen hier).

Sichtbarkeits-Helper

Dieser Text ist NUR beim Drucken sichtbar.

Dieser Text ist nur am Bildschirm sichtbar (beim Drucken ausgeblendet).

Gleich hohe Cards (automatisch, kein Extra-CSS)

Masonry (CSS columns)

Animationen

Einblend-Animationen

Endlos-Animationen (Aufmerksamkeit/Ladezustand)

Laufen unter prefers-reduced-motion: reduce automatisch nur einen einzigen, praktisch unsichtbaren Frame (globale Regel in reset.css) - kein Extra-Code pro Animation nötig.

Mikro-Interaktionen (Hover/Press)

Transition-basiert, kein animation - reagieren auf Zustand statt einmalig abzulaufen. Maus drüber bewegen bzw. klicken/halten:

.ncss-gpu-boost (transform: translateZ(0)) lässt sich gefahrlos mit hover-lift/-grow kombinieren, weil diese die eigenständigen translate/scale-Eigenschaften nutzen, nicht transform - nur gezielt bei sichtbarem Ruckeln einsetzen, nicht vorsorglich überall (jede zusätzliche Compositor-Ebene kostet Grafikspeicher).

Slideshow (Scroll-Snap, ohne JS)

Off-Canvas-Sidebar (eigenständig, nicht nur im Mobile-Nav)

Dasselbe .ncss-offcanvas, das die Navigation oben unterhalb 64rem Viewport-Breite nutzt - hier unabhängig davon, immer über den Button auslösbar.

Modal, Lightbox-Variante (.ncss-modal--fullscreen .ncss-modal--dark)

Keine eigene Lightbox-Komponente mehr - nur .ncss-modal mit zwei Varianten.

Lightbox-Galerie (data-ncss-lightbox)

Mehrere Bilder einer Gruppe durchblättern - Pfeiltasten, Vor/Zurück, Wischen, Zähler, Bildunterschrift. Baut auf der Modal-Lightbox oben auf (components/lightbox.css + js/lightbox.js), ohne JavaScript öffnet der Link einfach das große Bild.

<a href="gross-1.jpg" data-ncss-lightbox="ausstellung" data-caption="Titel, 2024">
  <img src="klein-1.jpg" alt="Titel, 2024">
</a>
<script src="dist/js/lightbox.js" defer></script>

Klassischer Breakpoint-Escape-Hatch

Sichtbar ab 768px (.ncss-hide-below-md).

Sichtbar unter 768px (.ncss-hide-from-md).

Full-Bleed-Sektion

Drei Varianten, damit klar wird, was .ncss-full-bleed genau tut - der Trick bricht immer auf 100vw aus, egal wie breit oder schmal der umgebende Container gerade ist.