@npolar/mdc – material design components

@npolar/mdc is a collection ECMAScript2019 custom elements, built with LitElement and lit-html on top of:

Develop

$ git clone git@github.com:npolar/mdc.git && cd mdc
$ yarn
$ yarn dev

Live-server: http://localhost:7777

Quality assurrance

ES2019-compliance is enforced using ESLint. See .eslintrc

yarn eslint

Build

yarn build

Install

$ cd ~/my-project
$ yarn add https://github.com/npolar/mdc
$ cd node_modules/@npolar/mdc && yarn && cd -

Use

Colors

<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.

Fonts

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" />