mzone-ui 1.8.0

37 Module, 136 Klassen, keine externe Abhaengigkeit. Jeder Effekt unten ist echt und laeuft in dieser Seite — der Theme-Schalter oben rechts ist mz-theme-toggle in Betrieb.

Quelle: /lib/mzone-ui@1.8.0/ — serverseitig gepinnt, offline nutzbar
Vorbild: canvas-ui (MIT + Commons Clause) fuer die Effekte, transitions.dev fuer die Transitions-Ideen — beides nachgebaut, kein Fremdcode uebernommen
Barrierefreiheit: Jedes Modul liest prefers-reduced-motion live und reagiert im Betrieb

Einbinden

Ein <link> fuer das Vokabular, ein Modul-Import je Effekt. Nichts wird gebuendelt, nichts kommt von einem CDN.

<link rel="stylesheet" href="/lib/mzone-ui@1.8.0/mzone.css">
<body class="mz-body">
  <main class="mz-page"> … </main>
  <script type="module">
    import { ripple } from '/lib/mzone-ui@1.8.0/fx-ripple.js';
    ripple('.mz-hero', { renderer: 'auto', ambient: 4 });
  </script>
</body>

Module

Transitions

27 Interaktions-Patterns als mz-t-*-Klassen — jede Demo laeuft live, der Knopf CSS kopieren legt das self-contained Snippet (Tokens, Regeln, reduced-motion-Guard) in die Zwischenablage. Die Snippet-Texte schneidet der Playground zur Laufzeit aus den @snippet-Markern in mzone.css — es kann nichts veralten.

Klassen

Direkt aus mzone-ui.catalog.json gelesen — was hier steht, liefert der Server auch aus.

Farben

Fluide Schriftgroessen

Sieben --mz-fs-*-Tokens auf clamp()-Basis (MZP-30) statt fester px-Werte. Fenster schmaler oder breiter ziehen — die Groessen wachsen stufenlos mit, die Bibliothek fuehrt bewusst keine Layout-Breakpoints.

--mz-fs-xl

--mz-fs-lg — Textbeispiel

--mz-fs-md — Textbeispiel

--mz-fs-base — Textbeispiel

--mz-fs-sm — Textbeispiel

--mz-fs-xs — Textbeispiel

Bento-Raster

mz-grid--bento (MZP-31): feste Spalten statt auto-fit, damit mz-grid__cell--wide/--tall/--big verlaesslich spannen. Umbruch ueber @container ab 720px — Fenster schmal ziehen, um es zu sehen.

--big (2×2)

--wide (2×1)

Zelle

--tall (1×2)

Zelle

Feedback-Pill

mz-feedback.js (MZP-29): "War das hilfreich?" ohne Backend — die Antwort bleibt im Browser (localStorage, pro Slug) und ueberlebt einen Reload dieser Seite.