generator-robonkey

A Yeoman generator for Gulp, Templating, CSS Preprocessors, CoffeeScript, PostCSS, Modernizr, Icon Font Generator, BrowserSync, and some libraries to choose from. Express, Wordpress, Drupal, CodeIgniter and Laravel subgenerators are available.

This generator is a work in progress.
There probably will be some bugs and missing features.
Likewise, this documentation isn't finished yet either.

Getting Started

Install yo

$ npm install -g yo

Install Robonkey

$ npm install -g generator-robonkey

Then you can start building your app with Robonkey:

$ mkdir yourapp
$ cd yourapp
$ yo robonkey

Gulp

This generator uses Gulp (CoffeeScript Gulp is optional). You have the option to install Gulp at root level, or a subfolder.

Root stucture

.yo-rc.json
bower.json
package.json
gulpfile.js
- gulp-tasks
- node_modules
- src
  - bower_components
  - preprocessors
  - js
  - …
- app
  - index.html

Clean stucture

.yo-rc.json
-gulp
  bower.json
  package.json
  gulpfile.js
  - gulp-tasks
  - node_modules
- src
  - bower_components
  - preprocessors
  - js
  - …
- app
  - index.html

Generators

Main generator

The main generator calls the static subgenerator

$ yo robonkey

robonkey:static generator

The static generator installs a static website project

Choices include

• Templating (Jade/Pug, Nunjucks)

The static generator calls the styles-, js- and icons subgenerators

$ yo robonkey:static

robonkey:styles generator

Choices include

• Preprocessing (Scss, Stylus, Less)
• Postprocessing (postcss)

$ yo robonkey:styles

robonkey:js generator

Choices include

• Optional CoffeeScript
• A handfull of js libraries to choose from

$ yo robonkey:js

robonkey:icons

Choices include

• SVG Spritesheet
  • Spritesheet Name
• Icon font
  • Preprocessors
  • Font Name

$ yo robonkey:icons

robonkey:[framework] generators

Installs a framework. $ yo robonkey should be run aftwerwards.

$ yo robonkey:express
$ yo robonkey:wordpress
$ yo robonkey:drupal
$ yo robonkey:codeigniter
$ yo robonkey:laravel

Modernizr

Modernizr gulp plugin is used for the creation of custom Modernizr tests.

When initialized, the plugin will crawl your .scss and .js files for Modernizr references (ie: .no-svg) and builds the modernizr-custom.js file.

Modernizr website
Gulp Modernizr

Settings

In config.json you can set the modernizr options.

"modernizr": {
  "excludeTests": [],
  "tests": [],
  "output": "modernizr-custom.js",
  "options": [ "setClasses", "addTest", "html5printshiv", "testProp", "fnBind" ]
}

More info on the settings is available on the gulp-modernizr page.

Build

To build a custom modernizr file, just run:

$ gulp modernizr

The build task will also create a custom modernizr file, next to a custom icon font and minified styles and script.

$ gulp build

Output

The output file will be:

website/assets/js/libs/modernizr-custom.js

SVG spritesheet

Uses gulp-svgstore
Combine svg files into one with elements. Read more about this in CSS Tricks article.

Settings

More on configuring on the gulp-svgstore page

Build

Drop your svg files in:

src/icons/<spritesheet name>/

Run

$ gulp svg

The build task will also run the svg task

$ gulp build
 

Output

The output file will be:

website/assets/img/svg

Custom Icon Font

The custom icon font generator uses svg images from a folder to build the font. Then it generates a .scss file with @font-face declaration, .icn and .icn--name classes.

Gulp Iconfont
Gulp Iconfont css

Settings

The fontname is set in the options when you use Robonkey. (Default: robonkey-glyphs)

In config.json you can set the icon font options.

"iconFont": {
  "name": "fontname",
  "types": ["ttf", "eot", "woff", "woff2", "svg"]
}

More info on the settings is available on the gulp-icon page.

Build

Prepare:

An Illustrator file is provided with examples. (src/iconfont/illustrator/icn.ai)

Things to consider when preparing svg for icon fonts:

• Minimum size 500px * 500px
• Each stroke must be converted to fills
• Fills must be combined creating compound paths if necessary (no overlapping shapes)
• Any color will be ignored: glyphs will always be interpreted as black. You also can’t use white for backgrounds: you can have only transparent ones
• Any embedded image in your SVG will be ignored
• The svg filename will be used as class name for the icon (.icn--svg-file-name)

Location:

Drop your svg files (minimum 500px * 500px) in:

src/iconfont/svg/

Run:

$ gulp iconfont

Output Files

The font will be placed in:

website/assets/fonts/<your font name>

The scss/styl/less files will be placed in:

SCSS

src/scss/base/fonts/_font-icn.scss
src/scss/modules/_icons.scss

Stylus

src/scss/base/fonts/font-styl
src/stylus/modules/icons.styl

Less

src/scss/base/fonts/font-icn.less
src/less/modules/icons.less

To Do

• Priority:
  • Testing
  • Update docs