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 ofbower
andnpm
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│ ├───js│ ├───scss│ │ ├───global│ │ ├───icons│ │ └───utils│ │ ├───extends│ │ └───mixins│ └───templates│ ├───data│ ├───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:
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
Release History
see: Changelog.md
TODO:
- Integrate Gulp as option