hologram

Easily build and maintain beautiful style guides.

Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful style guide.

Screenshot of Trulia OOCSS Library

Why would I use it?

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.

How does it work?

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>
```

*/ 
Trulia badges example

Where can I get it?

Hologram is a ruby gem, just install it using
gem install hologram or add it to your project's Gemfile
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 GitHub
Feel free to open any pull requests or issues (-:

Fork on Github