LivingCSS Example Template and Gulpfile

gulpfile.js

var gulp = require('gulp');
var livingcss = require('gulp-livingcss');
var path = require('path');

function findLoneSubsections(sections) {
  for (var i = 0, section; section = sections[i]; i++) {
    if (section.subSections && section.subSections.length === 1) {
      section.loneSubsection = true;
    }
  }
}

gulp.task('generate', function() {

return gulp.src([
    'node_modules/fs-styles/assets/css/helpers/*.styl',
    'node_modules/fs-styles/assets/css/elements/*.styl',
    'node_modules/fs-styles/assets/css/modules/*.styl'
  ])
  .pipe(livingcss('.', {
    template: 'handlebars/template.hbs',
    preprocess: function(context, template, Handlebars) {
      findLoneSubsections(context.sections);

      return livingcss.utils.readFileGlobs('handlebars/partials/*.hbs', function(data, file) {
        Handlebars.registerPartial(path.basename(file, path.extname(file)), data);
      });
    },
    sortOrder: [
      {index: ['colors', 'break points', 'typography', 'lists', 'forms', 'buttons', 'icons', 'tooltips', 'badges', 'alerts', 'cards', 'subnav', 'modals']}
      ],
    tags: {
      colordef: function() {
        this.block.name = this.tag.description;
        this.block.description = this.comment.description;
        this.block.id = livingcss.utils.getId(this.block.name);
      },
      color: function() {
        this.block[this.tag.type] = this.tag.description;
      },
      colorof: function() {
        var section = this.sections[this.tag.description];

        if (section) {
          section.colors = section.colors || [];
          section.colors.push(this.block);
        }
      },
      icondef: function() {
        this.block.name = this.tag.description;
        this.block.description = this.comment.description;
        this.block.id = livingcss.utils.getId(this.block.name);
      },
      iconof: function() {
        var section = this.sections[this.tag.description];

        if (section) {
          section.icons = section.icons || [];
          section.icons.push(this.block);
        }
      }
    }
  }))
  .pipe(gulp.dest('.'));
});

template.hbs

<div class="main container">
  <div class="main__row row-fluid">

    <aside class="span2">
      <div class="nav-container">

        <ul class="nav" id="nav" role="tablist">
          {{#sections}}
           <li class="nav__item">
              <a href="#{{id}}" class="nav__link">{{name}}</a>

                {{#unless loneSubsection}}
                  <ul class="nav inner-nav">
                    {{#children}}
                      <li class="nav__item">
                        <a href="#{{../id}}-{{id}}" class="nav__link" tabindex="-1"><span class="sr-only">{{../name}} – </span>{{name}}</a>
                      </li>
                    {{/children}}
                  </ul>
                {{/unless}}
            </li>
          {{/sections}}
        </ul>

        <div class="back-to-top-container"><a href="#" class="back-to-top">Back to Top</a></div>
        <ul class="github">
          <li class="github__item">
            <a href="https://github.com/fs-webdev/fs-styles" class="github__link fs-button">View on Github</a>
          </li>
        </ul>
      </div>
    </aside>

    <main class="span10 content" id="main">

      {{#sections}}
        <section class="section" id="{{id}}">
          <h2 class="section-title">{{name}}</h2>

          {{#children}}
            <div class="fs-card" id="{{../id}}-{{id}}">
              <h3 class="fs-card__title">{{name}}</h3>
              <div class="row-fluid">
                <div class="fs-card__body example span6">
                  {{#if example}}

                    {{{example.description}}}

                  {{/if}}

                  {{#if colors}}

                    {{#colors}}
                      {{> colorSquare }}
                    {{/colors}}

                  {{/if}}

                  {{#if icons}}

                    {{#icons}}
                      {{> iconSquare }}
                    {{/icons}}

                  {{/if}}

                  {{#children}}
                    <h4 class="fs-h5">{{name}}</h4>
                    <div class="row-fluid">
                      {{#if description}}
                        {{description}}
                      {{else if colors}}

                        {{#colors}}
                          {{> colorSquare }}
                        {{/colors}}

                      {{else if icons}}

                        {{#icons}}
                          {{> iconSquare }}
                        {{/icons}}

                      {{else if example}}

                        {{{example.description}}}

                      {{/if}}
                    </div>
                  {{/children}}
                </div>
                <div class="fs-card__body description span6">{{{description}}}</div>
              </div>
              {{#if code}}
                <div class="markup">
                  <div class="code-heading">
                    <button class="toggle-code fs-button fs-button--minor" aria-controls="markup-{{id}}">
                      <span class="sr-only">{{name}} &ndash; </span>
                      <span class="toggle-code--text">Show Example Code</span>
                    </button>
                  </div>
                  <pre class="markup__code" id="markup-{{id}}" aria-expanded="false"><code class="language-{{code.type}}">{{code.description}}</code></pre>
                </div>
              {{/if}}
            </div>
          {{/children}}

        </section>
      {{/sections}}

    </main>

  </div>
</div>

Thanks for this! This is super useful. Any chance you could include the colorSquare.hbs or iconSquare.hbs template as an example of how to render custom tags?