A step-by-step guide on setting up KSS documentation for your project #12

rstacruz opened this Issue Dec 7, 2011 · 15 comments

A guide to set up KSS-powered style guide documentation in a {Rails,Sinatra,plain HTML} project would be nice.


Agreed! I would love to see this as well!


Definitely. I'd love more explanations all over. Hopefully I'll have time in the next weekish to put together a website that focuses on the spec + getting started.


I'd absolutely love this! I'm not a back-end programmer really, so something to walk me through would be great. I only really do HTML/CSS/JS and very rarely dabble in PHP.


I eco this suggestion. I'm very excited of being able to auto document SASS with this gem, but haven't been able to get started as the instructions are not clear on how to install and use.



Can't wait to see some explanations, then start using.


Anyone willing to do a quick and dirty explanation on how to get this up and going at least? Would love this.


Agreed. I would love to use this but I can't seem to figure out how to get started with it.


I was able to get a node.js port of this to work, here: https://github.com/jesseditson/jss


A step-by-step guide would certainly help, what i'm unsure of at the moment is if KSS generates everything from the SASS/CSS comments itself or do we have to create example markup for the styleguide?

I'm guessing its the latter from running the example app, which wasn't exactly what I was expecting.


@Phunky Agreed, second this request. I thought the styleguide was actually generated completely. I don't really see any reason that it can't be.


Any chance of this happening now that 0.4.0 is out?


I'd still like to make it much better. If someone feels like taking a stab at it on the gh-pages branch http://warpspire.com/kss that'd be rad. I have this right now, but I got kind of frustrated at how ruby-dependent it is right now (lack of a binary tool) when I tried to explain it.


+1 to getting this going.

I don't know squat about ruby. I can't even get the example app running on my local machine. It tells me Sinatra doesn't know this ditty.

Currently it sounds like we need to manually create additional views/code to render the style guide, along with the properly formatted less/css comments, is that right? It might be cool if we could have the parser/styleguide generator just grab existing views that correspond to css modules so we don't have to repeat ourselves (unless I don't understand how kss works, which I probably don't).

Thank you for starting this project however. I'm excited to see where this goes.


For those who still haven't got it running, this helped me: http://mikefowler.me/2013/10/14/static-styleguides-kss-node/ (If you're also new to Grunt, check out http://24ways.org/2013/grunt-is-not-weird-and-hard/ to get that set up)

Is there any word on what's happening with automatic markup generation? Right now I specify the markup in styleguide.md. Maybe I'm just not configuring this correctly?

This is what my Gruntfile.js looks like:

// Autogenerating styleguide
styleguide: {
    options: {
        framework: {
            name: 'kss'
    all: {
        files: [{
            'docs/css': 'css/app.less'


How can I improve this workflow?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment