NativeCSS Handbuch

Überblick

Ein natives CSS-Designsystem ohne Build-Schritt: kein LESS/Sass, kein Bundler, kein Preprocessor. @import + CSS Cascade Layers regeln die Ladereihenfolge, ein einziges Token-System (tokens.css + colors.css) ist die alleinige Quelle für Werte.

Schnellstart

<link rel="stylesheet" href="ncss.css">

ncss.css importiert alles Weitere selbst (Tokens, Reset, Helpers, Komponenten) in der richtigen Layer-Reihenfolge. Kein Build-Schritt nötig - die Datei direkt einbinden.

Grundprinzipien

Native zuerst

Cascade Layers statt Spezifitäts-Kämpfe, Container Queries statt Media-Query-Wildwuchs, native Elemente (<dialog>, <details>) statt JS-Nachbauten, wo das native Verhalten reicht.

Eine Quelle der Wahrheit

tokens.css/colors.css sind die einzigen Orte, an denen rohe Werte (Farben, rem, px) stehen dürfen. Alles andere referenziert per var().

Kein Build-Schritt

@import + Cascade Layers regeln alles. Kein Preprocessor, kein Bundler, keine Kompilierung - die Datei direkt im Browser laden.

Kein Utility-Wildwuchs

Kleine, kuratierte Utility-Sets statt eines Tailwind-artigen "für jeden CSS-Wert eine Klasse"-Ansatzes. Neue Utility nur bei echtem, wiederkehrendem Bedarf.

Breakpointless als Standard

Typografie und Abstände sind standardmäßig fließend (clamp()-basiert). Feste Breakpoints bleiben ein bewusst sparsam genutzter Escape Hatch.

Verifizieren, nicht annehmen

Jede nicht-triviale Änderung wird im echten Browser geprüft (Chromium, WebKit, Firefox) - Browser-Support-Behauptungen werden recherchiert, nicht aus Trainingswissen geraten.

Web Awesome (optional)

Optional bindet sich das System per webawesome-bridge.css an ein selbst gehostetes Web Awesome an, für Fälle, in denen natives HTML/CSS allein nicht reicht (z.B. Toast, Carousel, Drawer) - siehe Web Awesome Bridge.

Wie geht's weiter?

Architektur - Cascade Layers, Dateistruktur, wie alles zusammenspielt.
Theme anpassen - die eigene Marke in einer einzigen Datei.
Eigenes Theme erstellen - Schritt für Schritt, mit fertiger theme.css zum Kopieren.
Design Tokens - Abstände, Radien, Schatten, Bewegung.
Komponenten-Referenz - jede Komponente mit Klassen und Tokens.

Lebende Beispiele zu jedem Thema stehen zusätzlich unter Demo - dieses Handbuch erklärt das WARUM und WIE, die Demo-Seiten zeigen es in Aktion.