https://github.com/npolar/mdc
Material Design Components
https://github.com/npolar/mdc
ecmascript ecmascript-2019 lit-element lit-html material-design web-components
Last synced: 4 months ago
JSON representation
Material Design Components
- Host: GitHub
- URL: https://github.com/npolar/mdc
- Owner: npolar
- License: mit
- Created: 2019-09-10T12:09:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-12-13T20:32:42.000Z (over 5 years ago)
- Last Synced: 2024-04-14T23:01:00.172Z (about 2 years ago)
- Topics: ecmascript, ecmascript-2019, lit-element, lit-html, material-design, web-components
- Language: JavaScript
- Homepage: https://mdc.npolar.now.sh/
- Size: 1.02 MB
- Stars: 0
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# @npolar/mdc – material design components
@npolar/mdc is a collection ECMAScript2019 custom elements, built with [LitElement](https://lit-element.polymer-project.org/) and [lit-html](https://lit-html.polymer-project.org/) on top of:
- [Material Components for the web](https://github.com/material-components/material-components-web)
- [Material Web Components](https://github.com/material-components/material-components-web-components)
## 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](https://eslint.org/). See [.eslintrc](.eslintrc.json)
[](https://travis-ci.com/npolar/mdc)
```
yarn eslint
```
## Build
```
yarn build
```
## Install
```sh
$ cd ~/my-project
$ yarn add https://github.com/npolar/mdc
$ cd node_modules/@npolar/mdc && yarn && cd -
```
## Use
### Colors
```html
: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;
}
```
See [mdc-theme](https://github.com/material-components/material-components-web/tree/master/packages/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:
- [Inter](https://rsms.me/inter/)
- [Material Icons](https://material.io/resources/icons/?style=baseline)
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`):
```bash
$ 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 `` element:
```html
```