broccoli-livingstyleguide

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.