kneath / kss

A methodology for documenting CSS and generating styleguides.
warpspire.com/kss
MIT License
4.04k stars 275 forks source link

Extended to parse different types of data #88

Closed andrewjtait closed 7 years ago

andrewjtait commented 10 years ago

Added methods to parse comments for type definitions and examples of typical usage.

Example: A user can define a mixin:

/*
@mixin

A mixin to apply border-radius.

Usage:
@include border-radius(5px);
@include border-radius(2px 4px 2px 4px);

Styleguide Mixins.BorderRadius.
*/
@mixin border-radius($args...) {
  ...
}

Or an extendable class:

/*
@extend

Makes elements look like buttons.

Usage:
@extend %button;

Styleguide Extends.Button.
*/
%button {
  ...
}

This will allow users to render lists of available mixins, extendable classes, variables etc - as well as use the examples listed in usage to generate visual examples of these.


If theres any recommendations/things I've missed - just leave a comment or feel free to contribute :grinning:

kneath commented 10 years ago

I definitely like where this is going :zap: — have you used it in an existing style guide yet?

kasperisager commented 10 years ago

This looks like it could be a really awesome addition to KSS - kudos for sure! :+1:

andrewjtait commented 10 years ago

I'm currently using it in a private repo, however I have setup a basic demo you can see here: https://github.com/andrewjtait/kss-mixin-example

Problems I have found so far include generating and importing any Sass from sample usage - I get around this by using a rake task which compiles the required files. Auto-generating HTML examples for mixins works fine, but for things like an extendable class or a variable might require a particular HTML structure, so it requires a more manual approach when putting the styleguide together for those sections.

The result I want from this is to make it really simple, if for example a new mixin or a new colour variable is added to the library, then KSS will automatically document and show it as an demo.