JSPM – numl@0.12.0-beta.0

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 an HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look. It allows you to create components and layouts you need by composing base elements and gives you a handy color management system with automatic Dark and Contrast modes.

Numl utilizes the power of Web Components and runtime CSS generation. It has an API to create your own elements, style attributes, and behaviors. The build step is not required, just add a script tag to your HTML file and you are ready to go!

Your code is your design system

PRE-BETA VERSION, UNDER RAPID DEVELOPMENT

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

Learn more

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:

:not(:defined) {
  visibility: hidden;
}

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

Numl is also available via npm.

$ npm install numl --save

Import 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 v1 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+

Safari versions below 11 requires transpiling to support dynamic import.

Development

npm run build build the library to dist, generating four files:
- dist/index.js - ES6 tree-shaking friendly module. (Exports global Nude object)
npm run dev build the library, then keep rebuilding it whenever the source files change.
npm run test run tests.

Local playground

Run npm start to view test page with few examples.

Roadmap

More documentation
More examples
More tests
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.

License

MIT