Documentation generator for Pattern Library.
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:
twig- TODO
moustache - TODO
handlebars
You can build pattern libraries
- fast (reuse template, demo data)
- documented (have demo right beside documentation)
- link it directly into your project
A component (e.g. lakeside.twig):
<article class="lakeside {{class}}">
{% if image %}
<aside class="lakeside__media">
<img src="image.src" alt="image.alt">
</aside>
{% endif %}
<div class="lakeside__body">
<div class="lakeside__content">
{% include 'partials/title/title.twig' with title %}
{% if summary %}<p class="lakeside__summary long-primer">{{ summary }}</p>{% endif %}
</div>
<div class="lakeside__meta">
{% include 'partials/lists/list-inline.twig' with listItems %}
</div>
</div>
<a href="#" class="lakeside__link" aria-hidden="true" tabindex="-1">{{ title.title }}</a>
</article>Usage (in news-feed.twig):
<div class="row">
{% for i in 0..2 %}
<div class="col-sm-4">
{% include 'partials/lakeside/lakeside.twig' with article %}
</div>
{% endfor %}
</div>Test data for demo generation (lakeside.json):
{
"image": {
"src": "http://placehold.it/800x600/",
"alt": "placeholder"
},
"title": "data@partials/title/title.json",
"listItems": "data@partials/lists/list-inline.json"
}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.
| Github-like (Demo) |
|---|
 |
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
})
})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'])Type: String Default: src/components/
Sets target for folder from which all the components will be taken.
Type: String Default: dest/components/
Sets target for Pattern Library output location.
Type: Array Default: []
Pass tabs that filter search results by regular expression. Example: [{'title': 'Atoms','regex': '01-atoms'}].
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.
Help us make this project better - Contributing guide!