broccoli-livingstyleguide v0.2.0
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
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]);
Create a file app/styles/styleguide.lsg containing:
source: 'app.scss' title: 'My Living Style Guide'
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> ```
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
Copyright
Copyright 2014 Nico Hagenburger. See MIT-LICENSE.md for details. Get in touch with @hagenburger on Twitter or open an issue.