v0.11.25 Twitter Github Join chat Telegram Gitter numl unity of design&code nude elements Your code is your design system. Markup language to create modern high-quality interfaces with any look. Get started Why Numl? Usage Storybook Usage Easy to learn Responsive Themeable Why Numl? Easy to learn A single intuitive language to describe styles and behaviors of your app. Responsive Declarative responsive breakpoints in runtime in any DOM context. Themeable State-of-the-art runtime theming system with Dark and High Contrast modes. Free Open source project licensed under MIT and hosted on Github You probably need a design system Modern web development is very complex with dozens of new standards and tools every day, which even the most experienced web developer cannot learn fast enough. To be able to create high-quality web interfaces it's required to have abstractions. A Design system is one of these abstractions, and Numl is one of the most advanced design systems so far with a set of unique features. Creating and maintaining a design system on your own is tough It consumes a lot of time and requires a high level of expertise in your team. You would have to hire experts in UX, Mobile UX, Javascript, CSS, SEO, Accessibility, Design, Typography, Frontend Architecture, etc... With Numl you will be able to create high-quality web interfaces with the power of a small team of frontend engineers with the middle level of expertise. Technologies are constantly becoming obsolete To keep your site up to date, you need tools that evolve with technology. Numl is not bound to the framework and is based on modern web standards, and also uses code generation techniques, which allows you to use the most advanced technologies and practices, as well as update them, updating the design system, rather than rewriting your entire codebase. Make your project unique Numl is not like other design systems. Any property or decoration changes easily, which gives you an incredible level of control, but at the same time preserves the integrity of your design. Because of this feature, Numl can be considered as a framework for design systems. A unique theme system will turn the coloring of elements into pleasure, as well as give your site a dark theme and high contrast mode without any effort. Features Flex gap polyfill Markdown conversion Syntax highlighting Form validation Column layouts Dark scheme High contrast mode Shadow DOM support Adaptive colors Various icon sets Popup position fix Locale formatting Context-sensitive coloring SHOW MORE Design with Numl Form with validation More examples to come... Prototype Create interfaces using human-readable HTML with clear syntax. You can set styles for each element depending on its state or screen width. Learn more Step 1. Create a login form. See the full code snippet in editor REPL Focus on input to see default focus styling. Username Password Customize Use attributes or context style definitions to customize your elements as you like. Syntax of numl is very extensive and allows you to describe very complex states. Learn more Step 2. Add a custom theme. Change border radius size. Design fancy-looking placeholders. Decrease gap. See the full code snippet in editor REPL Focus on input to see "focus" state. Username Password Behaviors Use widgets and components or inject behaviors to implement basic logic. You can also define actions for each widget to change other element attribute or property. Learn more Step 3. Add form validation. Add simple data output (for debug) See the full code snippet in editor REPL Click "Submit" to trigger validation and (if the form is valid) get the result. Username Username is required Password Password is required Submit Integrate Add your favorite framework if you need more or put the code inside the existing application. Learn more Extend 
              Using **JavaScript** you can extend **numl** syntax: Create new **custom units**, **design tokens**, **style generators**, **elements**, **behaviors** and more...
Possibilities are ENDLESS. Visit Storybook Try out REPL Learn basics in minutes Preview Code Button Button Button Click the button Button Click the button 
          So **in just few seconds** we created a nice-looking custom-designed toggle button with **accessibility** attributes and beautiful icon inside that **changes itself depending on button state** with transition.
Learn more in our Guide: Base syntax Responsive layouts Use | symbol to declare style value for each responsive zone. * responsive breakpoints * style values for each zone Desktop >= 960px Tablet < 960px AND >= 540px Mobile < 540px See more Layout examples in our Storybook: Basic layouts Flex layouts Grid layouts Table layouts Learn more from the reference pages: Responsive utility Theming Choose a hue reset Declaring a new theme in runtime using single hue is simple as <nu-theme hue="272"/> . Each theme has its own Dark Scheme and High Contrast Mode . Main Text and mark. Tint Text and mark. Tone Text and mark. Swap Text and mark. Special Text and mark. Learn more in the reference pages: Element nu-theme Attribute [theme] Adaptive colors Built with Numl tenphi.me Personal page of Numl's author, Andrey Yamanov. sellerscale.com Smarter financial management for Amazon sellers. frontend-events-numl.now.sh Calendar of Frontend Events. numl unity of design&code nude elements We're glad that you got here and hope you liked our introduction. The last step remained... I'm ready to start Designed and coded by Andrey Yamanov Contributors katrinLuna, timeshift92 Numl is an indi-project for now. We will be appreciated for any help and feedback! Join us! Our chats: Telegram, Gitter Special thanks Sellerscale - Sponsor and the first adopter of the technology. @boronine - For the HSLuv color space that is used in theme generation. @jonschlinkert - For the remarkable parser that is used in Numl to convert Markdown. @lrsjng - For lightweight tokenizer lolight that Numl code tokenizer is based on. Resources REPL Guide Storybook API Reference NUDE Framework Spread the word about us Contribute on Github Source code licensed MIT 
            ==FYI==: This page is made using **Numl** with **zero CSS** assets and **tiny JS** script. See the [source code](!https://github.com/tenphi/numl.design) to learn more.