@culturehacklabs/chl-common-ui
v0.7.28
Published
The UI kit for genki. Styles, assets, theme, component & type library.
Downloads
8
Readme
chl-common-ui
note: unstable
This is the UI kit for Genki. It includes:
- The definitive Genki UI theme, as:
- a tailwind theme + postCSS
- compiled css and ejs for loading in JS or CSS
- a
<genki-theme />
web component that can be loaded at the top of any HTML page to provide the CSS, fonts and assets
- Raw assets including fonts and icons
- A fully modular tailwind based styling system that works across frameworks
- A library of components (in the atomic design style). These are custom elements and have accompanying react wrappers.
Development
To open a fast live reloading server where you can iterate on design and functionality of the components:
npm run start
To build the component library and update the gallery and docs, run:
npm run build
To run the unit tests for the components, run:
npm test
To generate a new component template, run:
# npm run generate scope/genki-componentname
# e.g.
npm run generate atoms/genki-avatar
Components
<account-drop-down>
code | readme<add-new-element-button>
code | readme<chl-accordion>
code | readme<chl-button>
code | readme<chl-document-card>
code | readme<confirmation-dialog>
code | readme<content-finder>
code | readme<content-results>
code | readme<content-searchfield>
code | readme<genki-block-figure>
code | readme<genki-block-quote>
code | readme<genki-block-settings>
code | readme<genki-block-summary>
code | readme<genki-block-tagged-title>
code | readme<genki-component-card>
code | readme<genki-heading>
code | readme<genki-icon>
code | readme<genki-navigator>
code | readme<genki-prose>
code | readme<genki-result-article>
code | readme<genki-result-card>
code | readme<genki-result-citation>
code | readme<genki-result-figure>
code | readme<genki-result-insert-btn>
code | readme<genki-result-summary>
code | readme<genki-result-tag>
code | readme<genki-tag>
code | readme<genki-theme>
code | readme<publish-tag>
code | readme<tag-picker>
code | readme<tag-picker-display>
code | readme<tag-picker-editor>
code | readme