{"id":13760938,"url":"https://github.com/OutpostHQ/numl","last_synced_at":"2025-05-10T11:32:21.411Z","repository":{"id":37965508,"uuid":"192300696","full_name":"outpostHQ/numl","owner":"outpostHQ","description":"Atomic UI Framework based on Web Components and Runtime CSS Generation for rapidly building interfaces that follow your Design System 🌈","archived":false,"fork":false,"pushed_at":"2023-03-04T04:17:36.000Z","size":15245,"stargazers_count":338,"open_issues_count":24,"forks_count":16,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-30T16:05:11.842Z","etag":null,"topics":["css-framework","css-generator","designsystem","element-collection","framework","functional-css","markup-language","responsive","themes","ui-components","uikit","utility-classes","web-components"],"latest_commit_sha":null,"homepage":"https://numl.design","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/outpostHQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"numldesign"}},"created_at":"2019-06-17T07:54:15.000Z","updated_at":"2025-01-03T21:59:38.000Z","dependencies_parsed_at":"2024-05-03T11:14:22.753Z","dependency_job_id":"c2058f88-87cb-4a55-b4d5-40b87cd82709","html_url":"https://github.com/outpostHQ/numl","commit_stats":null,"previous_names":["numldesign/numl","tenphi/numl"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outpostHQ%2Fnuml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outpostHQ%2Fnuml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outpostHQ%2Fnuml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outpostHQ%2Fnuml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/outpostHQ","download_url":"https://codeload.github.com/outpostHQ/numl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253410803,"owners_count":21904131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-framework","css-generator","designsystem","element-collection","framework","functional-css","markup-language","responsive","themes","ui-components","uikit","utility-classes","web-components"],"created_at":"2024-08-03T13:01:28.660Z","updated_at":"2025-05-10T11:32:20.790Z","avatar_url":"https://github.com/outpostHQ.png","language":"JavaScript","readme":"\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://numl.design\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg width=\"311\" src=\"/images/Numl.Design_Logo.svg\" alt=\"Numl.Design logo\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n[![NPM Version](https://img.shields.io/npm/v/numl.svg?style=flat)](https://www.npmjs.com/package/numl)\n[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/numldesign/numl.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/numldesign/numl/context:javascript)\n![npm](https://img.shields.io/npm/dm/numl)\n[![Discord](https://img.shields.io/discord/793832892781690891?color=7389D8\u0026label=chat%20on%20Discord\u0026logo=Discord\u0026logoColor=ffffff)](https://discord.gg/sHnHPnAPZj)\n[![Rate on Openbase](https://badges.openbase.io/js/rating/numl.svg)](https://openbase.io/js/numl?utm_source=embedded\u0026utm_medium=badge\u0026utm_campaign=rate-badge)\n\n\nNuml is a UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System 🌈\n\n### [STORYBOOK](https://numl.design/storybook) | [HANDBOOK](https://numl.design/handbook) | [REFERENCE](https://numl.design/reference) | [REPL](https://numl.design/repl)\n\n## Quick Start\n\nAdd the following code to your page.\n\nvia [JsDelivr](http://www.jsdelivr.com/):\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/numl@1.1.2/dist/index.js\"\u003e\u003c/script\u003e\n```\n\nThat's all! Now you can use all elements and features of Numl 🚀\n\nTry to add a simple element:\n\n```html\n\u003cnu-btn\u003eMy button\u003c/nu-btn\u003e\n```\n\nSee our [Handbook](https://numl.design/handbook/getting-started) for more details and other ways to install Numl.\n\n## Intro\n* Add a single JS-script to your page, and you are ready to create virtually any interface using only HTML syntax quickly. No bundler, no config, and no frustration.\n* Integrate Numl with popular JS-Frameworks. Use it with SSG if you like. \n* Use color generation system and styles-to-state bindings to decrease style declarations up to dozens of times compared to plain CSS.\n* Easily create your own Design System and UI Kit based on Numl. [Example](https://cubejs-uikit.vercel.app/)\n* Customize your elements at any level: Globally, in context, directly. Use design tokens (Custom Properties) for a more convenient way to customize.\n* Remove dozens of UI helper libraries from your project 'cause Numl can do it itself.\n* Add your own elements, style attributes, behaviors, design tokens, custom units, and more...\n* Use it for free. Contribute if you like it. \n\n## Who is Numl for?\n\n- **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. \n- **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.\n- **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.\n\n## Another UI Framework? Why should I care?\n\n- **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.\n- **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.\n- **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 maintaining and refactoring.\n- **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.\n\n[Learn more at NUML.DESIGN](https://numl.design/)\n\n## Examples\n\n* [Flex playground](https://numl.design/storybook/layouts/flex-playground)\n* [Grid playground](https://numl.design/storybook/layouts/grid-playground)\n* [Markdown converter](https://numl.design/storybook/converters/markdown)\n* [Before/After slider](https://numl.design/storybook/complex/before-after-slider)\n* [Login form validation](https://numl.design/storybook/complex/login-form)\n\n## Built with Numl\n\n* [Cube.js UI Kit](https://github.com/cube-js/cubejs-ui-kit) by **Cube Dev**.\n* [Numl Website](https://numl.design) ([Repo Link](https://github.com/numldesign/website)) - built with **Nuxt** and **Vue.js**.\n* Old Numl Landing Page ([Repo Link](https://github.com/tenphi/numl.design)) built with **Parcel**.\n* Old Numl Storybook ([Repo Link](https://github.com/tenphi/numl-storybook)) built with **Vue.js** and **Webpack**.\n* [Sellerscale](https://sellerscale.com) – [Project Screenshot Light](https://github.com/tenphi/nude/blob/master/images/example-app-light.png?raw=true) | [Project Screenshot Dark](https://github.com/tenphi/nude/blob/master/images/example-app-dark.png?raw=true) | [Project Screenshot Light Contrast](https://github.com/tenphi/nude/blob/master/images/example-app-light-contrast.png?raw=true) | [Project Screenshot Dark Contrast](https://github.com/tenphi/nude/blob/master/images/example-app-dark-contrast.png?raw=true)\n* [Web Standards Calendar](https://frontend-events-numl.now.sh/) by [@KatrinLuna](https://github.com/katrinLuna) ([Repo Link](https://github.com/katrinLuna/frontend-events-numl)).\n\n### Browser Support\n\nNuml is tested in the latest two versions of the following browsers:\n\n* Microsoft Edge\n* Google Chrome\n* Mozilla Firefox\n* Apple Safari\n* Apple iOS Safari\n* Google Android\n\nCritical bug fixes in earlier versions will be addressed based on their severity and impact.\n\nIf you need to support IE11 or pre-Chromium Edge, this library isn't for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you're using Numl in such a browser, you're gonna have a bad time.\n\n## Development\n\n* `npm start` run Numl Playground.\n* `npm run build` build the library to `dist`:\n    * `dist/index.js` - ES6 tree-shaking friendly module. (Exports global `Nude` object)\n* `npm run dev` build the library, then keep rebuilding it whenever the source files change.\n* `npm run test` run tests.\n\n## Local playground\n\nRun `npm start` to view test page with few examples.\n\n## Roadmap\n\n* Numl v2: [style2state syntax proposal](https://github.com/numldesign/numl/projects/2)\n* [Numl-React v1](https://github.com/numldesign/numl-react): Modular \u0026 Accessible React UI Library 🚀\n* [Theme-Generator](https://github.com/numldesign/theme-generator) 🌈\n* More documentation, examples, and tests\n* TRL Support\n* Improved Behavior System\n* Figma UI Kit 🌟 (Coming Soon) [![Figma](https://img.shields.io/badge/follow%20us-on%20Figma-blue)](https://www.figma.com/@numldesign)\n\n\n## Contribution\n\n**We are looking for contributors!** \n\n**Numl** is a big and ambitious project with open source that it has a unique approach in UI development. \n\nJoin us for creating a better Web for everyone!\n\nIf you want to join us or leave some feedback write to this email: [inbox@numl.design](mailto:inbox@numl.design?subject=Numl%20Project)\n\nAnd here is our [Discord](https://discord.gg/sHnHPnAPZj). (Ask your questions here!)\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://tenphi.me\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/327209?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrey Yamanov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/numldesign/numl/commits?author=tenphi\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/issues?q=author%3Atenphi\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#business-tenphi\" title=\"Business development\"\u003e💼\u003c/a\u003e \u003ca href=\"#design-tenphi\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/commits?author=tenphi\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-tenphi\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/commits?author=tenphi\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/shubham-kaushal\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/63925481?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShubham Kaushal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/numldesign/numl/issues?q=author%3Ashubham-kaushal\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#business-shubham-kaushal\" title=\"Business development\"\u003e💼\u003c/a\u003e \u003ca href=\"#design-shubham-kaushal\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/commits?author=shubham-kaushal\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-shubham-kaushal\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/commits?author=shubham-kaushal\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/timeshift92\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/13614530?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNurbek Akhmedov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/numldesign/numl/commits?author=timeshift92\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/issues?q=author%3Atimeshift92\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-timeshift92\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.facebook.com/profile.php?id=100003949341124\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/29942902?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ekatrinLuna\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/numldesign/numl/commits?author=katrinLuna\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/commits?author=katrinLuna\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/issues?q=author%3AkatrinLuna\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-katrinLuna\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://resume.dmtry.me/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/572096?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDmitry Patsura\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/numldesign/numl/commits?author=ovr\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/andrey-skl\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/4318513?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrey Skladchikov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/numldesign/numl/issues?q=author%3Aandrey-skl\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-andrey-skl\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://dev.to/leonid_cube_dev\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/30028681?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLeonid Yakovlev\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-YakovlevCoded\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/numldesign/numl/commits?author=YakovlevCoded\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n[MIT](LICENSE)\n","funding_links":["https://opencollective.com/numldesign"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOutpostHQ%2Fnuml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOutpostHQ%2Fnuml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOutpostHQ%2Fnuml/lists"}