-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
updated README template and readme for generator
- Loading branch information
Vermel, Runn (GE Global Research)
committed
May 2, 2016
1 parent
9a5567c
commit 03f6d19
Showing
3 changed files
with
70 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,80 @@ | ||
| <%= titleize(name) %> | ||
| ----------------------------------------------- | ||
| #<%= titleize(name) %> | ||
|
|
||
| ## Overview | ||
|
|
||
| <%= titleize(name) %> is a Predix Experience ('Px') component | ||
| <%= titleize(name) %> is a Predix UI component | ||
|
|
||
| ## Getting Started | ||
| ## Usage | ||
|
|
||
| Read https://github.com/pages/PX/technical-principles/ | ||
| ### Prerequisites | ||
| 1. node.js | ||
| 2. npm | ||
| 3. bower | ||
| 4. [webcomponents-lite.js polyfill](https://github.com/webcomponents/webcomponentsjs) | ||
|
|
||
| From the component's directory... | ||
| Node, npm and bower are necessary to install the component and dependencies. webcomponents.js adds support for web components and custom elements to your application. | ||
|
|
||
| ``` | ||
| $ npm install | ||
| $ bower install | ||
| $ grunt sass | ||
| ``` | ||
|
|
||
| ### API and examples | ||
| ## Getting Started | ||
|
|
||
| From the component's directory | ||
| First, install the component via bower on the command line. | ||
|
|
||
| ``` | ||
| $ grunt depserve | ||
| bower install <%= titleize(name) %> --save | ||
| ``` | ||
|
|
||
| Starts a local server. Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples. | ||
|
|
||
| ### LiveReload | ||
|
|
||
| By default grunt depserve is configured to enable LiveReload and will be watching for modifications in your root directory as well as `/css`. | ||
| Second, import the component to your application with the following tag in your head. | ||
|
|
||
| Your browser will also need to have the LiveReload extension installed and enabled. For instructions on how to do this please refer to [livereload.com/extensions/](http://livereload.com/extensions/). | ||
|
|
||
| Add, remove, modify file system patterns specified in the `depserve.options.livereload` array in your `Gruntfile.js` | ||
| ``` | ||
| <link rel="import" href="/bower_components/<%= titleize(name) %>/<%= titleize(name) %>.html"/> | ||
| ``` | ||
|
|
||
| This is an example depserve configuration: | ||
| Finally, use the component in your application: | ||
|
|
||
| ``` | ||
| depserve: { | ||
| options: { | ||
| open: '<%= depserveOpenUrl %>, | ||
| livereload: [__dirname + "/js", __dirname + "/css", __dirname] | ||
| } | ||
| } | ||
| Insert Your demo code here. | ||
| ``` | ||
|
|
||
| Disable LiveReload by removing the `livereload` key from the configuration object. | ||
| <br /> | ||
| <hr /> | ||
|
|
||
| ### DevMode | ||
| ## documentation | ||
|
|
||
| From the component's directory run: | ||
| Read the full API and view the demo [here](https://predixdev.github.io/<%= titleize(name) %>). | ||
|
|
||
| ``` | ||
| $ grunt devmode | ||
| ``` | ||
|
|
||
| Starts a local server exactly the same as if you had run `grunt depserve` however in addition it also runs `grunt watch` concurrently which will execute commands on file change according to the specified matching patterns. | ||
| ## Local Development | ||
|
|
||
| This is an example `grunt watch` configuration which watches for changes to SASS files, then on changes executes SASS compilation and automatic prefixing: | ||
| From the component's directory... | ||
|
|
||
| ``` | ||
| watch: { | ||
| sass: { | ||
| files: ['sass/**/*.scss'], | ||
| tasks: ['sass', 'autoprefixer'], | ||
| options: { | ||
| interrupt: true | ||
| } | ||
| } | ||
| } | ||
| $ npm install | ||
| $ bower install | ||
| $ grunt sass | ||
| ``` | ||
|
|
||
| ### Options | ||
|
|
||
| Does this component have runtime configuration options? If so, they should be able to be passed as attributes on the element with examples shown below. | ||
|
|
||
| ### Function calls | ||
|
|
||
| What is the public API of this component? | ||
| From the component's directory, to start a local server run: | ||
|
|
||
| ### Extending styles | ||
| ``` | ||
| $ grunt depserve | ||
| ``` | ||
|
|
||
| Documented CSS extension points? | ||
| Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples. | ||
|
|
||
| ### Extending behavior | ||
|
|
||
| See Polymer composition patterns | ||
| ### DevMode | ||
| Devmode runs `grunt depserve` and `grunt watch` concurrently so that when you make a change to your source files and save them, your preview will be updated in any browsers you have opened and turned on LiveReload. | ||
| From the component's directory run: | ||
|
|
||
| GE Coding Style Guide | ||
| --------------------- | ||
| ``` | ||
| $ grunt devmode | ||
| ``` | ||
|
|
||
| ### GE Coding Style Guide | ||
| [GE JS Developer's Guide](https://github.com/GeneralElectric/javascript) | ||
|
|
||
| <br /> | ||
| <hr /> | ||
|
|
||
| ## Known Issues | ||
|
|
||
| ### Known Issues | ||
| Please use [Github Issues](https://github.com/PredixDev/<%= titleize(name) %>/issues) to submit any bugs you might find. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters