generator-prototype

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: http://prototype-generator.com

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

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: assemble.io

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.

see: Changelog.md

  • Integrate Gulp as option