Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deprecate/generator-element
Yeoman generator to create Custom Elements using Polymer, X-Tag or VanillaJS
https://github.com/deprecate/generator-element
Last synced: about 2 months ago
JSON representation
Yeoman generator to create Custom Elements using Polymer, X-Tag or VanillaJS
- Host: GitHub
- URL: https://github.com/deprecate/generator-element
- Owner: deprecate
- Created: 2014-02-21T13:10:51.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2021-12-31T16:14:23.000Z (over 2 years ago)
- Last Synced: 2024-05-08T04:01:49.755Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://npmjs.org/generator-element
- Size: 69.3 KB
- Stars: 129
- Watchers: 10
- Forks: 18
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Lists
- awesome-webcomponents - Element Generator for Yeoman
README
# Yeoman Generator
for Custom Elements
[](http://npmjs.org/generator-element)
[](http://npmjs.org/generator-element)
[](https://travis-ci.org/webcomponents/generator-element)
[](https://david-dm.org/webcomponents/generator-element)
> A Yeoman Generator that provides a functional boilerplate to easily create Custom Elements using [Polymer](http://www.polymer-project.org/), [X-Tag](http://x-tags.org/) or [VanillaJS](http://vanilla-js.com/).
> All templates are based in the boilerplates authored by the [WebComponents.org team](https://github.com/webcomponents/):
> * [Polymer Boilerplate](https://github.com/webcomponents/polymer-boilerplate)
> * [X-Tag Boilerplate](https://github.com/webcomponents/x-tag-boilerplate)
> * [VanillaJS Boilerplate](https://github.com/webcomponents/element-boilerplate)
## Install
Install this generator using NPM:
```sh
[sudo] npm install -g generator-element
```
## Getting Started
There are two different generators available.
* The first one used to scaffold out new **individual elements**:
```sh
yo element
```
```
[?] What do you want to use?
[?] What's the name of your element?
[?] Do you want to include lifecycle callbacks?
```
Which will generate the following file:
```
.
└── my-element.html
```
* The second one is used to scaffold an **entire project**:
```sh
yo element:repo
```
```
[?] What do you want to use?
[?] What's the GitHub repository?
[?] What's your GitHub username?
[?] What's the name of your element?
[?] How would you describe the element?
[?] Do you want to include lifecycle callbacks?
[?] Do you want to include some useful Grunt tasks?
```
Which will generate the following project structure:
```
.
├── .editorconfig
├── .gitignore
├── bower.json
├── package.json
├── index.html
├── Gruntfile.js
└── src/my-element.html
```
And run `bower install` & `npm install` for you to fetch all dependencies.
> _**Note**: files will be generated in the current directory, so be sure to change to a new directory before running those commands if you don't want to overwrite existing files._
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## History
For detailed changelog, see [Releases](https://github.com/webcomponents/generator-element/releases).
## Team
This project is maintained by these people and a bunch of awesome [contributors](https://github.com/webcomponents/generator-element/graphs/contributors).
[](https://github.com/zenorocha) | [](https://github.com/addyosmani)
--- | --- | --- | --- | ---
[Zeno Rocha](https://github.com/zenorocha) | [Addy Osmani](https://github.com/addyosmani)
## License
[MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org