@npolar/mdc is a collection ECMAScript2019 custom elements, built with LitElement and lit-html on top of:
$ git clone [email protected]:npolar/mdc.git && cd mdc
$ yarn
$ yarn dev
Live-server: http://localhost:7777
ES2019-compliance is enforced using ESLint. See .eslintrc
yarn eslint
yarn build
$ cd ~/my-project
$ yarn add https://github.com/npolar/mdc
$ cd node_modules/@npolar/mdc && yarn && cd -<style>
:root {
--mdc-theme-primary: #000;
--mdc-theme-secondary: rgb(18, 79, 120);
--mdc-theme-on-primary: #fff;
--mdc-theme-on-secondary: #66bb6a;
--mdc-theme-error: #b00020;
}
</style>See mdc-theme documentation for further customisations.
Having 0 run-time dependencies means: bring your own@npolar/mdc's fonts.
Two fonts are included in the asset/font folder:
To self-host these fonts, first copy the css files and the font definitions into your project's build / web root (here dist in ~/my-project):
$ cd ~/my-project
$ mkdir -p dist/@npolar/mdc
$ cp -r node_modules/@npolar/mdc/asset/* dist/@npolar/mdc/Then, add links to the font stylesheets in your <head> element:
<link rel="stylesheet" href="/@npolar/mdc/css/style/material-icons.css" />
<link rel="stylesheet" href="/@npolar/mdc/css/style/typography.css" />