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.

• 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;
   // For Ember CLI use this instead:
   // module.exports = 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

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

Copyright

Copyright 2014 Nico Hagenburger. See MIT-LICENSE.md for details. Get in touch with @hagenburger on Twitter or open an issue.