Awesome

LivingStyleGuide for Broccoli

Easily create living style guides/front-end style guides/pattern libraries by adding Markdown documentation to your Sass project. Follow @LSGorg for updates.

preview

On the left: http://www.homify.de/assets/styleguide.html
On the right: http://livingstyleguide.com/eurucamp/

Warning: this is in early alpha. I’m neither a NPM nor a Broccoli expert. Let me know if you have suggestions to improve via Twitter or open an issue.

Usage

1. Setup

Make sure Ruby is installed (on Mac OS Ruby is installed by default) and create a file named Gemfile in your project’s path:

source 'https://rubygems.org'
gem 'livingstyleguide'

Add to the plugin to your dependencies in your package.json:

{
  "dependencies": {
    "broccoli-livingstyleguide": "^0.1.0"
  }
}

Install dependencies via command line:

bundle
npm install

Assuming you have a stylesheet called app/styles/app.scss (as Ember CLI does) add this your Brocfile.js:

var LivingStyleGuide = require('broccoli-livingstyleguide');
var lsg = LivingStyleGuide(['app'], 'styles/styleguide.lsg', 'assets/styleguide.html');
module.exports = lsg;

Ember CLI

For ember-cli, you have to manually install broccoli-merge-trees: npm install broccoli-merge-trees --save-dev and change your ember-cli-build.js as follows:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var mergeTrees = require('broccoli-merge-trees');

var LivingStyleGuide = require('broccoli-livingstyleguide');
var lsg = LivingStyleGuide(['app'], 'styles/styleguide.lsg', 'assets/styleguide.html');

module.exports = function (defaults) {
    var app = new EmberApp(defaults, { });

    return mergeTrees([app.toTree(), lsg]);
};

2. Create a file app/styles/styleguide.lsg containing

source: 'app.scss'
title: 'My Living Style Guide'

3. Write documentation for each module app/styles/partials/_buttons.md (to describe _buttons.scss in the same folder)

Buttons
=======

```
<button class="button">Example button</button>
```

```
<button class="button -primary">Example button</button>
```

4. Open the generated dist/assets/styleguide.html

Make sure to check out the documentation for writing examples and learn how to display colors from variables, use template languages, and helper functions.

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request