Design system library by @malt
This repository contains all webcomponents library from Malt "Joy" design system.
You can use this library with any stack you need, with or without JavaScript frameworks.
The fastest way to install the library is to use cdn links. It will automatically install the core library.
The initial script itself is extremely tiny and does not represent the entire library, it's only a small registry.
Add the following tags to your page :
``html`
> Note: joy.css file is mandatory. It contains some skeleton style, and the whole design tokens in plain CSS.
You can import it in your preprocessor as well, to bundle it with your own browserslist configuration.
Only the components used on that page will actually be requested and lazy-loaded.
Then, you can use any component you want :
`html`
Self lazy-loading components (webpack only)
Add this code to your main JS/TS file:
`javascript
// Import components
import { defineCustomElements } from '@maltjoy/core/dist/loader';
// Joy CSS is required to include every declared custom properties, and apply skeleton style while component are loading
import '@maltjoy/core/dist/joy/joy.css';
// Register components in customElements regitry
defineCustomElements(window);
`
`scss`
// Import the bundled CSS (with or without extension, depending on your own sass config
@import "@maltjoy/core/dist/joy/joy.css";
`javascript``
import '@maltjoy/core/dist/components/joy-tag.js';
> The original bundle size is way heavier than other solutions, as it will include the whole Stenciljs runtime.*
For specific framework integration, please read the official Stenciljs documentation