Uizy

Documentation | GitHub

Installation

npm install @dufeut/uizy

import uizy from "@dufeut/uizy";
import "@dufeut/uizy/index.css";

Or via CDN:

<script src="https://unpkg.com/@dufeut/uizy/dist/uizy.iife.js"></script>
<link href="https://unpkg.com/@dufeut/uizy/dist/index.css" rel="stylesheet" />

CSS-only users: The <uizy-app> element is hidden by default and revealed automatically by uizy.start(). If you're using only the CSS without the JS engine, add the uizy-ready class manually:

<uizy-app class="uizy-ready">...</uizy-app>

Quick Start

uizy.start({
  globals: true,
  layout: {
    layout: { header: 56, footer: 48, left: 240 },
    breakpoint: {
      name: "lg",
      main: true,
      header: true,
      top: true,
      bottom: true,
      left: true,
      right: true,
      drawer: true,
    },
  },
  theme: { colors: { primary: "#6b08a5", accent: "#1eadff" } },
  components: {
    button: () => "px-4 py-2 bd-a br-1 e-p e-ns",
  },
  stores: {
    counter: uizy.store.atom(0),
  },
  onReady: () => console.log("Ready!"),
});

<style>
  uizy-header {
    background: var(--color-primary);
  }
  uizy-footer {
    background: var(--color-accent);
  }
</style>
<uizy-app>
  <uizy-header class="bd-a">
    <uizy-toggle left>☰</uizy-toggle>
    Header
    <span></span>
  </uizy-header>
  <uizy-drawer clip-top clip-bottom class="bd-a" open>Sidebar</uizy-drawer>
  <uizy-main clip-top clip-bottom clip-left class="pa-8 bd-a">
    <uizy-box use="button" onclick="uizy.$set('counter', $('counter') + 1)"
      >Add +</uizy-box
    >
    Count: <uizy-box :text="counter"></uizy-box>
  </uizy-main>
  <uizy-footer class="bd-a">Footer</uizy-footer>
</uizy-app>

Features

• Utility CSS – Atomic classes for rapid styling
• Web Components – <uizy-app>, <uizy-header>, <uizy-drawer>, <uizy-toggle>, <uizy-box>
• Reactive State – Built-in nanostores integration
• Components & Actions – Register reusable styles and event handlers
• Directives – Custom attributes with modifiers (:tooltip.top="text")
• Plugins – Namespace and bundle related functionality
• Responsive – Mobile-first breakpoints (sm, md, lg, xl, xxl)
• Screen Store – Reactive uizy.screen tracks current viewport { width, size }

Drawer Toggles

Use <uizy-toggle> to toggle drawers with zero JavaScript — just set an attribute and put any content inside:

<!-- Toggle the left drawer -->
<uizy-toggle left>☰ Menu</uizy-toggle>

<!-- Toggle the right drawer -->
<uizy-toggle right>Details →</uizy-toggle>

<!-- Toggle mini drawers -->
<uizy-toggle left-mini>⇤</uizy-toggle>
<uizy-toggle right-mini>⇥</uizy-toggle>

It's a pure shell — no default visuals, just cursor: pointer and built-in keyboard/accessibility support. Style it however you want. When the drawer is open, the toggle gets a uizy-toggle--active class for styling.

Responsive Breakpoint

Configure responsive behavior for layout and drawers:

uizy.start({
  layout: {
    breakpoint: {
      name: "lg", // Breakpoint name (sm, md, lg, xl, xxl)
      main: true, // Reset main content margins on mobile
      header: true, // Reset header margins on mobile
      top: true, // Reset top clipping on mobile
      bottom: true, // Reset bottom clipping on mobile
      left: true, // Reset left margins on mobile
      right: true, // Reset right margins on mobile
      drawer: true, // Close open drawers on mobile (default: true)
    },
  },
});

When drawer is true (default), any <uizy-drawer open> will automatically close when the viewport drops below the breakpoint, and re-open when it goes back above. This prevents drawers from covering content on small screens while keeping them open on desktop.

The <uizy-app> element is hidden (visibility: hidden) until initialization completes, preventing any layout flash.

Screen Store

Track the current breakpoint reactively:

// Get current state
uizy.screen.get(); // { width: 1024, size: "lg" }

// Subscribe to changes
uizy.screen.subscribe(({ width, size }) => {
  console.log(`${size} (${width}px)`); // "md (768px)"
});

Breakpoint sizes: xs < 576 < sm < 768 < md < 992 < lg < 1200 < xl < 1400 < xxl

License

BSD 3-Clause