diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
new file mode 100644
index 0000000..0b7c221
--- /dev/null
+++ b/source/screens/demo/index.liquid
@@ -0,0 +1,78 @@
+---
+permalink: "/"
+title: Index
+tags:
+- demoIndex
+---
+{% assign pageBase = hippie.pageBase -%}
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = "h_full_view" -%}
+{%- layout "hippie/full.liquid" %}
+
+{% block title %}Index{% endblock %}
+
+{% block body %}
+<div class="wrap">
+	<div class="hello">
+		<h2>This is {{ hippie.brand | upcase }}</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">
+			{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
+
+			{% for link in pagesByTitle %}
+				<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 %}
+{{ block.super -}}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
+<script>
+	// Page script
+</script>
+{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk
deleted file mode 100644
index c50c516..0000000
--- a/source/screens/demo/index.njk
+++ /dev/null
@@ -1,82 +0,0 @@
----
-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 %}
\ No newline at end of file
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
new file mode 100644
index 0000000..7167a5f
--- /dev/null
+++ b/source/templates/hippie/full.liquid
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+{% if pageId %}
+{%- capture idAttr %} id="{{ pageId }}"{% endcapture -%}
+{% endif -%}
+{% if pageClass %}
+	{%- capture classAttr %} class="{{ pageClass }}"{% endcapture -%}
+{% endif -%}
+{% if bodyClass %}
+	{%- capture bodyClassAttr %} class="{{ bodyClass }}"{% endcapture -%}
+{% endif -%}
+<html{{ idAttr }}{{ classAttr }} lang="de">
+<head>
+	<meta charset="utf-8">
+	{% block head %}
+	<title>
+		{{- hippie.titlePrefix -}}
+		{% block title %}{% endblock -%}
+		{{ hippie.titlePostfix -}}
+	</title>
+	{% block meta -%}
+	{% render "hippie/partials/meta.liquid" %}
+	{% comment %}<base href="/">{% endcomment %}
+	{% endblock -%}
+	{% render "hippie/partials/script-log.liquid" %}
+	{% render 'hippie/partials/log-setup', hippie: hippie, state: true -%}
+	{% render 'hippie/partials/log-start' -%}
+	{% block links -%}
+	{% render "hippie/partials/links.liquid" %}
+	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/>{% endcomment %}
+	{% comment %}<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/>{% endcomment %}
+	<link rel="stylesheet" media="all" href="{{ pageBase }}css/demo.css" type="text/css"/>
+	{% endblock -%}
+	{% render 'hippie/partials/log-log' with 'HEAD end    :: Links parsed, starting to load.' as msg -%}
+	{% endblock -%}
+</head>
+
+<body{{ bodyClassAttr }}>
+{% render 'hippie/partials/log-log' with 'BODY start' as msg -%}
+{%- block body %}{% endblock -%}
+{% block script -%}
+{% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
+<script src="/vendor/jquery.min.js"></script>
+<script>
+	// Full script
+</script>
+{% endblock -%}
+{% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
+</body>
+</html>
\ No newline at end of file
diff --git a/source/templates/hippie/partials/log-assets.liquid b/source/templates/hippie/partials/log-assets.liquid
new file mode 100644
index 0000000..a34b417
--- /dev/null
+++ b/source/templates/hippie/partials/log-assets.liquid
@@ -0,0 +1,3 @@
+<script>
+	assetsLoaded = {{ state | default: false, allow_false: true }};
+</script>
diff --git a/source/templates/hippie/partials/log-log.liquid b/source/templates/hippie/partials/log-log.liquid
new file mode 100644
index 0000000..ba21f2a
--- /dev/null
+++ b/source/templates/hippie/partials/log-log.liquid
@@ -0,0 +1,3 @@
+<script>
+	logPerf('{{ msg }}', {{ arg | default: '' }});
+</script>
diff --git a/source/templates/hippie/partials/log-setup.liquid b/source/templates/hippie/partials/log-setup.liquid
new file mode 100644
index 0000000..04fd9b2
--- /dev/null
+++ b/source/templates/hippie/partials/log-setup.liquid
@@ -0,0 +1,6 @@
+{% comment %}{% assign hippie.debugMode = state %}{% endcomment %}
+<script>
+	debugOn = {{ state }};
+	debugOnScreen = {{ display | default: false }};
+	assetsLoaded = {{ assets | default: false }};
+</script>
diff --git a/source/templates/hippie/partials/log-start.liquid b/source/templates/hippie/partials/log-start.liquid
new file mode 100644
index 0000000..e137e33
--- /dev/null
+++ b/source/templates/hippie/partials/log-start.liquid
@@ -0,0 +1,4 @@
+<script>
+	logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+	logPerf('HEAD start  :: Debugging performance...', debugOn);
+</script>
diff --git a/source/templates/hippie/partials/script-log.liquid b/source/templates/hippie/partials/script-log.liquid
new file mode 100644
index 0000000..7e270c7
--- /dev/null
+++ b/source/templates/hippie/partials/script-log.liquid
@@ -0,0 +1,113 @@
+<script>
+  // Entry script at page init
+  let debugOn = {{ hippie.debugMode | default: false, allow_false: true }};
+  let debugOnScreen = false;
+  let assetsLoaded = false;
+
+  // Get the current time difference between page
+  // load and when this func was invoked
+  function getTimeDiff() {
+    return new Date().getTime() - performance.timing.navigationStart;
+  }
+
+  function pad(n, width, z) {
+    z = z || '0';
+    n = n + '';
+
+    return n.length >= width
+      ? n
+      : new Array(width - n.length + 1).join(z) + n;
+  }
+
+  // Log message to console and add
+  // performance measuring information
+  function logPerf(msg, arg) {
+    if (debugOn) {
+      if (debugOnScreen && assetsLoaded) {
+        if (!document.getElementById('jsLogPerf')) {
+          let wrap = document.createElement('div');
+          let box = document.createElement('div');
+
+          wrap.style.position = 'relative';
+          box.style.cssText = `position: fixed;
+            bottom: 16px;
+            right: 40px;
+            zIndex: 1000;
+            padding: 0 8px;
+            background: rgba(255,255,255,.6);
+            color: rgb(128);
+            fontSize: 1rem;`;
+          box.id = 'jsLogPerf';
+
+          wrap.prepend(box);
+          document
+            .body
+            .prepend(wrap);
+
+          /*
+          $('<div><div></div></div>')
+            .css('position', 'relative')
+            .find('div')
+            .attr('id', 'jsLogPerf')
+            .css({
+              position: 'fixed',
+              bottom: '16px',
+              right: '40px',
+              zIndex: '1000',
+              padding: '0 8px',
+              background: 'rgba(255,255,255,.6)',
+              color: 'rgb(128)',
+              fontSize: '1rem'
+            })
+            .end()
+            .prependTo('body');
+          */
+          // $('body').prepend('<div style="position:relative;"></div>');
+          // $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
+        }
+
+        let code = document.createElement('code');
+
+        code.style.cssText = `display: block;
+          margin: 8px 0;
+          padding: 1px 4px;
+          background-color: transparent;
+          color: black;
+          font-size: 12px;
+          line-height: 1.1;`;
+        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
+
+        document
+          .getElementById('jsLogPerf')
+          .append(code);
+        // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+        // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
+
+        // NOTE: Alternative short-circuit evaluation
+        // needs element in document but prevents error if not
+        // $log = $log || $('#jslogPerf');
+        // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
+      }
+
+      if (window.console) {
+        const time = pad(getTimeDiff(), 5) + 'ms :: ';
+
+        console.debug(time + msg, (
+          arg
+          ? arg
+          : ''));
+
+        // NOTE: Non standard feature. Not available on IE
+        if (console.timeStamp) {
+          console.timeStamp(msg);
+        }
+      }
+    }
+  }
+
+  function logAdd(msg, listener) {
+    document.addEventListener(listener, function () {
+      logPerf(msg, listener);
+    });
+  }
+</script>
\ No newline at end of file