Generate a styleguide from your CSS, by adding YAML data in the comments. It generates a self-contained html file. Works great for component based CSS.
Issues with output should be reported on the styleguide.js issue tracker
A gulp wrapper for styleguide.js by EightMedia
$ npm install gulp-styleguidejs --save-devvar gulp = require('gulp'),
styleguidejs = require('gulp-styleguidejs');
gulp.task('default', function() {
gulp.src('app.css')
.pipe(styleguidejs())
.pipe(gulp.dest('docs'));
});Type: string
Default: index.html
Type: object
Default: none
gulp-styleguidejs takes all styleguide.js options
Styleguide.js uses YAML to markup CSS files and generate styleguides.
From the styleguide.js documentation:
/***
title: Square buttons
section: Buttons
description: Very pretty square buttons
example: |
<a href="" class="btn btn-small">button</a>
<a href="" class="btn btn-medium">button</a>
<a href="" class="btn btn-large">button</a>
***/
.btn{
display: inline-block;
padding: .3em .6em;
color: white;
text-decoration: none;
text-transform: uppercase;
background-color: darkslateblue;
}
.btn:hover{
background-color: # 38306E;
}
.btn-small{
font-size: .8em;
}
.btn-medium{
font-size: 1em;
}
.btn-large{
font-size: 1.3em;
}Find out more about using styleguide.js by reading its documentation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent