0.2.0 • Published 11 years ago
ganam v0.2.0
Ganam Style
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
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;
}
Library
ganam
Parse code and get the sections:
var ganam = require('ganam');
var sections = ganam(code);
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
Ganam style a directory:
var ganam = require('ganam');
ganam.style('./foo.styl', function(styleguide) {
});
A styleguide is something like:
{
"order": 1,
"filepath": "./foo.styl",
"css": "button.classy {.....}",
"sections": [....]
}
styleSync
Ganam style a directory synchronously:
var ganam = require('ganam');
var styleguide = ganam.styleSync('./bar.styl');
Nico
We have a live example for you: styleguide. The code is of this styleguide is located at: ganam/docs/guide. This styleguide is built with nico.
Find more information about nico and get nico with:
$ npm install nico -g
Have a look at the config file nico.json of this project, and learn how to use it. BTW, you must have ganam
installed to active GanamWriter
.