generator-prototype

Visit the PG-website to learn how to use PG: http://prototype-generator.com

Yeoman generator for Web Apps and Prototypes.

Getting started

Requirements

• Node.js & Node Package Manager
• Grunt Command Line Interface – npm install -g grunt-cli

Optional Use of Ruby (SASS & Compass)

• SASS 3.4 and Compass 1 (because of Source Maps)

Installation

• Install Yeoman: npm install -g yo

• Install the Generator-Prototype via: npm install -g generator-prototype

Update

• Update the Generator-Prototype via: npm update -g generator-prototype

Usage

Scaffold your new prototype project.

yo prototype

Options

• -s alias --skip-install Skips the automatic execution of bower and npm after scaffolding has finished.

Quick Start

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

"Choose your installation routine"

If you choose Minimal installation you skip the rest of the questions and get the default values with:

• Libsass (grunt-sass)
• Grunt modules: grunt-grunticon, grunt-data-separator
• Assemble as template engine

Structure

├───helpers
│   ├───configs
│   ├───templates
│   │   ├───grunticon-template
│   │   └───svg-sprites
│   └───_grunt
├───resources
│   ├───ajax
│   ├───assets
│   │   ├───fonts
│   │   ├───img
│   │   │   ├───svg
│   │   │   │   └───icons
│   │   └───media
│   ├───bower-components
│   ├───data
│   ├───js
│   ├───scss
│   │   ├───global
│   │   ├───icons
│   │   └───utils
│   │       ├───extends
│   │       └───mixins
│   └───templates
│       ├───helpers
│       ├───layouts
│       ├───pages
│       └───partials
├───_dist
└───_output

Gruntfile

For our Gruntfile we use the grunt module load-grunt-configs to split up the file in multiple task files. You can find these task files in the following directory:

• helpers/_grunt

Plugins and Modules

There are standard grunt modules I use. These are:

• grunt-contrib-clean - Clean your directories.
• grunt-concurrent - Run grunt tasks concurrently .
• grunt-contrib-cssmin - Minify your CSS.
• grunt-htmlhint - Check your html for errors.
• grunt-contrib-jshint - Check your js for errors.
• grunt-jsbeautifier - Format your js and html files.
• grunt-combine-mq - When you use mixins for media queries in your SASS files, you can combine your media queries with this module
• jit-grunt - A JIT(Just In Time) plugin loader for Grunt.
• time-grunt - Displays the execution time of grunt tasks.

Optional Grunt modules

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

• grunt-autoprefixer - Autoprefixer parses CSS and adds vendor-prefixed CSS properties using the Can I Use database.
• grunt-bless - Split your css after you reach size limit for ie9
• grunt-browser-sync - Sync and auto-reload your local server over multiple devices
• grunt-connect-proxy - a preconfigured proxy for developing clientside API interfaces in your prototype, with CORS, Basic Authentication support and http methods
• grunt-contrib-compass - Come on, use Node-SASS ...
• grunt-contrib-htmlmin - Minify your HTML files.
• grunt-contrib-requirejs - Optimize RequireJS projects using r.js.
• grunt-contrib-uglify - Minify files with UglifyJS.
• grunt-csscomb - The grunt plugin for sorting CSS properties in specific order.
• grunt-dr-svg-sprites - Generate SVG Sprites with scss files. We provide a custom template to generate mixins and extends.
• grunt-grunticon - Generate SVG-URI-SASS files with png fallbacks
• grunt-image-size-export - Pass a folder of images to this module and get infos like width, height, filename, path and breakpoints.
• grunt-jsdoc - This plugin enables you to integrate the generation of comments based documentation into your Grunt build.
• grunt-modernizr - grunt-modernizr sifts through your project files, gathers up your references to Modernizr tests and outputs a lean, mean Modernizr machine.
• grunt-packager (only executable when your project.jspackcfg is configured) - package your js.
• grunt-phantomas - PhantomJS-based web performance metrics collector and monitoring tool.
• grunt-photobox - Take snapshots from homepage
• grunt-postcss-separator - Split up your Data-URI or anything else into a separate CSS file.
• grunt-responsive-images - Produces images at different sizes (be sure you have installed GraphicsMagick)
• grunt-sass - You want to use Libsass instead of Compass to render your stylesheets 10 times faster? Here you go! (see Features)
• grunt-svgmin - Minify SVG using SVGO.
• grunt-version - Grunt task to handle versioning of a project.

Assemble

We use Assemble as template engine. Assemble is a component and static site generator that makes it dead simple to build modular sites, documentation and components from reusable templates and data. You want to know more? Here you go: assemble.io

In your installation routine you can choose specific modules for Assemble:

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

Custom Helpers

We provide some custom helpers to speed up your Assemble workflow. These helpers provide:

• repeating elements
• limiting JSON output
• partials with multiple contexts
• factories for grid systems
• and a few more ...

You want to know more? See PG Custom Helpers

Features

PG supports different features. Just check/uncheck them in the custom installation routine:

• You want to use Libsass instead of Ruby to compile SASS files? - Check!
• You want to use Extended Layouts in Assemble? - Check!
• You want to add a separate distribution folder? - Check!
• You want to add a CSS Styleguide and Assemble Development Documentation? - Check! (See "Developer Documentation")

JS Libraries and CSS Frameworks

You can choose JS Libraries like:

• jQuery
• BackboneJS
• RequireJS

And you can also choose SCSS Frameworks like:

• Foundation
• Bourbon and Bourbon Neat
• SASS Bootstrap

All files will be included and configured. Have fun!

PG Methodology

You can scaffold your project with our PG Methodology.

Furthermore you can add different bower components we provide:

• pg-scss
• pg-js
• pg-components

Sub Generators

We integrated some sub generators for you:

Grunt Modules:

You forgot a grunt module?

• Install further grunt modules: yo prototype:grunt

Assemble Helpers:

You want to install assemble helpers?

• Here you go: yo prototype:assemble

BackboneJS:

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

Others will follow.

Developer Documentation

PG provides a way to document your assemble modules via markdown and a separate docs folder. Just use the custom installation route and check Create Developer Documentation.

Alternative

• generator-assemble

Release History

see: Changelog.md

TODO:

• Integrate Gulp as option

Changelog

v0.5.6

• updated bower dependencies
• integrated new grunt modules (grunt-postcss-separator, grunt-image-size-export)
• changed build task
• updated pictures task to support grunt-image-size-export
• deleted styleguide templates
• updated htmlhint