What is aigis?

Aigis is a Node.js package that parses comments in your CSS and auto-generate a style guide. It is similar to Hologram, like a Node.js implementation of Hologram.

Why did we create aigis?

We didn't want the dependence on Ruby environment only to generate a style guide. Fewer dependencies are better. So we wanted a more casual-to-use style guide generator.

How does it work?

Here is an example documentation block in CSS. Markdown code blocks that will be rendered actual HTML output in order to show how the example was coded.

/*
---
name: Buttons
category:
  - mod/btn
  - base
tag:
  - latest
  - base
---

Button styles.

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

```html
<a class="ag-btn">Button</a>
<button class="ag-btn ag-btn--primary">Button</button>
```
*/

Template and Theme

You can choose template engine from the following list for generating style guide.

• EJS
• Jade
• Handlebars

We provide style guide examples for easy to start. - pxgrid/aigis:examples and look Quick start guide

Supported File Types

It doesn't matter. Aigis can generate style guide from any files.

Extra Markdown syntax

Aigis can import HTML Files on Markdown.

- btn.html

<a class="ag-btn">Button</a>
<button class="ag-btn ag-btn--primary">Button</button>

- btn.css

/*
...
Button styles.

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

!![Path to HTML file](./btn.html)
*/

You can get same result as above exmaple.

Feedback

Please give us your feedback on GitHub issues or pull requests.

More Details

See the Documents