---
title: Introduction
tags:
  - demoIndex
---
{% set pageBase = "../" %}
{% set pageId = "intro" %}

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

{% block title %}Einführung{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}

{% block main %}
<!-- {{ page.fileSlug }}.page -->
  {% include "hippie/partials/_body_nav.njk" %}

  <section class="sec_main_center">
    <header>
      <hgroup>
        <h1>Introduction to HIPPIE</h1>
        <p>Hippie interweaves preeminent personal interface elements.</p>
      </hgroup>
    </header>
    <article>
      <p>&hellip;</p>
    </article>
  </section>
{% endblock %}

{% block script %}
  {{ super() }}
  {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
  <!-- build:js js/main.concat.min.js -->
  <script src="{{ pageBase }}js/variables.js"></script>
  <script src="{{ pageBase }}js/functions.js"></script>
  <script src="{{ pageBase }}js/global.js"></script>
  <script>
    assetsLoaded = true;
    logPerf('Assets loaded.', assetsLoaded);
    // Page specific
    // ------------------------------------------------------------------------------
    // Create instance of object made by contructor function
    var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
    var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));

    $(document).ready(function () {
      logPerf('JQ document ready event fired.');
    });

    $(document).scroll(function () {
      scrollUi.check();
    });
    logPerf('Application ready... not.');
  </script>
{% endblock %}