Skip to content

Commit

Permalink
Update the demo homepage to link to the JS docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
JohnAlbin committed Apr 12, 2015
1 parent 820a5f3 commit a8db6cd
Showing 1 changed file with 42 additions and 5 deletions.
47 changes: 42 additions & 5 deletions demo/styleguide.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,53 @@
# Overview

This is a demo of [kss-node](https://github.com/kss-node/kss-node)'s built-in style guide generator.

This software is a Node.js implementation of [Knyle Style Sheets](https://github.com/kneath/kss) (KSS), "a documentation syntax for CSS" that's intended to have syntax readable by humans *and* machines. Hence, the kss-node software can be used to create a "living style guide".

1. Write human-readable documentation using "KSS syntax" comments.
1. Write human-readable documentation using "KSS syntax" comments. Can be added to CSS, Sass, LESS, or any other CSS Preprocessor files.
2. Have `kss-node` auto-generate a style guide from your stylesheets.

This site is generated with the `kss-node` command-line tool used on this [demo project](https://github.com/kss-node/kss-node/tree/master/demo).
Here's an example KSS comment:
```css
/*
Button
Your standard button suitable for clicking.
:hover - Highlights when hovering.
.shiny - Do not press this big, shiny, red button.
Style guide: components.button
*/
.button {
...
}
.button.shiny {
...
}
```

# kss-node demo

This site is generated with the `kss-node` command-line tool and parses the KSS documentation found in this [demo project](https://github.com/kss-node/kss-node/tree/master/demo).

Check out the [project on Github](https://github.com/kss-node/kss-node) for more information about the code, or read the spec for details on how to document your stylesheets for KSS.
The styling of this site is a demo of [kss-node](https://github.com/kss-node/kss-node)'s default style guide generator. By using the site navigation to the left (or above), you can see how your documentation would look with the default generator. Note that alternate generators are available.

# KSS Specification

Read the KSS spec for details on how to document your stylesheets.

Compared to the default Ruby implementation at kneath/kss, kss-node includes a few optional features to allow for completely automated style guide generation out of the box. The kss-node specifics are detailed in this annotated copy of the [KSS spec](https://github.com/kss-node/kss/blob/spec/SPEC.md).

# JavaScript API

If you don't wish to use the default style guide template, you can either:
* write your own template that uses the default kssHandlebarsGenerator style guide generator, or
* write your own style guide generator, or
* use the JavaScript object representation of the style guide, KssStyleguide

The JavaScript API documentation is available for many versions of kss-node:
* [kss-node master branch](./api/master/) (future 2.1.x version)
* ~~[kss-node v2.0.x](./api/2.0.x/)~~ Available soon.

# Project homepage

Check out the [project on Github](https://github.com/kss-node/kss-node) for more information about the code.

0 comments on commit a8db6cd

Please sign in to comment.