Include stylesheet source code into styleguide about kss-node HOT 12 OPEN

My way with custom field and twig extend (I have a handlebars version too):

• Comment block : https://github.com/20minutes/colette/blob/master/assets/styl/_settings.styl#L72-L164
• Twig extend: https://github.com/20minutes/colette/blob/master/kss-builder/extend/kssColors.js
• Kss twig for presentation: https://github.com/20minutes/colette/blob/master/kss-builder/index.twig#L86-L101

Result: http://20minutes.github.io/colette/section-settings.html#kssref-settings-colors

You can style it.

But stay duplicate date (code vs comment).
The main raison is, KSS do not parse the code to keep support for every languages (css/less/sass/scss/stylus). Parse code could be complexe.

from kss-node.

I would mainly find this interesting to document the color scheme for the theme I'm working on and have a visual representation of the colors. Is the only possibility to create classes for that color (that just use that variable) and use those classes as modifiers?

from kss-node.

Not sure if this is exactly what you're looking for, but all kss comments are parsed via markdown (specifically GitHub Flavored Markdown by default), so it's possible to include a code block for any other code that you would like to display. I use this to add some documentation around how to use some javascript that goes along with one of the components I'm documenting (i.e. how a custom dropdown looks and how to hook up the javascript to get it to function).

As far as I've seen, there is no ability to include all of your source code around specific comments like styledocco does (Doesn't seem to really fit the kss style of documentation).

from kss-node.

ok, your point makes sense. May be including something like source map could be a good feature to fit the kss style? Just to know wich line is responsible for what i see in a styleguide. But may be i just need to structure my code better and this problem will go away

from kss-node.

Actually, I was thinking about a feature like this in order to properly document Sass variables. Something like:

// Sass color variables
//
// code block:
$my-var: 'foo';
$my-var2: 'bar';
// etc.
$my-var3: 'baz';
// end code block
//
// Styleguide 1.2

FYI, the "end code block" (or similar) would be required to make it possible to include comments within the code block. It would also make parsing drop dead simple.

Not sure if breaking a KSS doc block in half with code block section would work, but its something to investigate.

from kss-node.

For colors and base HTML elements (and e.g. icons), there should be an example, without markup, similar to how bootstrap does it IMO.
So for colors, showing the variable is fine, but the only way i see to show an example is with custom css classes made for this and a markup section.

from kss-node.

Can you provide a screenshot or link to explain your "similar to how bootstrap does it" example?

from kss-node.

For icons: http://getbootstrap.com/components/
For typography (very basically): http://getbootstrap.com/css/#type

The base elements such as headings and paragraphs do interfere with the template look-and-feel though, but that's another problem :)

I'll provide some of my snippets on how I've solved it now later today normally.

from kss-node.

It would be great with features like:
font.less:

// Font color
// .font-strong - for bigger contrast
// Markup:
// <span class="{$modifiers}">testing text</span> has less variable {$variable}
// Styleguide 1.1
.font-strong {
  color:@text-color-black
}

renders to:

Font color
.font-strong for bigger contrast
<span class="font-strong">testing text</span> has less variable @text-color-black

from kss-node.

Github's styleguide has something similar to that what is being requested in this issue: http://primercss.io/colors/

But, unfortunately, theirs doesn't seem to be automatically generated either: https://raw.githubusercontent.com/primer/primer/master/docs/colors.md

from kss-node.

I'm just going to add this as a reference for others looking into this,

The project sc5-styleguides, which uses kss-node as a dependency achieves this.

They use gonzales-pe in combination with gonzales-ast to parse sass sourse.

Their source is here

• info via comment by @varya

from kss-node.

This is my work-around for a color list, it's far from perfect, and I have to maintain 2 lists, but it works.

// Colors
//
// #97007A - : Magenta
// #424344 - : Grey
// #28292A - : Dark grey
//
// Markup: <div style="background: {{modifier_class}};" class="styleguide-color">{{modifier_class}}</div>
//
// Styleguide 1

$color--magenta: #97007A;
$color--grey: #424344;
$color--grey-dark: #28292A;

from kss-node.