mzone-ui 1.9.0

Quelle

/lib/mzone-ui@1.9.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

<link rel="stylesheet" href="/lib/mzone-ui@1.9.0/mzone.css">
<body class="mz-body">
  <main class="mz-page"> … </main>
  <script type="module">
    import { ripple } from '/lib/mzone-ui@1.9.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.

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.

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.

Symbole & Ornamente

21 Symbole als Sprite /lib/mzone-ui@1.9.0/symbols.svg — Farbe aus currentColor, suchen mit getCapabilities(styles).