v0.11.0 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? Examples Examples 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 Creating and maintaining a design system on your own is tough Customization & future-proof are requirements There is no time to wait Other features Flex gap polyfill Markdown conversion Syntax highlighting Form validation Column layouts Shadow DOM support Accessible colors Various icon sets Popup position fix Locale formatting 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 our Storybook Try our 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 checkbox button with **accessibility** attributes and beautiful icon inside that **changes itself depending on button state** with transition.
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 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 . 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.