PWA CSS Library

Schnellstart

Die gesamte Bibliothek über eine CSS-Datei einbinden

1

CSS einbinden

Füge index.css im <head> deiner Seite ein:

    <!-- CDN — einfach per CSS-Link -->

    <link rel="stylesheet" href="https://cstrsk.de/pwa-css-library/index.css" />

2

App Shell aufbauen

Die Bibliothek erwartet ein App-Shell-Layout mit topbar, main-content und bottombar:

    <div class="app-shell">

      <header class="topbar">…</header>

      <main class="main-content">

        <div class="page">…</div>

      </main>

      <nav class="bottombar">…</nav>

    </div>

3

Theme wählen

Setze ein data-theme-Attribut auf <html> — 9 Themes wählbar:

    <!-- Light -->

    <html data-theme="ocean">

    <!-- Dark -->

    <html data-theme="ocean-dark">

Farbthemen

9 komplett durchdesignte Themes — je mit Light- und Dark-Variante. Themes sind per data-theme auf <html> oder einzelne Container anwendbar.

Theme wählen:

Theme	Charakter	Primary
Indigo	Standard, ruhig, professionell	`#6366f1`
Rose	warm, lebendig	`#f43f5e`
Ocean	tief, vertrauenswürdig	`#06b6d4`
Forest	natürlich, nachhaltig	`#22c55e`
Amber	energetisch, freundlich	`#f59e0b`
Violet	kreativ, premium	`#8b5cf6`
Slate	neutral, corporate	`#64748b`
Coral	modern, trendig	`#ff6347`
Mint	frisch, clean, medizinisch	`#00e87a`

Komponenten (40+)

Alle Komponenten sind responsive, dark-mode-ready und folgen dem Fluent Design System.

Buttons (6 Vars)

Inputs + Groups

Cards (3 Vars)

Listen + Items

Avatare (4 sizes)

Badges + Chips

Toggle + Switch

Progress Bars

📐Grid System

🧩Skeleton Loading

🪟Modal + Drawer

⬆️Bottom Sheet

🔔Toast (4 types)

📑Accordion

📂Tabs + Pill Tabs

📋Stepper (v/h)

⏳Timeline

⚠️Alerts (4 Vars)

📊Data Table

💳Pricing Cards

🔘Radio Cards

🎚️Range Slider

📎Upload Zone

⌨️Kbd Shortcuts

🖼️Media Cards

💬Chat Bubbles

🔍Spotlight Search

📰Feature Grid

📅Kalender-Strip

👤Profile Card

🚀 Live-Demo aller Komponenten

Interaktive Galerie mit Theme-Switcher, Live-Vorschau und Code-Beispielen.

Showcase öffnen

Designs & Patterns

Fertige Layout-Muster — einsatzbereit per CSS-Klasse.

Glassmorphism

.glass · .glass--card · .glass--nav

Bento Grid

.bento + --wide / --tall / --large

Hero Sections

.hero--light · .hero--mesh · .hero--split

Neumorphism

.neumorphic · .neumorphic--inset

Metric Rings

SVG-Fortschrittsringe mit .metric-ring

Prose / Markdown

.prose — Inhalts-Typografie

Dateien

Modularer Aufbau — du kannst auch nur einzelne Module einbinden.

index.css — Entry Point (importiert alles)

tokens.css — Design Tokens / CSS Props

reset.css — Modern Reset + PWA Base

layout.css — App Shell, Grid, Container

components.css — Buttons, Cards, Inputs …

components2.css — Tabs, Stepper, Alerts …

overlays.css — Modal, Drawer, Toast, Sheet

themes.css — 9 Themes × Light/Dark

patterns.css — Glass, Bento, Hero, Chat …

utilities.css — Atomic Helpers

    <!-- Nur bestimmte Module einbinden -->

    <link rel="stylesheet" href="https://cstrsk.de/pwa-css-library/tokens.css" />

    <link rel="stylesheet" href="https://cstrsk.de/pwa-css-library/components.css" />

Utility-Klassen

Atomic Helpers für Spacing, Typo, Flex, Farben und Animationen.

Spacing

.p-4 .px-6 .py-3 .mt-4 .gap-3 .mx-auto

Typografie

.text-sm .text-xl .font-bold .truncate .line-clamp-2

Flex/Grid

.flex .flex-col .items-center .justify-between

Farben

.text-primary .text-brand .bg-surface .bg-subtle

Animationen

.animate-fade-in .animate-slide-up .animate-spin .stagger

PWA-Helfer

.safe-top .safe-bottom .h-screen .no-tap-highlight .min-h-tap