quill/guide/template/index.html

<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>Quill: Living Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="public/quill.css">
</head>
<body id="kss-node">
  <div class="kss-sidebar kss-style">
    <header class="kss-header">
      <h1 class="kss-doc-title">Quill Style Guide</h1>
    </header>
    <nav class="kss-nav">
      <ul class="kss-nav__menu">
        <li class="kss-nav__menu-item">
          <a href="./">
            <span class="kss-nav__ref">0</span
            ><span class="kss-nav__name">Overview</span>
          </a>
        </li>
      {{#eachRoot}}
        <li class="kss-nav__menu-item">
          <a href="section-{{referenceURI}}.html">
            <span class="kss-nav__ref">{{#ifNumeric reference}}{{reference}}{{else}}{{autoincrement}}{{/ifNumeric}}</span
            ><span class="kss-nav__name">{{header}}</span>
          </a>
        {{#ifReference ../rootName}}
          <ul class="kss-nav__menu-child">
          {{#eachSection reference}}
            {{#ifDepth 2}}
              <li class="kss-nav__menu-item">
                <a href="section-{{../../referenceURI}}.html#kssref-{{referenceURI}}">
                  <span class="kss-nav__ref">{{#ifNumeric reference}}{{reference}}{{else}}{{autoincrement}}{{/ifNumeric}}</span
                  ><span class="kss-nav__name">{{header}}</span>
                </a>
              </li>
            {{/ifDepth}}
          {{/eachSection}}
          </ul>
        {{/ifReference}}
        </li>
      {{/eachRoot}}
      </ul>
    </nav>
  </div>
  <article role="main" class="kss-main">

  {{#if homepage}}
    <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
      {{{homepage}}}
    </div>
  {{else}}

    {{!
      Display each section, in order.

      The "root" element comes first in this loop, and can be detected using
      the "#ifDepth 1" block as seen below.
    }}
    {{#eachSection rootName}}
      {{#ifDepth 1}}
        <div     id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}}">
      {{else}}
        <section id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}}">
      {{/ifDepth}}

      <div class="kss-style">
        <h{{depth}} class="kss-title kss-title--level-{{depth}}">
          <a class="kss-title__permalink" href="#kssref-{{referenceURI}}">
            <span class="kss-title__ref">{{#ifNumeric reference}}{{reference}}{{else}}{{autoincrement}}{{/ifNumeric}}</span
            >{{header}}
            <span class="kss-title__permalink-hash">#permalink</span>
          </a>
        </h{{depth}}>

      {{#if parameters}}
        <ul class="kss-parameters">
        {{#eachParameter}}
          <li class="kss-parameters__item">
            <code class="kss-parameters__name">{{name}}</code>
            <div class="kss-parameters__description">{{{description}}}</div>
          </li>
        {{/eachParameter}}
        </ul>
      {{/if}}

      {{#if description}}
        <div class="kss-description">
          {{{description}}}
        </div>
      {{/if}}
      </div>

      {{#if markup}}
        <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example{{#if modifiers}}s{{/if}}
          </div>
        {{#if modifiers}}
          <div class="kss-modifier__default-name kss-style">
            Default styling
          </div>
        {{/if}}
          <div class="kss-modifier__example">
            {{{markup}}}
          </div>
        {{#eachModifier}}
          <div class="kss-modifier__name kss-style">
            {{name}}
          </div>
          <div class="kss-modifier__description kss-style">
            {{{description}}}
          </div>
          <div class="kss-modifier__example">
            {{{markup}}}
          </div>
        {{/eachModifier}}
        </div>

        <div class="kss-markup kss-style">
          <pre class="prettyprint linenums lang-html"><code data-language="html">{{markup}}</code></pre>
        </div>
      {{/if}}

      {{#ifDepth 1}}
        </div>
      {{else}}
        </section>
      {{/ifDepth}}
    {{/eachSection}}
  {{/if}}
  </article>

  <!-- SCRIPTS -->
  <script src="public/kss.js"></script>
  <script src="public/prettify.js"></script>
  <script>
    prettyPrint();
  </script>
  {{{scripts}}}

  <!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>