Numl.Design Handbook Storybook Github ui design language · ui library · css framework Atomic UI Framework
for modern web interfaces A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System Get started Github ... Discord Twitter colorful and adaptive Runtime theming Numl provides an innovative theming system that can be customized
in runtime at any level you need. Modes Palette Colors Properties Preview Modes Numl has built-in support for Dark Scheme and High Contrast Mode. Dark theme Make your users happy with Dark Scheme that is perfect for low-light conditions with sufficient contrast and adaptive colors. High contrast mode Increase the contrast of your site to help people with low vision. Preview More elements United states Favorite Learn more Radio Group Option 1 Option 2 Switch Checkbox Field label This input is required Submit Try our Theme Generator flexible and comprehensive Style language Take all the CSS in your app under control without fighting preprocessors and specifications Intuitive syntax Feels like you already know it . It's like CSS but with handy shorthands and custom units. Preview It's sunny today. Responsive helper Utility attribute to declare responsive breakpoints and a simple syntax to bind style to specific screen width interval. Desktop Tablet Mobile State binding Bind style to specific element state like focus or hover . Numl will take care of all possible combinations. Preview Focus on me Why Numl? Another UI Framework? Why should anyone 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 without writing JS. 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. 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 atomic approach is convenient for customization, maintaining, and refactoring. Get started with Numl Add the following code to your page That's all! Now you can use all elements and features of Numl! Try to add a simple element: See our Handbook for more details and other ways to install Numl. Join the community Your contribution and feedback will help us to constantly bring new awesome updates Github Discord Twitter eMail Sponsor Storybook Handbook API Reference Blog Numl.Design is an open source project by Forneu Released under the MIT License