A standard for documenting and building your object-/module-oriented cascading stylesheets.

  • By Jonathan McAllister
  • Last update: Sep 26, 2022
  • Comments: 3

Styledoc

A standard for documenting and building your object-/module-oriented cascading stylesheets. The documentation syntax is based on JavaDoc and hopefully will allow the Styledoc parser to create a styleguide on-the-fly.

Now that's brown sugar for your Irish coffee right there.

Build by @joony and @laustdeleuran at @verticny.

To-do / known issues / wish list

  • Think up clever way to do sections and subsections, parse them accordingly and output them on "pages"
  • Test with more demanding modules, especially with nested markup
  • How do nested modules act?
  • Think of how the interface for developers should be. How do you use hte library? Is the OOP approach the right one - or is there no way you'd need more than one instance? And if so, why shouldn't it take over the entire page?
  • What about baseline styling? Restes, fonts, body/html backgrounds etc.? Do we toatlly disregard that?

Github

https://github.com/Joony/styledoc/

Comments(3)

  • 1

    Single quotes in values?

    Parser can process only double quotes " in CSS property values. Single quotes ' are also usable there, e.g.:

    font: 'Helvetica Neue', Helvetica, sans-serif;
    

    Please make support for single quotes in values.

  • 2

    A list of tags appliable?

    The documentations lacks of supported tags list.

    From simple-example.css I've got (some of) them:

    • @section
    • @pseudo
    • @modifier
    • @author
    • @version
    • @since
    • @markup

    Please document those and/or any more supported on project's page.

  • 3

    HTML code examples instead/beside presentation

    Nice tool for commenting CSS, especially for modifier classes (e.g. smaller)

    Is there any chance of outputting not only presentation, but also HTML code examples (when appliable)?

    For example:

    .primary Indicates the button is the primary action.

    <button class="primary">Default Button</button>
    

    (presentation goes here)