generator-ui-prototype

Yeoman generator to create HTML prototypes using Jade, AngularJS, and LESS.

Getting Started

What is a Yeoman generator?

See http://yeoman.io/generators.html

What does this generator?

If you work doing UI design, there is a good chance that you used some tool to create mockups or interactive prototypes.

This generator setups some tools and files to make the creation of HTML/CSS prototypes faster.

Installation and usage

First get Yeoman, Grunt and this generator, using one command:

$ npm install -g yo generator-ui-prototype

Then create a new project:

mkdir my-cool-project && cd $_
yo ui-prototype

Start your engines...

grunt

The last command should open your browser at http://localhost:9001.

The page that you see comes from src/index.jade, and while grunt is running any .jade or .less file modified will be processed and served.

Technical details

When you run grunt on the generated project:

• Every file in src is processed and copied to .generated.
• A web server is started using .generated as a root.
• You can edit LESS and Jade files in src, the contents of .generated will be updated automatically.
• The included example uses Bower to manage JavaScript libraries, and every .js inside bower_components will be copied to .generated/scripts/libs.
• The example is based on Bootstrap and Angular, and shows how you can prototype a web UI without any JavaScript code. It also includes some convenient Jade mixins for quick prototyping.

License

MIT