142 lines
5.4 KiB
Twig
142 lines
5.4 KiB
Twig
|
<!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>
|