Permalink
Browse files

Releasing

  • Loading branch information...
1 parent c375675 commit ae8123673fb9c804f76238c0bc43d3d84148165b @hughsk hughsk committed Feb 13, 2012
Showing with 7,220 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +8 −0 Makefile
  3. +92 −0 README.md
  4. +370 −0 bin/kss-node
  5. +61 −0 demo/elements/buttons.less
  6. +116 −0 demo/forms/base.less
  7. +213 −0 demo/styleguide.md
  8. +15 −0 demo/styles.less
  9. +12 −0 gh-pages.sh
  10. +256 −0 gh-pages/index.html
  11. +1 −0 gh-pages/public/kss.css
  12. +47 −0 gh-pages/public/kss.js
  13. +301 −0 gh-pages/public/kss.less
  14. +9 −0 gh-pages/public/less.js
  15. +1,477 −0 gh-pages/public/prettify.js
  16. +1 −0 gh-pages/public/style.css
  17. +139 −0 gh-pages/section-1.html
  18. +199 −0 gh-pages/section-2.html
  19. +1 −0 index.js
  20. +481 −0 lib/kss.js
  21. +59 −0 lib/kss_modifier.js
  22. +86 −0 lib/kss_section.js
  23. +66 −0 lib/kss_styleguide.js
  24. +105 −0 lib/template/index.html
  25. +47 −0 lib/template/public/kss.js
  26. +301 −0 lib/template/public/kss.less
  27. +9 −0 lib/template/public/less.js
  28. +1,477 −0 lib/template/public/prettify.js
  29. +50 −0 lib/walk.js
  30. +33 −0 package.json
  31. +84 −0 test/common.js
  32. 0 test/fixtures-styles/includes/buttons.js
  33. 0 test/fixtures-styles/includes/buttons.less
  34. +25 −0 test/fixtures-styles/options-markup.less
  35. +23 −0 test/fixtures-styles/options-typos.less
  36. +43 −0 test/fixtures-styles/section-queries.less
  37. +45 −0 test/fixtures-styles/sections-description.less
  38. +51 −0 test/fixtures-styles/sections-modifiers.less
  39. 0 test/fixtures-styles/sections-raw.less
  40. +55 −0 test/fixtures-styles/sections-status.less
  41. +32 −0 test/fixtures-styles/style.css
  42. +39 −0 test/fixtures-styles/style.less
  43. +454 −0 test/kss.js
  44. +64 −0 test/kss_modifier.js
  45. +120 −0 test/kss_section.js
  46. +152 −0 test/kss_styleguide.js
View
@@ -0,0 +1 @@
+/node_modules
View
@@ -0,0 +1,8 @@
+test:
+ mocha -u tdd --reporter spec
+
+gh-pages:
+ ./bin/kss-node demo gh-pages -l demo/styles.less
+
+.PHONY: test
+.PHONY: gh-pages
View
@@ -0,0 +1,92 @@
+# kss-node
+
+This is a NodeJS implementation of [Knyle Style Sheets](https://github.com/kneath/kss) (KSS), "a documentation syntax for CSS". Beyond that, it's intended to have syntax readable by humans *and* machines - hence, this module can be used to create a "living styleguide". The methodology and ideas behind Knyle Style Sheets are contained in [the specification](https://github.com/kneath/kss/blob/master/SPEC.md).
+
+There's an example project in the [demo directory](https://github.com/hughsk/kss-node/tree/master/demo) of this repo.
+
+## Installation
+
+Just one line: `npm install kss`. If you want to use the command line interface, make sure the installation is global: `npm install -g kss`
+
+## Using the CLI
+
+To get you up and running quickly, a styleguide generator is included that can be used from the command line. It parses a directory of stylesheets and spits out a set of static HTML files like the ones used on this site.
+
+ Usage:
+ kss-node sourcedir [destdir] --less [file] --css [file]
+
+ Options:
+ -l, --less Compile and include a LESS stylesheet [string]
+ -c, --css Compile and include a CSS stylesheet [string]
+ -t, --template Use a custom template to build your styleguide [string]
+
+You'll need to specify a directory containing all of your CSS files to be parsed for documentation as the first argument. Optionally, the second argument can be used to specify a target directory. Your CSS won't be included by default, hence you should use the `--less`, `--css`, etc. flags to point to a stylesheet to compile and include. You can generate a copy of the demo styleguide like so:
+
+ $ kss-node demo styleguide --less demo/styles.less
+
+You can create your own templates too, either by editing the contents of the `lib/template` directory or using the `--template` flag to point to your own.
+
+## Using kss-node from Node
+
+ var kss = require('kss'),
+ options = {
+ markdown: false
+ };
+
+ kss.traverse('public/stylesheets/', options, function(err, styleguide) {
+ if (err) { throw err; }
+
+ styleguide.section('2.1.1') // <KssSection>
+
+ styleguide.section('2.1.1').description() // A button suitable for giving stars to someone
+
+ styleguide.section('2.1.1').modifiers(0) // <KssModifier>
+
+ styleguide.section('2.1.1').modifiers(0).name // ':hover'
+
+ styleguide.section('2.1.1').modifiers(0).description // 'Subtle hover highlight'
+
+ styleguide.section('2.1.1').modifiers(':hover').description() // 'Subtle hover highlight'
+
+ styleguide.section('2.1.1').modifiers(0).className() // 'pseudo-class-hover'
+
+ styleguide.section('2.x.x') // [<KssSection>, ...]
+
+ styleguide.section('2.1.1').modifiers() // [<KssModifier>, ...]
+
+ });
+
+Check out the [Module API](https://github.com/hughsk/kss-node/wiki/Module-API) for more information.
+
+## Differences
+
+I've tried to avoid cluttering up the module with extra features, but have made a couple of optional additions to completely automate a few more things.
+
+Take a look at the [demo project](http://github.com/hughsk/kss-node/tree/master/demo) for some examples.
+
+* **Overview Document**. This "overview" page is generated from a Markdown file, which you should place in the directory you're generating from, just name it `styleguide.md` and it will be included in the final styleguide automatically.
+
+
+* **HTML Markup**. In `kss-node` you can include sample markup in your styleguide entries. This is not only helpful for newcomers to a project, but is also used by the generator to include samples in your styleguide - just start a paragraph in your description section with `Markup:` like so:
+
+```less
+// Buttons
+//
+// Buttons can and should be clicked.
+//
+// Markup: <button class="button {$modifiers}">
+//
+// :hover - Highlight the button when hovered.
+//
+// Styleguide 1.1
+```
+
+* **Multi-line descriptions**. You can run your descriptions over multiple lines and paragraphs, and if you don't want to include the "modifiers" section you don't have to.
+
+## Development
+
+Forking, hacking, tearing apart of this module welcome - it still needs some cleaning up.
+
+If you've got [mocha](https://github.com/visionmedia/mocha) installed, you can run the module's tests with `npm test` or `make test`.
+
+To generate a new version of the demo styleguide, use `make gh-pages`. After committing your changes to master you can use the `gh-pages.sh` script to move this over to the `gh-pages` branch real quick.
Oops, something went wrong.

0 comments on commit ae81236

Please sign in to comment.