Quick Start

Tutorial:
The best way to learn it is just trying. Let's see the following steps to generate a style guide for CSS!

Install node-aigis

Install on NPM.

$ npm install --save-dev node-aigis

You can verify aigis by typing the following command:

$ ./node_modules/.bin/aigis -v
$ 1.0.0

Config file & HTML Templates

You need a configuration file and HTML template files in order to generate the style guide. However, you can execute init command and then you can use the default configuration file and HTML templates.

$ ./node_modules/.bin/aigis init
Created the following files and directories:
  aigis_config.yml
  aigis_assets
  template_ejs

Set template engine

You can choose one out of the three template engines by specifying the --engine option when you execute aigis init. To do this, the the following command:

Template Engine and value for this option

  • EJS（ejs）
  • Jade（jade）
  • Handlebars（hbs）

e.g. Choose Jade

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

Edit configuration file

The init command will generate aigis_config.yml. You can edit it and then you assign source file name for generating the style guide to source. For example, If you want to generate the style guide from style.css, type the following code: source: ./style.css.

How to specify source

source field can be specified file and directory name, either one is OK

source:
  - ./lib/css
  - ./style.css

CSS file path for default theme was assigned to source field in aigis_config.yml was generated by init command. If you don't edit source field and execute aigis, a style guide for this theme will be generated.

Add comment to CSS

Add some documentation to CSS was assigned to source field:

In CSS comment block (/* ~ */), add this comment for generating style guide.

---
name: base button
category: module/button
---

## This is base button

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

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

So, this documentation is really simple. If you want to know detail about documentation comment, please see next document.

Execute aigis

The following command runs aigis, generates style guide.

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

The following style guide is generated from documentn comment.

Sample

aigis will be looking for aigis_config.yml from the directory the command was executed.

Sample comment for style guide has been described in ./aigis_assets/css/theme.css was generated by init command. So, node-aigis has some examples. Please refer together with this page.

Even apart from this, See the Document for more details. Please give us your feedback on GitHub issues or Pull Requests.