generator-prototype

Prototype Generator

Yeoman generator for Prototype.

Getting started

• 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

You can apply multiple 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-htmlhint - Check your html for errors
• grunt-contrib-jshint - Check your js for errors
• grunt-jsbeautifier - Format your js and html files.
• grunt-prettysass - Format your SASS/SCSS-files
• grunt-photobox - Take snapshots from homepage
• grunt-bless - Split your css after you reach size limit for ie9
• grunt-combine-media-queries - When you use mixins for media queries in your SASS files, you can combine your media queries with this module
• 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 CSS 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:

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

Others will follow.

CMS snippets (work in progress)

You can choose between multiple content management systems (Drupal, Typo3, Magnolia, CoreMedia). After choosing a system you will get HTML-snippets and a few new SCSS files, which you can use:

• Drupal 7
• TYPO3 6.2
• Magnolia
• CoreMedia

Alternative

• grunt-init-assemble
• generator-assemble

License

MIT License

TODO:

• CMS Snippets