Skip to content
CSS Styleguide Generator
Branch: master
Clone or download
Latest commit 260547c Sep 21, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Merge pull request #106 from cxq/render-sidemenu-json Mar 1, 2017
test/renderer/helper add a sample test Dec 10, 2016
.editorconfig エンコーディングの指定追記 May 25, 2015
.gitignore update examples Mar 23, 2016
.jshintrc add jshintrc Mar 22, 2015 Update Feb 9, 2017 Update Sep 21, 2017
gulpfile.js use old syntax Jan 24, 2017
index.js rename lib2 to lib Feb 22, 2016
package.json bump aigis-marked Sep 17, 2017

⚠️ This project is no longer maintained. ⚠️

However you can use aigis to generate styleguide.


Aigis is a Node.js package that parses comments in your CSS and auto-generate a style guide.

See the Full-documents (This documents was generated by aigis. 🔗source


$ npm install --save-dev node-aigis

You can verify node-aigis was installed correctly by running:

$ ./node_modules/.bin/aigis -v
$ 1.x.x

Config file & HTML Templates

aigis require "Config file" & "HTML Templates".

aigis init

This will create an aigis_config.yml file (more on this below)

$ ./node_modules/.bin/aigis init
Created the following files and directories:

Choose Template Engine

You can choose The following Template engines for generating style guide.

  • EJS(ejs
  • Jade(jade
  • Handlebars(hbs

When you run aigis init, add --engine option.

e.g) choose jade

$ ./node_modules/.bin/aigis init --engine jade

Config file

After aigis init, edit aigis_config.yml. You have to write relative path to your source files on source.

  - ./lib/css
  - ./style.css

Initially, the configuration file contains source: aigis_assets, You can run aigis run then generate sample style guide.

Adding comments

Write following code on CSS comment block (/* ~ */)

It's easy to add Comments. For example.

name: base button
category: module/button

## This is base button

* Base button style.
* Use `a` or `button` tag.

<a class="btn">Button</a>

Running aigis

You're finally ready to generate a style guide!

$ ./node_modules/.bin/aigis run -c ./aigis_config.yml

Then you get following output.



See the documents

You can’t perform that action at this time.