How can I use different markup with kss-node generated html?

Question

I'm grunting up a styleguide using kss-node but I want to use different markup for different section pages (i.e. different modifiers), how can I accomplish this?

My index.html template does this:

  {{#eachSection rootName}}
    {{#ifDepth 1}}
      <!-- Do the things. -->
    {{else}}
      <!-- Don't. -->
    {{/ifDepth}}
    {{#if markup}}
      {{#if description}}
        <!-- Description. -->
      {{/if}}

      <div class="kss-example">{{{markup}}}</div>
      <!--<pre class="prettyprint lang-html">{{markup}}</pre>-->

    {{#eachModifier}}
      <!-- MY CSS EXAMPLES -->
    {{/eachModifier}}

     <hr />

    {{else}}
      {{#if description}}
        <!-- Whatever. -->
      {{/if}}
    {{/if}}
    </section>
  {{/eachSection}}

How do I get a section page to use this:

  {{#eachModifier}}
    <!-- MY ICON IMAGES -->
  {{/eachModifier}}

Instead of this:

  {{#eachModifier}}
    <!-- MY CSS EXAMPLES -->
  {{/eachModifier}}

I tried stuff like the below code with a conditional 'if' helper for handlebars, but no luck:

  {{#iff header '==' "Icons"}}
    {{#eachModifier}}
      <!-- MY ICON IMAGES -->
    {{/eachModifier}}
  {{/iff}}

  {{else}}
    {{#eachModifier}}
      <!-- MY CSS EXAMPLES -->
    {{/eachModifier}}

My KSS looks like this: (obviously the Icons one is different)

/*
Example CSS

Example css file with KSS for style guide.

Markup:
<h1 class="{{modifier_class}}">Example Text</h1>

.example-grey - Grey
.example-green - Green
.example-brown - Brown
.example-yellow - Yellow

Styleguide 1.1
*/

score 1 · Answer 1 · answered Mar 18 '16 at 08:05

1

Ah. Turns out I needed to simply edit the line under "Markup:" in my CSS file. I was going a level too low and attempting to edit the actual framework!

answered Mar 18 '16 at 08:05

Astirian

63
1
10

How can I use different markup with kss-node generated html?

1 Answers1