Skip to content
Yes, it's Ganam Style - a ganam style guide parser. Inspired by kneath's kss.
JavaScript Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example
lib
scripts
tests
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE
Makefile
README.md
index.js
package.json

README.md

Ganam Style

building status Coverage Status

Ganam style is a style guide render, inspired by kneath/kss. It is written in nodejs, helps web developers to write a style guide.

Installation

It's easy to install ganam with npm:

$ npm install ganam

IF YOU ARE NOT A DEVELOPER, YOU MAY NEED ganam-cli INSTEAD:

$ npm install ganam-cli -g

FIND MORE DOCUMENTATION AT http://lab.lepture.com/ganam-cli/.

Syntax

Writing a style (stylus, css) that ganam can parse. A basic overview:

/*
1.1 Classy Buttons

Classy buttons is clickable form action buttons,
it is widely usage in forms.

:hover - button when hovered
:disabled - button when disabled
.disabled - the same as :disabled

Examples:

    <button class="classy {{modifier}}">Button</button
    <a class="button-classy {{modifier}}">Button</a>
*/

button.classy,
a.button-classy {
  color: #d64;
}
button.classy:hover {
  color: #000;
}

Find more information in the example guide.

Library

ganam

Parse code and get the sections:

var ganam = require('ganam');
var data = ganam(code);
// {header: '...', sections: '...'}

Header is the comments before any sections.

Sections is a list of section, a section contains:

{
    "name": "1.1",
    "title": "Classy Buttons"
    "description": "Classy buttons is clickable form action buttons,\nit is widely usage in forms.",
    "modifiers": [
        {"name": ":hover", "description": "button when hovered"},
        {"name": ":disabled", "description": "button when disabled"},
        {"name": ".disabled", "description": "the same as :disabled"}
    ],
    "html": "<button class='classy {{modifier}}'>Button</button\n<a class='button-classy {{modifier}}'>Button</a>",
    "examples": [
        {"name": "", "code": "<button class='classy '>Button</button>......"},
        {"name": ":hover", "code": "<button class='classy pseudo-class-hover'>Button</button>......"},
        {"name": ":disabled", "code": "<button class='classy pseudo-class-disabled'>Button</button>......"},
        ...
    ]
}

style(filepath [, options], callback)

Ganam style a file:

var ganam = require('ganam');
ganam.style('./foo.styl', function(styleguide) {
});

A styleguide is something like:

{
    "order": 1,
    "filepath": "./foo.styl",
    "css": "button.classy {.....}",
    "sections": [....]
}

You can pass options for stylus.

styleSync(filepath [, options])

Ganam style a file synchronously:

var ganam = require('ganam');
var styleguide = ganam.styleSync('./bar.styl');

Ganam CLI

Get the command line tools with:

$ npm install ganam-cli -g

Watch it: https://github.com/lepture/ganam-cli

Changelog

Jun 6, 2013 0.2.0

  1. Parse header from comments. #3

Jun 6, 2013 0.1.3

  1. export version on API

Apr 15, 2013 0.1.2

  1. Support parse example from a file
  2. Section name can be x.y.z format

Jan 10, 2013 0.1.1

  1. modifier support .class:pseudo

Jan 8, 2013 0.1.0

First release.

Something went wrong with that request. Please try again.