chewingum

Documentation generator for Pattern Library.

Follow @chewingumjs on twitter for news & updates.

Features

Template engine agnostic

As it is build upon node.js it uses multiple libraries to support various template engines to generate documentation. So far it supported template engines are:

1. twig
2. TODO moustache
3. TODO handlebars

Use API insted of Copy/Paste

This is not a module that generates hardcoded Lorem Ipsum styleguide. It is a module that generates reusable patterns from template taking .json demo data as a temporary input to test the pattern. It provides API to connect front end with the back end.

Button component: TODO

Usage: TODO

Customisable look

Every self-worthy company has their own style guides and design principles they base their designs upon. Chewingum allows you to completely change visual look of the generated documentation to fit your needs. Here are some of the themes and their demos we've created:

Github (Demo)	PatternLab (Demo)	Fractal (Demo)

Usage

Part I

enough to see Chewingum in action

// setting general settings
var src = './pattern-library/'
var dest = './documentation/'
 
// gulp modules
var gulp = require('gulp')
var chewingum = require('chewingum')
var browserSync = require('browser-sync').create()
 
// Pattern Library
// For each template file (e.g. breadcrumbs.twig) will build a documentation file.
gulp.task('chewingum', function () {
  chewingum({
    location: {
      src: src,
      dest: dest
    }
  })
})
 
// Server
// Will build server for patter-library
gulp.task('server', function () {
  browserSync.init({
    server: {
      baseDir: dest
    },
    port: 9999,
    open: false,
    notify: false
  })
})

Part II

add your way to pass style & JavaScript

// for STYLE
var sass = require('gulp-sass')
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')
 
// for JavaScript
var concat = require('gulp-concat')
 
// Style
// Will combine and minify all component styles
gulp.task('style', function (done) {
  return gulp.src('./sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(dest + '/assets/'))
    .pipe(browserSync.stream())
})
 
// JavaScript
// Will combine and minify all component JavaScript files.
gulp.task('javascript', function (done) {
  return gulp.src(src + '/**/*.js')
    .pipe(concat('components.js'))
    .pipe(gulp.dest(dest + '/assets/'))
})
 
 
 
// FOOTER
// WATCH
gulp.task('watch', function (done) {
  gulp.watch(src + '/**/*.twig', ['chewingum'])
})
// DEFAULT
gulp.task('default', ['chewingum', 'style', 'javascript', 'server', 'watch'])

Options

opts.location.src

Type: String Default: src/components/

Sets target for folder from which all the components will be taken.

opts.location.dest

Type: String Default: dest/components/

Sets target for Pattern Library output location.

opts.filterItems

Type: Array Default: []

Pass tabs that filter search results by regular expression. Example: [{'title': 'Atoms','regex': '01-atoms'}].

opts.location.styleguide

Type: String Default: node_modules/chewingum/doc-template/

Sets target for pattern library templates. It is possible to modify existing pattern library look by moving doc-template to local folder and modifying this URL.

Contribute

Help us make this project better - Contributing guide!