Skip to content
CSS Styleguide Generator
JavaScript
Branch: master
Clone or download
Latest commit 260547c Sep 21, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
examples
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
CONTRIBUTORS.md Update CONTRIBUTORS.md Feb 9, 2017
README.md Update README.md 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

README.md

⚠️ This project is no longer maintained. ⚠️

However you can use aigis to generate styleguide.

aigis

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

See the Full-documents aigis-styleguide.github.io/aigis/docs/ (This documents was generated by aigis. 🔗source

Installation

$ 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:
  aigis_config.yml
  aigis_assets
  template_ejs

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.

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.

```html
<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.

sample

More

See the documents

You can’t perform that action at this time.