Awesome

Yeoman Generator<br> for Custom Elements<br>

WC + Yeoman

A Yeoman Generator that provides a functional boilerplate to easily create Custom Elements using Polymer, X-Tag or VanillaJS.

All templates are based in the boilerplates authored by the WebComponents.org team:

Polymer Boilerplate

X-Tag Boilerplate

VanillaJS Boilerplate

Install

Install this generator using NPM:

[sudo] npm install -g generator-element

Getting Started

ScreenShot

There are two different generators available.

The first one used to scaffold out new individual elements:

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:

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

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

History

For detailed changelog, see Releases.

Team

This project is maintained by these people and a bunch of awesome contributors.

| --- | --- | --- | --- | --- Zeno Rocha | Addy Osmani