MZONE-UI · VERSION 1.5.0 · PLAYGROUND

mzone-ui 1.5.0

29 Module, 135 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.5.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.5.0/mzone.css">
<body class="mz-body">
  <main class="mz-page"> … </main>
  <script type="module">
    import { ripple } from '/lib/mzone-ui@1.5.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