Scaffold modern frontend web apps with Assemble, Grunt, Sass and Bower. Use modern frameworks like Bourbon, Bootstrap, Foundation and structure the web app with Backbone and RequireJS.

Visit the PG-website to learn how to use PG:

Yeoman generator for Web Apps and Prototypes.

  • 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)
  • Install Yeoman: npm install -g yo

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

  • Update the Generator-Prototype via: npm update -g generator-prototype
yo prototype
  • -s alias --skip-install Skips the automatic execution of bower and npm after scaffolding has finished.

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
│   ├───configs
│   ├───templates
│   │   ├───grunticon-template
│   │   └───svg-sprites
│   └───_grunt
│   ├───ajax
│   ├───assets
│   │   ├───fonts
│   │   ├───img
│   │   │   ├───svg
│   │   │   │   └───icons
│   │   └───media
│   ├───bower-components
│   ├───js
│   ├───scss
│   │   ├───global
│   │   ├───icons
│   │   └───utils
│   │       ├───extends
│   │       └───mixins
│   └───templates
│       ├───data
│       ├───helpers
│       ├───layouts
│       ├───pages
│       └───partials

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

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:

  • 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.

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:

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

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

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

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")

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!

You can scaffold your project with our PG Methodology.

Furthermore you can add different bower components we provide:

We integrated some sub generators for you:

You forgot a grunt module?

  • Install further grunt modules: yo prototype:grunt

You want to install assemble helpers?

  • Here you go: yo prototype:assemble
  • Create a Backbone Model: yo prototype:bm
  • Create a Backbone View: yo prototype:bv
  • Create a Backbone Collection: yo prototype:bc

Others will follow.

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.


  • Integrate Gulp as option