About this project
Numl is an atomic UI framework built on Web Components with runtime CSS generation, aimed at rapidly building interfaces that follow a design system. The README opens with a prominent notice that the project is deprecated and no longer maintained; the suggested successors are tasty, a CSS-in-JS styling system and DSL for React, and glaze, an OKHSL color theme generator with WCAG contrast solving.
What it provides: a UI design language, a library of ready-to-use accessible web components, and a runtime CSS framework. According to the README, adding one JavaScript module to a page is enough, with no bundler and no configuration, after which elements such as nu-btn can be used directly in markup.
Installation and usage: the README shows loading the ES module build from jsDelivr and then writing elements in plain HTML. Other installation methods are documented in the handbook.
Stated features: an all-in-one approach combining markup for responsive interfaces with customizable accessible elements; a color generation system and styles-to-state bindings that the README says can reduce style declarations compared with plain CSS; automatic dark scheme and high contrast mode; design tokens exposed as custom properties; customization globally, in context or directly on an element; the ability to add custom elements, style attributes, behaviors, design tokens and custom units; and compatibility with frameworks such as Vue, Angular, React and Svelte, including use with SSG.
Documentation and examples: the README points to a Storybook, Handbook, Reference and REPL on numl.design. Listed examples include flex and grid playgrounds, a markdown converter, a before/after slider and a login form validation example. Projects mentioned as built with Numl include Cube.js UI Kit and several Numl websites and storybooks.
Browser support: the latest two versions of Edge, Chrome, Firefox, Safari, iOS Safari and Android. IE11 and pre-Chromium Edge are explicitly outside the project scope.
Development commands: npm start runs the playground; npm run build builds the library into dist as an ES6 tree-shaking friendly module; npm run dev rebuilds on source changes; npm run test runs tests.
The project is MIT licensed and follows the all-contributors specification, and the README invites contributions and links a Discord community. A roadmap section mentions items such as a v2 style2state syntax proposal, a React library, a theme generator, more documentation and tests, and a Figma UI kit; because the repository is deprecated, these plans should be read as historical.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.