https://github.com/webcomponents/slush-element
Slush generator to create Custom Elements using Polymer, X-Tag or VanillaJS
https://github.com/webcomponents/slush-element
Last synced: 5 months ago
JSON representation
Slush generator to create Custom Elements using Polymer, X-Tag or VanillaJS
- Host: GitHub
- URL: https://github.com/webcomponents/slush-element
- Owner: webcomponents
- License: mit
- Archived: true
- Created: 2014-05-29T03:54:14.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2016-10-28T10:30:21.000Z (over 9 years ago)
- Last Synced: 2024-10-02T06:41:54.115Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://npmjs.org/slush-element
- Size: 46.9 KB
- Stars: 41
- Watchers: 11
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-webcomponents - Element Generator for Slush
- awesome-custom-elements - Element Generator for Slush
README
# Slush Generator
for Custom Elements
[](http://npmjs.org/slush-element)
[](http://npmjs.org/slush-element)
[](https://travis-ci.org/webcomponents/slush-element)
[](https://david-dm.org/webcomponents/slush-element)
> A Slush 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 slush-element
```
## Getting Started
There are two different generators available.
* The first one used to scaffold out new **individual elements**:
```sh
$ slush 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
$ slush 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 Gulp tasks?
```
Which will generate the following project structure with npm and bower dependencies installed:
```
.
├── .editorconfig
├── .gitignore
├── bower.json
├── bower_components/
├── package.json
├── index.html
├── node_modules/
├── gulpfile.js
├── src/my-element.html
└── README.md
```
> _**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
## 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/obetomuniz) | [](https://github.com/zenorocha)
--- | --- | --- | --- | ---
[Beto Muniz](https://github.com/obetomuniz) | [Zeno Rocha](https://github.com/zenorocha)
## License
[MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org