Komponenten-Referenz
Jede Komponente hat einen ausführlichen Markup-Kommentar direkt in ihrer .css-Datei unter components/ - hier nur die Kurzreferenz. Lebende Beispiele in den Demo-Seiten. Eine Komponente von hier passt nicht ganz - eigene Eigenschaften anpassen oder ein komplett neues Bauteil im selben Stil bauen: Einzelne Komponenten anpassen / Eigene Komponenten erstellen.
Dialoge & Aufklappbares
modal.css | .ncss-modal, -header, -footer (+ --fullscreen, --dark, --3d, --3d-flip, --3d-swing, --slide-up, --slide-down, --slide-left, --slide-right, --zoom) | Zentriertes Dialog-Modal; --fullscreen+--dark ergibt eine Lightbox. --3d kippt beim Öffnen wie aus der Tiefe herein, --3d-flip dreht sich um die eigene Hochachse wie eine Karte, --3d-swing schwingt wie eine Tür um ein Scharnier an der linken Kante. --slide-up/-down/-left/-right schieben sich aus der jeweiligen Richtung herein (langsamere, deutlich abbremsende --ncss-motion-easing-emphasized-Kurve statt der neutralen Standardkurve), --zoom wächst deutlicher als der Standard-Fade heran - alle Einblendvarianten sind reines CSS, austauschbar über die Klasse am <dialog>. |
js/modal-router.js | Attribute data-modal-router, -trigger, -target, -content, -home, -redirect | Opt-in, braucht zwingend JavaScript für die AJAX-/Modal-Funktion selbst - Trigger-Links behalten trotzdem ihr echtes href: ohne JS (oder bevor es geladen hat) ist ein Klick ein ganz normaler Linkaufruf, kompletter Seitenwechsel zur eigenständigen Zielseite, kein Modal (Progressive-Enhancement-Fallback, jede Zielseite muss deshalb auch vollständig für sich stehen können). Mit JS lädt ein Klick das Ziel per fetch() in ein geteiltes .ncss-modal nach, die Adresse wandert per history.pushState() mit, dadurch verlink-/teilbar. <meta name="modal-router-redirect" content="..."> auf der eigenständigen Zielseite lässt einen ganz frischen Aufruf ihrer URL automatisch zur Listing-Seite mit offenem Modal zurückspringen. Kein eigenes CSS, nutzt .ncss-modal direkt. |
lightbox.css + js/lightbox.js | .ncss-lightbox (-figure, -bar, -caption, -count, -prev, -next), Attribute data-ncss-lightbox="gruppe", data-caption | Opt-in - Galerie-Navigation für die Modal-Lightbox: alle Links mit demselben data-ncss-lightbox-Wert werden zu einer Gruppe, durchblätterbar per Pfeiltasten, Vor/Zurück-Buttons und Wischgeste, mit Zähler und Bildunterschrift (data-caption, sonst alt des Vorschaubildes). Kein eigener Dialog-Typ: das Script erzeugt EIN <dialog class="ncss-modal ncss-modal--fullscreen ncss-modal--dark ncss-lightbox">, Animation/Backdrop/Fokus-Trap kommen von dort. Ohne JS öffnet der Link das große Bild. Texte nach <html lang> (de/en), überschreibbar per data-lightbox-close/-prev/-next/-label/-of am <html>. |
theme-toggle.css + js/theme-toggle.js, js/theme-toggle-early.js | .ncss-theme-toggle, .ncss-theme-icon-dark/-light, Attribut data-ncss-theme-toggle (="cycle") | Opt-in - Hell/Dunkel-Umschalter mit gespeicherter Wahl und ohne Aufblitzen beim Laden, setzt [data-theme]/[data-theme-resolved]. Details: Farben |
dialog-close.css | .ncss-dialog-close | Geteilter Schließen-Button für Modal/Off-Canvas/Nav-Panel |
disclosure.css | .ncss-disclosure | FAQ-Box-Optik für <details>/<summary> |
<dialog id="d" class="ncss-modal">
<button type="button" class="ncss-dialog-close" command="close" commandfor="d" aria-label="Schließen">
<span class="ncss-icon ncss-icon-close" aria-hidden="true"></span>
</button>
<div class="ncss-modal-header"><h3>Titel</h3></div>
<div class="ncss-modal-body">Inhalt</div>
</dialog>
<button type="button" command="show-modal" commandfor="d">Öffnen</button>AJAX-Modal-Router live: eigenständiges Beispiel (drei Karten, ein geteiltes Modal, Adressleiste beobachten).
Lightbox-Galerie live: Demo.
Karten & Inhalt
card.css | .ncss-card-container, .ncss-card, -media, -header, -body, -footer (+ --flush, --transparent, --linked, --horizontal, --horizontal-end, Farbvarianten) | Karte ohne eingebauten Rahmen/Ecken/Schatten (siehe Design Tokens). Farbvarianten dienen zugleich als Hinweis-/Callout-Box (Tipp/Warnung/Fehler). |
split.css | .ncss-split-container, .ncss-split (+ --align-start/-end/-stretch), -media, -content | Text neben Bild, siehe Landingpage-Bausteine |
tile.css | .ncss-tile (+ --muted/--brand/--brand-2) | Volle-Breite Farbflächen-Sektionen (UIkit-Tiles), siehe Landingpage-Bausteine |
accordion-split.css | .ncss-accordion-split-container, .ncss-accordion-split, -list, -item, -body, -media, -media-mobile | Transformierendes Akkordeon (bekannt von apple.com), komplett nativ ohne JS. Für weichen Bildwechsel (Kreuzblende/Slide/3D-Flip statt hartem Schnitt) optional js/view-transitions.js (Same-Document View Transitions) einbinden, siehe Landingpage-Bausteine |
marginnote.css | .ncss-marginnote-container, .ncss-marginnote-layout, .ncss-marginnote-start/-end | Randnotizen (bekannt von Tufte CSS) - Bild/Text bricht neben den Fließtext aus statt zum Bildschirmrand, per CSS-Grid-Auto-Placement, siehe Landingpage-Bausteine |
badge.css | .ncss-badge (+ Farbvarianten), .ncss-badge-icon (+ --lg) | Status-/Kategorie-Chips; -icon-Variante als Kreis/Quadrat um ein Icon statt Text-Pille |
lists.css | .ncss-list--dot/-dash/-icon/-divided/-plain/-steps, .ncss-dl/-dl--inline/-dl--stats | Fertige ul/ol/dl-Varianten, siehe Listen |
placeholder.css | .ncss-placeholder (+ --surface) | Grauer Platzhalter für Demo-/Prototyp-Inhalte |
hero.css | siehe Medien | Bild- ODER Video-Hintergrund-Sektion mit Inhalt obenauf, optional Parallax |
<article class="ncss-card ncss-radius-lg ncss-border ncss-shadow-sm">
<img class="ncss-card-media ncss-ratio-video ncss-img-cover" src="bild.jpg" alt="">
<div class="ncss-card-body">
<h3>Titel</h3>
<p class="ncss-text-muted">Beschreibung</p>
</div>
</article>Rahmen, Radius & Schatten
helpers/elevation.css - eigenständige, komponentenunabhängige Utilities statt fest in Komponenten eingebacken (siehe Design Tokens), frei kombinierbar mit JEDEM Element.
| Klasse | Zweck |
|---|---|
.ncss-border / --none | Rahmen an/aus |
.ncss-radius-sm/-md/-lg/-full/-none | Eckenradius |
.ncss-shadow-sm/-md/-lg/-none | Schattenstufe |
.ncss-shadow-hover-sm/-md/-lg | Schatten wächst bei Hover |
.ncss-blend-multiply/-screen/-overlay/-darken/-lighten/-color-dodge/-color-burn/-hard-light/-soft-light/-difference/-exclusion/-hue/-saturation/-color/-luminosity | mix-blend-mode-Utilities, 1:1 auf die gleichnamigen CSS-Keywords (Blend mit dem, was HINTER dem Element liegt) |
<div class="ncss-card ncss-radius-lg ncss-border ncss-shadow-sm ncss-shadow-hover-md">...</div>Formulare & Suche
select.css | .ncss-select-wrapper, .ncss-select | Gestyltes natives <select> inkl. eigenem Chevron. Mit appearance: base-select zusätzlich reicher <option>-Inhalt/eigenes Popup-Styling - aktuell NUR in Chrome/Edge 135+ aktiviert, WebKit/Safari bewusst ausgeschlossen (bekannter, noch nicht selbst fixbarer Doppelpfeil-Rendering-Bug in Safari 26 - dort UND in Firefox übernimmt automatisch js/combobox.js, siehe Formulare) |
search.css | .ncss-search, .ncss-search-input | Suchfeld, das schmal startet und beim Fokussieren per reiner width-Transition wächst - kein JS |
livesearch.css + js/livesearch.js | .ncss-livesearch, -results, -group, -option, Attribut data-ncss-livesearch="URL" | Opt-in - Vorschläge vom Server schon während der Eingabe, gruppiert, WAI-ARIA-Combobox (Pfeiltasten, Enter, Esc), Treffer markiert. Ohne JS ein normales Suchformular. Details: Formulare |
Scroll & Animation
slideshow.css | .ncss-slideshow, -track (+ --no-scrollbar), -item (+ --peek) | Scroll-Snap-Karussell, kein JS |
sparkline.css | .ncss-sparkline, -area, -dot | Kleine Inline-Datenlinie. Koordinaten von Hand ODER per js/sparkline.js (opt-in) aus data-values/data-src berechnet, inkl. barrierefreier versteckter Tabelle mit den echten Werten |
scroll-progress.css | .ncss-scroll-progress (+ --vertical, --end) | Lesefortschrittsbalken, animation-timeline: scroll() |
scroll-stack.css | .ncss-stack-section, .ncss-stack-stage, .ncss-stack-card | Gepinnte Bühne, Karten gleiten beim Scrollen übereinander zu einem gefächerten Stapel ("Pinned Scrollytelling"). view-timeline-basiert, Opt-in-JS-Fallback für Firefox/älteres Safari: js/scroll-stack-fallback.js, siehe Web Awesome Bridge |
roadmap.css | .ncss-roadmap, -line, -list, -item, -dot, -card | Meilenstein-Liste mit selbst nachzeichnender Fortschrittslinie beim Scrollen |
Effekte
effects.css | .ncss-glow-border | Rotierender Farbverlauf-Ring per ::before + mask-composite: exclude |
.ncss-glow-pulse | Pulsierender box-shadow | |
.ncss-glass | Glassmorphism (backdrop-filter, @supports-abgesichert). Nicht auf ein Element mit Floating-UI-Nachfahren setzen (<wa-dropdown> u.ä.) - backdrop-filter erzeugt einen neuen Containing Block für position:fixed | |
.ncss-stamped (+ --press) | Hauchdünner, zweifarbiger "gravierter" Rahmen, funktioniert auf jeder Fläche | |
.ncss-grain | Feines SVG-Rauschen per ::after + mix-blend-mode | |
backdrop.css + js/backdrop.js | .ncss-backdrop, -item (+ --contained), Attribute data-ncss-backdrop, data-interval | Hintergrund aus mehreren Bildern, die langsam überblenden und sanft auszoomen. Standard seitenweit fixiert (100lvh, kein Leerstreifen bei mobiler Adressleiste, kein background-attachment:fixed, das iOS ignoriert), --contained füllt nur den nächsten positionierten Vorfahren. Ohne JS bleibt das erste Bild stehen; das Script lädt vor, pausiert in Hintergrund-Tabs und wechselt bei prefers-reduced-motion gar nicht. Tokens --ncss-backdrop-fade, -zoom, -tint. Kein Vorfahre mit transform/filter - sonst scrollt der fixierte Hintergrund mit. |
Rein dekorativ, bewusst optional - keine dieser Klassen ist Bestandteil von .ncss-card/-btn. Live: Backdrop-Demo.