generator-prototype

The scaffolding project for better prototypes

npm install generator-prototype
58 downloads in the last day
61 downloads in the last week
133 downloads in the last month

Prototype Generator

NPM

Yeoman generator for Prototype.

Getting started

Requirements

  • Node.js & Node Package Manager
  • Grunt Command Line Interface – npm install -g grunt-cli
  • SASS 3.4 (because of @-root used in grunticon-mixin) – gem install sass
  • Compass 1 (because of Source Maps) – gem install compass --pre

Installation

  • Install Yeoman: npm install -g yo

  • Install the package via: npm install -g generator-prototype

  • Or copy the repository via clone to your directory (it depends on the system, just find your directory with yo installed): git clone https://github.com/Prototype-Group/generator-prototype.git ~/AppData/Roaming/npm/node_modules

Usage

Prototype app scaffolds.

mkdir project && cd project
yo prototype [--skip-install]

Options

  • -s alias --skip-install

    Skips the automatic execution of bower and npm after scaffolding has finished.

  • -w alias --skip-welcome-message

    Skips app welcome message.

Quick Start

You can scaffold your project in an instance. The first question is:

"Choose your installation routine"

If you choose "Standard installation" you skip the rest of the questions and get the default values.

Plugins and Modules

There are standard grunt modules I use. These are:

But you can also apply additional addons and grunt modules to your project. Just choose specific ones:

Assemble

  • permalinks
  • assemble-contrib-contextual
  • assemble-contrib-sitemap
  • assemble-related-pages
  • assemble-markdown

Grunt modules

  • grunt-devtools - An user interface in chrome to execute grunt tasks in your project
  • grunt-sass - You want to use Libsass instead of Compass to render your stylesheets 10 times faster? Here you go!
  • grunt-autoprefixer - Autoprefixer parses CSS and adds vendor-prefixed CSS properties using the Can I Use database.
  • grunticon - Generate SVG-URI-SASS files with png fallbacks
  • dr-grunt-svg-sprites - Generate SVG Sprites with css files
  • grunt-packager (only executable when your project.jspackcfg is configured) - package your js
  • grunt-contrib-compass
  • grunt-browser-sync - Sync and auto-reload your local server over multiple devices
  • grunt-photobox - Take snapshots from homepage
  • grunt-bless - Split your css after you reach size limit for ie9
  • grunt-comment-media-queries - You begin your project with mobile first but need to support desktop styles in IE8? That's your module!
  • grunt-connect-proxy - a preconfigured proxy for developing clientside API interfaces in your prototype, with CORS, Basic Authentication support and http methods

Gruntfile

For our Gruntfile we use the grunt module load-grunt-configs to split the file up in multiple files. These files/tasks you can find in this directory:

  • helpers/_grunt

JS Libraries and CSS Frameworks

You can choose JS Libraries like:

  • jQuery
  • BackboneJS
  • RequireJS
  • AngularJS

And you can also choose SCSS Frameworks like:

  • Foundation
  • Bourbon Neat
  • SASS Bootstrap

All files will be included and configured. Have fun!

Sub Generators

To help you in your workflow, we integrated some sub generators for you:

BackboneJS:

  • Create a Backbone Model: yo prototype:bm
  • Create a Backbone View: yo prototype:bv
  • Create a Backbone Collection: yo prototype:bc

Grunt Modules:

  • Insall your grunt modules: yo prototype:gm

Others will follow.

Alternative

License

MIT License

TODO:

  • CMS Snippets
npm loves you