Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful styleguide.
gem install hologram
Your documentation is written in your production CSS using a combination of YAML and Markdown. Markdown easily formats your docs and allows you to fall back to raw HTML for tricky parts of the styleguide.
Hologram makes this easy by extending Markdown code blocks that can be marked as examples. The block will then be rendered twice: Once as the actual HTML output and once again as HTML code.
Here is an example documentation block from Trulia's Experience Language which outputs buttons.
/*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
Hologram is open source under the MIT License.
Feel free to open any pull requests or issues (-: