From 970416be3e5d6dbfec9a708c71bb8d509cf99acb Mon Sep 17 00:00:00 2001 From: Steve Orvell Date: Tue, 8 May 2018 13:28:33 -0700 Subject: [PATCH 1/4] Update Readme getting started --- README.md | 60 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 44 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index eace46192..8d246cac2 100644 --- a/README.md +++ b/README.md @@ -18,29 +18,57 @@ Insert screenshot of a demo page, including a code snippet. > Note: This guide assumes you have npm installed locally. -To get started using one of the Material Web Components in your web application, simply: +The easiest way to try out the Material Web Components is to use one of these online tools: -1. Install each element you'd like to use: + * Runs in all supported browsers: StackBlitz, Glitch - ``` - npm install @material/mwc-button - ``` + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/gitufet/edit?html,output), [CodePen](https://codepen.io/sorvell/pen/MGrZqp?editors=1000). + +Or you can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules. -1. Load the webcomponents polyfills (see the [webcomponents polyfill readme](https://github.com/webcomponents/webcomponentsjs/blob/v2/README.md) for more info). +When you're ready to use the Material Web Components in your web application: -1. Import the element: +1. Ensure the webcomponents polyfills are included in your HTML page - ```html - - ``` + - Install webcomponents polyfills -1. Use the element on the page: + ```npm i @webcomponents/webcomponentsjs``` - ```html - - ``` + - Add webcomponents polyfills to your HTML page + + `````` + + 1. Add one of the MWC elements to your project, for example for icon: + + ```npm i @material/mwc-icon``` + + 1. Import the element definition into your HTML page: + + `````` + + Or into your module script: + + ```import {Icon} from "@material/mwc-icon"``` + + 1. Create an instance of element in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/): + + ```sentiment_very_satisfied``` + + 1. Install the Polymer CLI: + + ```npm i -g polymer-cli@next``` + + 1. Run the development server and open a browser pointing to its URL: + + ```polymer serve``` + + > The Material Web Components are published on [npm](https://www.npmjs.com) using JavaScript Modules. + This means it can take advantage of the standard native JavaScript module loader available in all current major browsers. + > + > However, since the Material Web Components use npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. + + Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle. + ## Contributing guide Below are instructions for setting up project development. From 5c9b6c8b500670116b1da1fbbab423a734eeb06d Mon Sep 17 00:00:00 2001 From: Steve Orvell Date: Tue, 8 May 2018 13:42:25 -0700 Subject: [PATCH 2/4] Update Readme: add glitch example --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8d246cac2..6079335c1 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Insert screenshot of a demo page, including a code snippet. The easiest way to try out the Material Web Components is to use one of these online tools: - * Runs in all supported browsers: StackBlitz, Glitch + * Runs in all supported browsers: StackBlitz, [Glitch](https://glitch.com/edit/#!/material-web-components) * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/gitufet/edit?html,output), [CodePen](https://codepen.io/sorvell/pen/MGrZqp?editors=1000). From da78555fffb891f0d0163f58031c42285d34bc7f Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Tue, 8 May 2018 15:55:53 -0700 Subject: [PATCH 3/4] Update main Readme --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6079335c1..c9c71c047 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,11 @@ Insert screenshot of a demo page, including a code snippet. The easiest way to try out the Material Web Components is to use one of these online tools: - * Runs in all supported browsers: StackBlitz, [Glitch](https://glitch.com/edit/#!/material-web-components) + * Runs in all [supported browsers](#browser-support): [Glitch](https://glitch.com/edit/#!/material-web-components) * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/gitufet/edit?html,output), [CodePen](https://codepen.io/sorvell/pen/MGrZqp?editors=1000). - -Or you can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules. + +Or you can also copy [this HTML file](https://gist.githubusercontent.com/sorvell/2ec11ccde449815bc97edc1026be27a9/raw/8bab65dd5d15f657ae69493851690c5564367d13/index.html) into a local file and run it in any browser that supports JavaScript Modules. When you're ready to use the Material Web Components in your web application: @@ -56,7 +56,7 @@ When you're ready to use the Material Web Components in your web application: 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: @@ -68,7 +68,7 @@ When you're ready to use the Material Web Components in your web application: > However, since the Material Web Components use npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform. Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle. - + ## Contributing guide Below are instructions for setting up project development. From c4046450cc6f62814aedcb72cf796fc347825d40 Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Tue, 8 May 2018 15:56:10 -0700 Subject: [PATCH 4/4] Update package readme's --- packages/button/README.md | 8 ++++---- packages/checkbox/README.md | 8 ++++---- packages/fab/README.md | 8 ++++---- packages/icon/README.md | 8 ++++---- packages/radio/README.md | 8 ++++---- packages/ripple/README.md | 8 ++++---- packages/switch/README.md | 8 ++++---- 7 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/button/README.md b/packages/button/README.md index 731da47bf..3f8ca86fd 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -3,11 +3,11 @@ A [Material Components](https://material.io/components/) icon implementation usi ## Getting started - * The easiest way to try out mwc-button is to use one of these online tools: +* The easiest way to try out mwc-button is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), [CodePen](https://codepen.io/azakus/pen/deZLja). * You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). @@ -42,7 +42,7 @@ A [Material Components](https://material.io/components/) icon implementation usi 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md index 9d1b5ffde..87c189ab8 100644 --- a/packages/checkbox/README.md +++ b/packages/checkbox/README.md @@ -5,10 +5,10 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-checkbox is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), -[CodePen](https://codepen.io/azakus/pen/deZLja). + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), + [CodePen](https://codepen.io/azakus/pen/deZLja). * You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). @@ -42,7 +42,7 @@ A [Material Components](https://material.io/components/) icon implementation usi 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: diff --git a/packages/fab/README.md b/packages/fab/README.md index af0085da4..0c41e7c54 100644 --- a/packages/fab/README.md +++ b/packages/fab/README.md @@ -5,10 +5,10 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-fab is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), -[CodePen](https://codepen.io/azakus/pen/deZLja). + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), + [CodePen](https://codepen.io/azakus/pen/deZLja). * You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). @@ -42,7 +42,7 @@ A [Material Components](https://material.io/components/) icon implementation usi 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: diff --git a/packages/icon/README.md b/packages/icon/README.md index af884087c..bc3ef690f 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -5,10 +5,10 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-icon is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), -[CodePen](https://codepen.io/azakus/pen/deZLja). + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), + [CodePen](https://codepen.io/azakus/pen/deZLja). * You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). @@ -42,7 +42,7 @@ A [Material Components](https://material.io/components/) icon implementation usi 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: diff --git a/packages/radio/README.md b/packages/radio/README.md index 586d0424d..a64316307 100644 --- a/packages/radio/README.md +++ b/packages/radio/README.md @@ -5,10 +5,10 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-radio is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), -[CodePen](https://codepen.io/azakus/pen/deZLja). + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), + [CodePen](https://codepen.io/azakus/pen/deZLja). * You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). @@ -42,7 +42,7 @@ A [Material Components](https://material.io/components/) icon implementation usi 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: diff --git a/packages/ripple/README.md b/packages/ripple/README.md index 2be28b656..ba894759c 100644 --- a/packages/ripple/README.md +++ b/packages/ripple/README.md @@ -5,10 +5,10 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-ripple is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), -[CodePen](https://codepen.io/azakus/pen/deZLja). + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), + [CodePen](https://codepen.io/azakus/pen/deZLja). * You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). @@ -42,7 +42,7 @@ A [Material Components](https://material.io/components/) icon implementation usi 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: diff --git a/packages/switch/README.md b/packages/switch/README.md index d5a95fe72..3036f74ca 100644 --- a/packages/switch/README.md +++ b/packages/switch/README.md @@ -5,10 +5,10 @@ A [Material Components](https://material.io/components/) icon implementation usi * The easiest way to try out mwc-switch is to use one of these online tools: -* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) + * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html) -* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), -[CodePen](https://codepen.io/azakus/pen/deZLja). + * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output), + [CodePen](https://codepen.io/azakus/pen/deZLja). * You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)). @@ -42,7 +42,7 @@ A [Material Components](https://material.io/components/) icon implementation usi 1. Install the Polymer CLI: - ```npm i -g polymer-cli@next``` + ```npm i -g polymer-cli``` 1. Run the development server and open a browser pointing to its URL: