Skip to content

Latest commit

 

History

History
101 lines (69 loc) · 2.38 KB

README.md

File metadata and controls

101 lines (69 loc) · 2.38 KB
Raw

∺ Hingejs - WebComponents

A Suite of Web Components to be used in the UI

These are built under the custom elements spec. These tags can be dropped into any front end application that supports them, which is all modern browsers. A polyfill can be added for older browsers.

You can use this package in addition to your own.

This is a work in progress until a 1.0.0 release.

Goals

  • Use native JS for little to no dependency
  • Cross browser support
  • Flexible for CSS
  • Unit tested

Live demos

Wiki

Related packages

Install

$ npm install @hingejs/webcomponents --save

CDN

https://cdn.jsdelivr.net/npm/@hingejs/webcomponents/index.min.js

or by version

https://cdn.jsdelivr.net/npm/@hingejs/[email protected]/index.min.js

https://cdn.jsdelivr.net/npm/@hingejs/webcomponents@latest/index.min.js

<script type="module" src="https://cdn.jsdelivr.net/npm/@hingejs/webcomponents/index.min.js"></script>

Individual elements

<script type="module" src="https://cdn.jsdelivr.net/npm/@hingejs/webcomponents@latest/src/accordion-slider/index.js"></script>

Webpack

All elements

import '@hingejs/webcomponents'

Individual elements

import '@hingejs/webcomponents/src/accordion-slider/index.js'
import '@hingejs/webcomponents/src/characters-remaining/index.js'
import '@hingejs/webcomponents/src/content-loader/index.js'
import '@hingejs/webcomponents/src/content-loader/index.js'
import '@hingejs/webcomponents/src/json-syntax/index.js'
import '@hingejs/webcomponents/src/route/index.js'
import '@hingejs/webcomponents/src/side-notification/index.js'
import '@hingejs/webcomponents/src/table-sort/index.js'
import '@hingejs/webcomponents/src/tool-tip/index.js'
import '@hingejs/webcomponents/src/touch-swipe/index.js'

CSS Variables to style components using shadow-dom

--primary: #4d68cb;
--on-primary: #fff;
--primary-variant: #0026ad;
--secondary: #506be5;
--on-secondary: #fff;
--success: #5ba014;
--error: #d05050;
--header: #f5f5f5;
--on-header: #494949;
--nav: #fff;
--on-nav: #000;
--background: #fff;
--on-background: #4d68cb;
--surface: #fff;
--on-surface: #212121;