diff --git a/README.md b/README.md index cdb82a665..707d267ee 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,16 @@ # Material Web Components +> Warning: These components are still a work in progress. + Material Web Components helps developers execute [Material Design](https://www.material.io) using [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). Built on top of the [Material Components Web](https://github.com/material-components/material-components-web) project and [LitElement](https://github.com/polymerlabs/lit-element), the Material Web Components enable a reliable development workflow to build beautiful and functional web projects. -Web Components can be seamlessly incorporated into a wide range of usage contexts. Whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Web Components into your site in a lightweight, idiomatic fashion. +Web Components can be seamlessly incorporated into a wide range of usage contexts. Whether you're already heavily invested in another framework or not, it's easy to incorporate Material Web Components into your site in a lightweight, idiomatic fashion. + + **[Demos](demos/)** @@ -14,28 +20,28 @@ Web Components can be seamlessly incorporated into a wide range of usage context To get started using one of the Material Web Components in your web application, simply: -1. npm install it +1. Install each element you'd like to use: ``` npm install @material/mwc-button ``` -1. Load the webcomponents polyfills (see the [webcomponents polyfill Readme](https://github.com/webcomponents/webcomponentsjs/blob/v2/README.md) for more info). +1. Load the webcomponents polyfills (see the [webcomponents polyfill readme](https://github.com/webcomponents/webcomponentsjs/blob/v2/README.md) for more info). -1. import the element +1. Import the element: - ``` + ```html ``` -1. Use the element on the page +1. Use the element on the page: - ``` + ```html ``` - +## Contributing guide Below are instructions for setting up project development. 1. `git clone` this repo @@ -45,9 +51,9 @@ Below are instructions for setting up project development. ### Rebuild CSS for components -Components define their css using [SASS](http://sass-lang.com/). The SASS output is built into a javascript module which exports the component's styling as a (lit-html)[https://github.com/Polymer/lit-html] template. +Components define their css using [SASS](http://sass-lang.com/). The SASS output is built into a javascript module which exports the component's styling as a [lit-html](https://github.com/Polymer/lit-html) template. -To compile the component SASS run +To compile the component SASS run: ``` npm run update-styling