working with fabricator

WORKING WITH FABRICATOR BUILDER

A look at how Fabricator Builder is setup and an explanation of some of it's features.

Running and Building

Fabricator Builder can be run in your gulp task like so:

var fabricator = require('fabricator-builder');
var gulp       = require('gulp');
var gutil      = require('gulp-util');

gulp.task('default', function () {
    fabricator(require('./fabricatorConfig'), gutil.env.dev);
    
    // If dev option is on, Fabricator Builder will have browserSync setup!
    // So we can now add watchers, to re-run our own preparation tasks.
    if (gutil.env.dev) {
    
        gulp.watch('./test/assets/scripts/**/*.js', ['scripts:prepare']);
    }
});

The dev option

Fabricator Builder will run differently depending on this option (as second argument):

• When true, it will build, serve and watch for changes, so you can develop easily.
• When false or not used, it will create an optimized build of your toolkit.

Configuration

Fabricator Builder needs a configuration in order to work, so it knows about your files. The following parameters are expected:

• dest, the output directory for the optimized build.
• package, path to your package.json file.
  It's name and version will be used for the page titles.
• docs, glob to your doc files.
  markdown files with toolkit-wide documentation (e.g. usage guidelines, branding, tone).
• materials, glob to your materials.
  Individual pieces of UI. Each one is registered as a Handlebars partial for rapid prototyping.
• templates, glob to your remplates.
  Full pages composed of materials, shown on their own page.
• data, glob to your data yml and/or json files.
  Can be fed into materials and templates.
• samples, glob to your samples.
  Can be any mock resource you want to use in your templates as an example.
• analyze, glob to your scripts to analyze with jscs and jshint.
  Know that jscs can take a while to complete!
• jscsrc, path to your jscsrc file, to check code styling.
  If not provided, Fabricator Builder will use its own.
• jshintrc, path to your jshintrc file, to check code errors.
  If not provided, Fabricator Builder will use its own.
• useWebpack, if you want to use webpack for building your scripts.
• scripts, object defining the output toolkit scripts.
  Each key will result in a file composed of its glob value.
• fonts, glob to your fonts.
• icons, glob to your icons.
• images, glob to your images.
• styles, object defining the output toolkit styles.
  Each key will result in a file composed of its glob value.
• toolkitConfig, path to your toolkitConfig file.
  It's data will be available in your materials and templates to use.
  It's data will replace placeholders in your sass files: /* key */ >> key: value !default;.
• tslint, path to your tslint file, to check code styling of TypeScript files.
  If not provided, Fabricator Builder will use its own.
• typescript, if provided, a component library will be build, for easy consumption.
  • dest, the output directory for the built components.
  • comp, glob to the location of the TypeScript components.

Views

Fabricator Builder builds a toolkit with the following views, which are linked from the menu:

• Home, which lists the different script and styling files that came out of your toolkit. These are the ones defined in the configuration. It also have a short description about the toolkit.
• Docs, where all your documentation is being added.
• Atoms, one page with all your atoms.
• Molecules, one page with all your molecules.
• Organisms, one page with all your organisms.
• Templates, which lists all your templates with their description. The name is a link to the actual template page, which opens in a new tab.

Controls

You can toggle the visibility of notes and code snippets. The menu provides toggles for the whole page, while each material has its own buttons to toggle its notes and code snippet separately.