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.
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
This generator uses Gulp (CoffeeScript Gulp is optional). You have the option to install Gulp at root level, or a subfolder.
.yo-rc.json
bower.json
package.json
gulpfile.js
- gulp-tasks
- node_modules
- src
- bower_components
- preprocessors
- js
- …
- app
- index.html
.yo-rc.json
-gulp
bower.json
package.json
gulpfile.js
- gulp-tasks
- node_modules
- src
- bower_components
- preprocessors
- js
- …
- app
- index.html
The main generator calls the static subgenerator
$ yo robonkey
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
Choices include
- Preprocessing (Scss, Stylus, Less)
- Postprocessing (postcss)
$ yo robonkey:styles
Choices include
- Optional CoffeeScript
- A handfull of js libraries to choose from
$ yo robonkey:js
Choices include
- SVG Spritesheet
- Spritesheet Name
- Icon font
- Preprocessors
- Font Name
$ yo robonkey:icons
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 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
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.
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
The output file will be:
website/assets/js/libs/modernizr-custom.js
Uses gulp-svgstore
Combine svg files into one with elements.
Read more about this in CSS Tricks article.
More on configuring on the gulp-svgstore page
Drop your svg files in:
src/icons/<spritesheet name>/
Run
$ gulp svg
The build task will also run the svg task
$ gulp build
The output file will be:
website/assets/img/svg
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
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.
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)
Drop your svg files (minimum 500px * 500px) in:
src/iconfont/svg/
$ gulp iconfont
The font will be placed in:
website/assets/fonts/<your font name>
The scss/styl/less files will be placed in:
src/scss/base/fonts/_font-icn.scss
src/scss/modules/_icons.scss
src/scss/base/fonts/font-styl
src/stylus/modules/icons.styl
src/scss/base/fonts/font-icn.less
src/less/modules/icons.less
- Priority:
- Testing
- Update docs