<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{{ options.title }}</title> <meta name="description" content=""> <meta name="generator" content="kss-node"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="./kss-assets/kss.css"> {{ styles|raw }} </head> <body id="kss-node" {% if template.isItem %} class="kss-fullscreen-mode" {% endif %}> {% include "sidebar.twig" %} <!-- kss-main --> <div class="kss-main-wrap"> <article role="main" class="kss-main"> {# Display each section, in order. The "root" element comes first in this loop, and can be detected using the "loop.first" variable as seen below. #} {% for section in sections %} <!-- Section --> {% set sectionElement = loop.first ? 'div' : 'section' %} <{{ sectionElement }} id="" class="kss-section kss-section--depth-{{ section.depth }} {% if template.isItem %}is-fullscreen{% endif %}"> <a name="kssref-{{ section.referenceURI }}"></a> <div class="kss-pattern"><!-- kss-pattern --> <!-- Header --> <div class="kss-pattern__header"><!-- kss-pattern__header --> <a class="kss-code-toggle" href="#{{ section.referenceURI }}">Info</a> {% set headerElement = (section.depth > 6) ? 'h6' : 'h' ~ section.depth %} <{{ headerElement }} class="kss-title"> {% if ("Design" in section.reference) == true and section.depth != 1 %} <a class="kss-link" href="item-{{ section.referenceURI }}.html">{{ section.referenceNumber }} {% else %} <a class="kss-link" href="#kssref-{{ section.referenceURI }}">{{ section.referenceNumber }} {% endif %} {{ section.header }} </a> </{{ headerelement }}> <!-- Description --> {% if section.description %} <div class="kss-description"> {{ section.description|raw }} </div> {% endif %} </div><!-- kss-pattern__header --> <!-- Parameters --> {% for parameter in section.parameters %} {% if loop.first %} <div class="kss-parameters__title">Parameters:</div> <ul class="kss-parameters"> {% endif %} <li class="kss-parameters__item"> <div class="kss-parameters__name"> <code>{{ parameter.name }}</code> </div> <div class="kss-parameters__description"> {{ parameter.description|raw }} {% if parameter.defaultValue %} <div class="kss-parameters__default-value">Defaults to: <code>{{ parameter.defaultValue }}</code> </div> {% endif %} </div> </li> {% if loop.last %} </ul> {% endif %} {% endfor %} {% if ("Design" in section.reference) == false %} <!-- Example --> {% if section.example %} <div class="kss-modifier__wrapper"> {% if section.modifiers is not empty %} <div class="kss-modifier__default-name kss-style">Default styling</div> {% endif %} <div class="kss-modifier__example"> {{ section.example|raw }} </div> {% for modifier in section.modifiers %} <div class="kss-modifier__name kss-style">{{ modifier.name }} <span class="kss-modifier__description kss-style">{{ modifier.description|raw }}</span> </div> <div class="kss-modifier__example">{{ modifier.markup|raw }}</div> {% endfor %} </div> {% endif %} {% endif %} <div id="{{ section.referenceURI }}" class="kss-pattern-code"><!-- kss-pattern-code --> <a class="kss-code-toggle" href="#{{ section.referenceURI }}">Close</a> <!-- Source --> {% if section.source.filename %} <div class="kss-source kss-style"> <b>Source</b><br> <code>{{ section.source.filename }}</code>, line {{ section.source.line }} </div> {% endif %} <!-- Markup --> {% if ("Design" in section.reference) == false %} {% if section.markup %} <div class="kss-markup kss-style"> <b>Markup</b><br> <code>{{ section.markupFile }}</code> <pre class="prettyprint linenums lang-html"><code data-language="html">{{ section.markup|escape('html') }}</code></pre> </div> {% endif %} {% endif %} </div><!-- kss-pattern-code --> </div><!-- kss-pattern --> </{{ sectionelement }}> {% endfor %} </article> </div> {{ scripts|raw }} <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. --> <script> $(document).ready(function() { $(".kss-code-toggle").on("click tap", function(e) { e.preventDefault(); var url = $(this).attr('href') var objRef = url.substring(url.indexOf('#') + 1); $("#" + objRef).toggleClass('active'); }); }); </script> </body> </html>