<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<title>{{options.title}}</title>

	<meta name="description" content="kay">
	<meta name="generator" content="kss-node">
	<meta name="viewport" content="width=device-width">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,300,300italic' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="kss-assets/kss.css">
	<link rel="stylesheet" href="kss-assets/accelo-custom.css">
	{{{styles}}}
</head>
<body id="kss-node">
	
<div class="kss-page-bar">
	<div class="kss-page-container">
		<h1 class="kss-page-bar__title">Accelo - UI Styleguide</h1>
	</div>
</div>
<div class="kss-page-container">
	<div class="kss-sidebar kss-style">
		<nav class="kss-nav">
			<ul class="kss-nav__menu">
				<li class="kss-nav__menu-item">
					<a class="kss-nav__menu-link" href="./">
						<span class="kss-nav__name">Overview</span>
					</a>
				</li>
			{{#each menu}}
				<li class="kss-nav__menu-item">
					<a class="kss-nav__menu-link" href="section-{{referenceURI}}.html">
						<span class="kss-nav__name">{{header}}</span>
					</a>
					{{#if isActive}}
						{{#if children}}
							<ul class="kss-nav__menu-child">
							{{#each children}}
								<li class="kss-nav__menu-item">
									<a class="kss-nav__menu-link" href="section-{{../referenceURI}}.html#kssref-{{referenceURI}}">
										<span class="kss-nav__name">{{header}}</span>
									</a>
								</li>
							{{/each}}
							</ul>
						{{/if}}
					{{/if}}
				</li>
			{{/each}}
			</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 "#if @first" block as seen below.
		}}
		{{#each sections}}
			<{{#if @first}}div{{else}}section{{/if}} id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}}">

				<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">
								{{referenceNumber}}
								<span class="kss-title__permalink-hash">
									{{#if @root.hasNumericReferences}}
										#permalink
									{{else}}
										#{{reference}}
									{{/if}}
								</span>
							</span>
							{{header}}
						</a>
					</h{{depth}}>

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

					{{#if parameters}}
						<div class="kss-parameters__title">Parameters:</div>
						<ul class="kss-parameters">
						{{#each parameters}}
							<li class="kss-parameters__item">
								<div class="kss-parameters__name"><code>{{name}}</code></div>
								<div class="kss-parameters__description">
									{{{description}}}
									{{#if defaultValue}}
										<div class="kss-parameters__default-value">
											Defaults to: <code>{{defaultValue}}</code>
										</div>
									{{/if}}
								</div>
							</li>
						{{/each}}
						</ul>
					{{/if}}
				</div>

				{{#if example}}
					<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">
							{{{example}}}
						</div>

						{{#each modifiers}}
							<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>
						{{/each}}
					</div>
					{{#if example}}
						<div class="kss-markup kss-style">
							<div class="kss-markup__expand">Show me the code!</div>
								<pre class="prettyprint linenums lang-html"><code data-language="html">{{markup}}</code></pre>
							<div>
						</div>
					{{/if}}
				{{/if}}

				{{#if sourceFile.name}}
					<div class="kss-source kss-style">
					Source: <code>{{sourceFile.name}}</code>, line {{sourceFile.line}}
					</div>
				{{/if}}

			</{{#if @first}}div{{else}}section{{/if}}>
		{{/each}}
	{{/if}}
	</article>
</div>

<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
{{!--TODO specific jquery as dependency--}}
<script
    src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
    integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
    crossorigin="anonymous"></script>
<script src="kss-assets/accelo-custom.js"></script>
<script>
	prettyPrint();
	var spy = new ScrollSpy('#kss-node', {
		nav: '.kss-nav__menu-child > li > a',
		className: 'is-in-viewport'
	});
</script>
{{{scripts}}}

{{! This will only be included in the demo page. }}
{{#if options.demo}}
	<footer class="kss-github">
		<!-- https://github.com/blog/273-github-ribbons -->
		<a href="https://github.com/kss-node/kss-node"><img src="kss-assets/github-fork--black.png" alt="Fork me on GitHub"></a>
	</footer>
{{/if}}

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