Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful style guide.
Hologram was written to make building a style guide as easy as maintaining your CSS. It is similar to Kneath Style Sheets and Styledocco
Your documentation is written right in your CSS files using a combination of YAML and Markdown. By using Markdown, you can easily format your docs however you wish and fall back to raw HTML for those tricky parts every style guide has.
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 as the HTML in order to show how the example was coded.
Here is an example documentation block from Trulia's CSS library as well as the corresponding output.
/*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 a ruby gem, just install it using
gem install hologram or add it to your project's
For usage instructions checkout out the
Github repository's README file
You can also check out the example project on github to get an idea for the type of style guides you can build.
Finally, Hologram is open source (licensed under the MIT
License) and can be found on
Feel free to open any pull requests or issues (-:
Fork on Github