Zero Build
Kein LESS, kein Sass, kein Bundler. @import und Cascade Layers regeln die Reihenfolge.
Ein Design System, das nicht im Weg steht.
NativeCSS verbindet natives CSS (Cascade Layers, Container Queries, light-dark())
mit Web Awesome und Font Awesome - ohne LESS, ohne Compile-Schritt, ohne
Utility-Klassen-Wildwuchs. Diese Seite ist selbst das Beispiel.
Alles, was ein Design System heute braucht
Native Browser-Mechanismen zuerst - Web Awesome ergänzt gezielt dort, wo ein fertiges Komponenten-Verhalten schneller zum Ziel führt.
Fließend & responsiv
Fließende clamp()-Skalen als Standard, Container Queries statt
Viewport-Breakpoints
Barrierefrei per Default
Native <dialog>/<details>, Fokus-Trap, :focus-visible - Tastatur und Screenreader ab Werk statt nachgerüstet.
Ein Token-System, zwei Bibliotheken
Web Awesome übernimmt ncss-Farben/-Radien/-Schriften über eine einzige Bridge-Datei - keine zweite, konkurrierende Werteliste.
Im Detail
Container Queries statt Viewport-Breakpoints
Dieselbe Karte verhält sich in einer schmalen Sidebar anders als im breiten Hauptbereich - automatisch, ohne JavaScript, ohne dass die Seite weiß, wo die Komponente gerade eingebettet ist. Klassische Viewport-Breakpoints kennen nur die Fensterbreite, nicht den tatsächlich verfügbaren Platz.
Mehr im HandbuchWas ist enthalten
Kompletter Aufbau als <wa-tree> - klappt per Klick/Tastatur auf, ohne eigenes JS.
Ehrlich bleiben
Kein Framework-Lock-in - jederzeit aussteigbar
Reines CSS, kein proprietäres Klassensystem, das sich nur mit einem Build-Schritt wieder entfernen lässt. ncss.css weglassen genügt.
So könnte ein Kennzahlen-Dashboard aussehen
Frei erfundene Platzhalterzahlen eines fiktiven Online-Shops - reine Beispieldaten, keine echten Werte zu NativeCSS selbst. Die Linien sind reines <svg> + CSS (.ncss-sparkline), keine Chart-Bibliothek.
Bestellungen / Monat
1.842
Ladezeit (Median)
1,2s
Absprungrate
34%
Neukunden / Woche (aus Daten berechnet)
156
Die ersten drei Karten haben ihre <polyline>-Koordinaten von Hand gesetzt - die vierte übergibt nur data-values, js/sparkline.js (opt-in) rechnet Punkte/Fläche selbst aus UND legt daneben eine für Screenreader lesbare, visuell versteckte Tabelle mit den echten Werten an (das SVG selbst ist rein dekorativ, aria-hidden).
Preisbeispiel: „Bloomtask“ (fiktives Beispielprodukt)
Frei erfundenes Beispielprodukt, keine NativeCSS-Preise - NativeCSS selbst ist quelloffen und kostenlos. Diese Tabelle zeigt nur das UI-Muster: <wa-switch>, gekoppelt an reines CSS ([data-billing]-Attribut, kein Re-Render).
Solo
0 €0 €/Monat
Für Einzelpersonen und zum Ausprobieren.
- Bis zu 3 Projekte
- Community-Support
Team
19 €15 €/Monat
Für Teams, die gemeinsam an Projekten arbeiten.
-
Unbegrenzte Projekte
Enthalten im Team-Plan
- Bis zu 10 Mitglieder
- 90 Tage Versionshistorie
- Kalender- & Chat-Integrationen
- E-Mail-Support
- Priorisierte Updates
Unternehmen
49 €39 €/Monat
Für mehrere Abteilungen und größere Organisationen.
- Alles aus Team
- Single Sign-On
Was Nutzer sagen
Fiktive Beispiel-Stimmen - zeigt <wa-rating> im Zusammenspiel mit einer normalen .ncss-card.
„Endlich ein Design System ohne Utility-Klassen-Explosion. Die Container-Query-Cards haben uns zwei Media-Query-Baustellen gespart.“
„Die Web-Awesome-Bridge war in einer Datei erledigt. Buttons, Badges und Tooltips sehen aus, als wären sie von Anfang an Teil von NativeCSS gewesen.“
„Dark Mode funktioniert einfach - auch für die Web-Awesome-Komponenten, ganz ohne zusätzliche Klasse zum Umschalten.“