Pages Introduction Getting started Basics Core concepts Basic styling Syntax in-depth Features Responsiveness States Themes Framework Overview Integration Javascript Vue React Svelte Angular Next.js Nuxt.js Introduction Get to know how to create high-quality websites using Numl Table of contents Still don't get... Who is Numl for? Another UI Framework? Why should I care? Help us to improve this page by sending a pull request
Latest Release Numl v1.0.1 is the latest version released. This documentation is a work-in-progress. If you get stuck, reach out for help in our Discord channel for chat support. Numl is a library of Web Components and a Runtime CSS Framework for rapidly building UI that follows your Design System. Blazing-fast prototyping using only HTML Works with popular JS-Frameworks Don’t require a build step, works with CDNs Don’t require writing CSS, fully customizable in runtime with HTML or JS Style mapping to state or screen width Runtime theme generator with Dark Scheme and High Contrast Mode Comprehensive Design System with dozens of tokens out-of-the-box Compatible with Static Site Generators Built with accessibility in mind Free and Open source Still don’t get… You can consider this a replacement (at least partial) for HTML, CSS and even JavaScript in some cases. It also fits the following definitions: A language to build modern web UIs. Multi-purpose HTML Framework Modern CSS Framework with a unique set of features. CSS Methodology with own future-proof approach. Low-level JS Framework based on Custom Elements with life-cycle hooks and UX-oriented features. Comprehensive Design System out-of-the-box. A decent-sized set of reusable UI Components. Who is Numl for? For beginners – Use a well-thought-out Design System with automatic Dark Scheme and High Contrast Mode for rapid development of adaptive and accessible UIs. Create new components by nesting or/and styling foundation elements. For enthusiastic – Customize the Numl Design System to the smallest detail in runtime using HTML. Use behaviors and control system to add simple interactions. Add your favorite framework (Vue.js, Angular, React, Svelte…) for complex logic. For experts – Use JavaScript API to create elements that follow your Design System on top of the Numl. Integrate Design Tokens into elements to have more control. Add your own unique elements, styles, behaviors, and tokens. Another UI Framework? Why should I care? All-in-one – Numl is both a markup language for rapidly building responsive interfaces and a set of ready-to-use highly-customizable accessible elements. So you can use a single comprehensive tool to compose and style web applications. It’s also possible to create simple interactions using only HTML. Unique – Numl is based on unique CSS generation technology that allows you to unleash all the power of modern CSS and take all styles under your control. DX Focused – Numl is focused on providing the best possible Developer Experience. It has lots of built-in helpers and solutions for routine UI development and its approach is convenient for maintaining and refactoring. Universal – Numl is built on top of Web Components, a modern web API to create reusable UI elements, and it’s compatible with most modern JS-frameworks. You can use it as is or create lightweight wrappers for your favorite framework to improve DX, SSR and SEO.
Table of contents Still don't get... Who is Numl for? Another UI Framework? Why should I care? Help us to improve this page by sending a pull request
Auto Auto Auto Auto Deployed on Netlify