aigis

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. Less dependencies is 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>
```
*/

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.

Supported Preprocessors/File Types

• CSS (.css)
• Sass (.scss, .sass)
• Stylus (.styl)

Template and theme

Also we provide Styleguide template for easy to start.

- pxgrid/aigis-theme

Feedback

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