---
permalink: "/"
title: Index
tags:
  - demoIndex
---
{% set pageBase = hippie.pageBase %}
{% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %}

{% extends "demo/_default.njk" %}

{% block title %}Index{% endblock %}
{% block head %}
	{{ super() }}
{% endblock %}

{% block body %}
	<!-- {{ page.fileSlug }}.page -->
	<div class="wrap">
		<div class="hello">
			<h2>This is
				{{ hippie.brand | upper }}</h2>
			<p>You can start using it by replacing this file with your own index page.</p>
			<p>To do this you need to create a file
				<code>/index.njk</code>
				inside the
				<i>source/screens</i>
				folder. You can also create a
				<code>data.json</code>
				file inside the
				<i>source/templates</i>
				folder as a data source for your nunjucks files.</p>
			<p>For a very basic start you can make a copy of the demo page
				<code>blank.njk</code>. You can find it at
				<i>/source/screens/demo</i>.</p>
			<p>The
				<i>source/demo</i>
				folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
			<div class="pos_rel">
				<pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
				<h3>Overview</h3>
			</div>
			<nav>
				<ul class="list_link">
					{% for link in collections.demoIndex %}
						<li>
							<a href="{{ link.page.url }}">{{ link.data.title }}</a>
						</li>
					{% endfor %}
				</ul>
			</nav>
			<h3>Page</h3>
			<ul class="list_link">
				{% for link in collections.demoPage | sort(false, false, 'data.title') %}
					<li>
						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
					</li>
				{% endfor %}
			</ul>
			<h3>Example</h3>
			<ul class="list_link">
				{% for link in collections.demoExample %}
					<li>
						<a href="{{ link.page.url }}">{{ link.data.title }}</a>
					</li>
				{% endfor %}
			</ul>
		</div>
	</div>
{% endblock %}

{% block script %}
	{{ super() }}
	<script>
		assetsLoaded = true;
		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
		// Page specific
		// ------------------------------------------------------------------------------
		logPerf('Application ready... not.');
	</script>
{% endblock %}