Wondering what’s next for npm?Check out our public roadmap! »

    broccoli-livingstyleguide

    0.2.0 • Public • Published

    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


    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.

    Install

    npm i broccoli-livingstyleguide

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • avatar