PostCSS plugin to generate a style guide automatically.
CSS comments will be parsed through Markdown and displayed in a generated HTML document.
$ npm install postcss-style-guide
Node.js:
var fs = require('fs');
var postcss = require('postcss');
var styleGuide = require('postcss-style-guide');
var input = fs.readFileSync('input.css', 'utf-8');
var processed = fs.readFileSync('output.css', 'utf-8');
var options = {
name: "Project name",
processedCSS: processedCSS
};
var output = postcss()
.use(styleGuide(processed))
.process(input)
.css;
in Gulp:
var gulp = require('gulp');
gulp.task('default', function () {
var postcss = require('gulp-postcss');
var processedCSS = fs.readFileSync('output.css', 'utf-8');
return gulp.src('src/*.css')
.pipe(postcss([
require('postcss-style-guide')({
name: "Project name",
processedCSS: processedCSS
})
]))
.pipe(gulp.dest('build/'));
});
postcss-style-guide generate style guide from CSS comments that have special annotation(@styleguide
).
Using this input.css
:
/*
@styleguide
# I love Twitter Bootstrap
Use the button classes on an `<a>`, `<button>`, `<input>` element.
<button class="btn">Button</button>
<button class="btn">Button</button>
*/
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333;
text-decoration: none;
}
You will get styleguide.html
for the style guide.
Default template design is inspired by http://codeguide.co/.
options.theme
: Theme nameoptions.name
: Project nameoptions.file
: Style guide file name (default:styleguide.html
)options.dir
: Output directory (default: "docs")options.showCode
: The flag to show CSS code (default:true
)
You can select a theme of style guide with options.theme
.
And you can also create original themes.
When you create themes, please read theme guideline
All of postcss-style-guide themes that can be used are here.
The MIT License (MIT)
Copyright (c) 2015 Masaaki Morishita