Package Exports
- numl
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (numl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Numl is a markup language to create modern high-quality web-interfaces with any look using HTML-based syntax. It utilizes the power of Web Components and creates all the CSS needed right in runtime as it requires, which makes it much more flexible than any other markup solution. Built-in elements will allow you to make gorgeous interfaces without inventing your own Design System or UI library.
PRE-BETA VERSION, UNDER RAPID DEVELOPMENT
Numl is:
- Customizable Design System for any project and scale
- Accessible production-ready Prototyping Solution
- Handy UI library for your favorite framework
- Powerful CSS/JS/HTML-Framework with CSS generation, inheritance and more
- Markup Methodology that is enjoyable to follow
- All-in-one Language to describe interfaces that look and work great
And also... it's just a single js-file that you can include into your website to start doing magic:
- No build step needed (don't wait! create!)
- No config needed (your markup is your config)
- No scripting to activate
- No confusing classes to style
- No frustration in usage
With Numl you can:
- Create virtually any interface you want
- Make your interface accessible without fighting IDs and specifications
- Create your own element or a whole Design System with ease
- Responsive layouts with effort so little you've never seen before
- Copy-paste your markup from project to project, regardless of the framework used
- Add Dark and High-contrast modes to your site effortlessly
- Be calm for technical debt in markup code
- Enjoy while doing what you love
Examples
Getting started
To start prototyping with Numl just add a single module to the page:
<script type="module" src="https://cdn.jsdelivr.net/npm/numl@0.11/dist/index.js"></script>That's it! No build step, no explicit function call to apply changes.
If you want to prevent flash of unstyled content then add the following tag to the head:
<style>nu-root { opacity: 0; }</style>Make sure you are using nu-root tags on the top-level of your app:
<body>
<nu-root>
<nu-card>
My first <nu-mark>Numl</nu-mark> application!
</nu-card>
</nu-root>
</body>Now it's time to have fun!... Try to write some HTML and build awesome interfaces.
Check out the Guide (Work in progress)
NPM installation
Nude Elements are also available via npm.
$ npm install numl --saveImport the module to your application:
import 'numl';Projects that use Numl
- Numl Landing Page (Repo Link) built with Parcel.
- Numl Storybook (Repo Link) built with Vue.js and Webpack.
- Sellerscale – Project Screenshot Light | Project Screenshot Dark | Project Screenshot Light Contrast | Project Screenshot Dark Contrast
- Web Standards Calendar by @KatrinLuna (Repo Link).
Development status (v1)
Current status of development is HERE.
And here is our Telegram Chat. (Ask your questions here!) Also we have Gitter.
Browser Support
Based on caniuse.com. Real-world support table will be presented after production-release.
- Microsoft Edge 16-18 (Partial support with @webcomponents/custom-elements polyfill, 5kb)
- Microsoft Edge 76+
- Google Chrome 67+
- Mozilla Firefox 63+
- Apple Safari 10.1+
- Apple iOS Safari 10.3+
- Google Android 67+
Build
npm run build builds the library to dist, generating four files:
dist/index.js- ES6 tree-shaking friendly module. (Exports globalNudeobject)
npm run dev builds the library, then keeps rebuilding it whenever the source files change.
Local playground
Run npm start to view test page with few examples.
Roadmap
- Documentation
- More examples
- TRL Support
See our Changlelog.
Contribution
There is no contribution guideline just yet but we would love to hear any feedback from you. Feel free to leave a note at tenphi@gmail.com.