Z extension K IT
web enhancing bits made with zuix.js

zKit is a collection of framework-agnostic components for the web, built with zuix.js as an example of the library features.

These components can also be loaded at runtime without requiring to copy any file to the local website.

Usage

1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist"></script>

2. Load components

By adding the z-load attributes to the host element specifying the component to be loaded

<div z-load="path/to/my-component"></div>

or by defining a custom element

customElements.define('my-component', class extends HTMLElement {
connectedCallback() {
zuix.loadComponent(this, 'path/to/my-component');
}
});

so that components can be added to the page using the custom element tag

<my-component></my-component>

See also

  • zuix.js
    A small library (18.5kB gzipped) for component-based web development
  • Web Starter
    A web starter with templates and examples, based on zuix.js and Eleventy, a simple static site generator.
  • Web App starter template
  • News Blog starter template
  • Older zKit release v1.0 (2016)
Support zuix.js works, become a patron! Support zuix.js works, become a Patron!
extension
zKit components v1.1.1
web enhancing bits