diff --git a/templates/ink.html b/templates/ink.html
new file mode 100644
index 0000000000..473e0e7dbb
--- /dev/null
+++ b/templates/ink.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Article Title</title>
+  <meta name="description" content="">
+  <meta name="author" content="ink, cookbook, recipes">
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+
+    
+<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
+
+  <link rel="shortcut icon" href="http://cdn.ink.sapo.pt/3.1.1/img/favicon.ico">
+  <link rel="apple-touch-icon" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-iphone.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-ipad.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-iphone-retina.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="http://cdn.ink.sapo.pt/3.1.1/img/touch-icon-ipad-retina.png">
+  <link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
+  <link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
+  <link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.1.1/img/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
+
+  <!-- load Ink's css from the cdn -->
+  <link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.1/css/ink-flex.min.css">
+  <link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.1/css/font-awesome.min.css">
+
+  <!-- load Ink's css for IE8 -->
+  <!--[if lt IE 9 ]>
+  <link rel="stylesheet" href="http://cdn.ink.sapo.pt/3.1.1/css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
+  <![endif]-->
+
+  <!-- test browser flexbox support and load legacy grid if unsupported -->
+  <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/modernizr.js"></script>
+  <script type="text/javascript">
+    Modernizr.load({
+      test: Modernizr.flexbox,
+      nope : 'http://cdn.ink.sapo.pt/3.1.1/css/ink-legacy.min.css'
+    });
+  </script>
+
+  <!-- load Ink's javascript files from the cdn -->
+  <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/holder.js"></script>
+  <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/ink-all.min.js"></script>
+  <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.1/js/autoload.js"></script>
+  <script type="text/javascript" src="/js/mermaid.full.min.js"></script>
+
+
+  <style type="text/css">
+
+    body {
+      background: #ffffff;
+      font-family: sans-serif;
+        font-size: 90%;
+    }
+
+    header h1 small:before  {
+      content: "|";
+      margin: 0 0.5em;
+      font-size: 1.5em;
+    }
+      h1 {
+    color: #104e8b;
+}
+
+
+    article header{
+      padding: 0;
+      overflow: hidden;
+    }
+
+    article footer {
+      background: none;
+    }
+
+    article {
+      padding-bottom: 2em;
+      border-bottom: 1px solid #ccc;
+    }
+
+    table, th, td {
+    border: 1px solid #8b8989;
+    } 
+      
+    .date {
+      float: right;
+    }
+
+    summary {
+      font-weight: 700;
+      line-height: 1;
+    }
+    .push, footer {
+        height: 120px;
+        margin-top: 0;
+        margin-bottom: 10;
+      }  
+    footer {
+      background: #cdc5bf;
+    }
+  </style>
+  <script>
+    Ink.requireModules(['Ink.Dom.Loaded_1'], function (DomLoaded) {
+      DomLoaded.run(function(){
+        var elements = document.querySelectorAll ('article h1,h2');
+        var i;
+        var sections = document.getElementById('sections');
+        for(i=0;i<elements.length;i++){
+          var e = elements[i];
+
+          sections.innerHTML = sections.innerHTML +  '<li><a href="#'+e.id+'">'+e.innerText+'</a></li>';
+          //$("#sections").append('<li><a href="http://www.idg.se">'+$e.text()+'</a></li>');
+        }
+
+        Ink.requireModules( ['Ink.UI.Sticky_1'], function( Sticky ){
+          new Sticky('#sidenav')
+        });
+      });
+    });
+  </script>
+</head>
+
+<body>
+
+<div class="ink-grid">
+
+  <!--[if lte IE 9 ]>
+  <div class="ink-alert basic" role="alert">
+      <button class="ink-dismiss">&times;</button>
+      <p>
+          <strong>You are using an outdated Internet Explorer version.</strong>
+          Please <a href="http://browsehappy.com/">upgrade to a modern browser</a> to improve your web experience.
+      </p>
+  </div>
+  -->
+
+  <!-- Add your site or application content here -->
+
+  <header class="clearfix vertical-padding">
+
+    <h1 class="logo xlarge-push-left large-push-left">
+      mermaid<small>Diagrams and flowcharts from text similar to markdown</small>
+    </h1>
+
+    <nav class="ink-navigation xlarge-push-right large-push-right half-top-space">
+      <ul class="menu horizontal black">
+        {{#list}}
+        {{#active}}
+        <li class="active"><a href="{{{name}}}.html">{{{name}}}</a></li>
+        {{/active}}
+        {{^active}}
+        <li><a href="{{{name}}}.html">{{{name}}}</a></li>
+        {{/active}}
+        {{/list}}
+      </ul>
+    </nav>
+
+  </header>
+
+  <section class="column-group gutters article">
+    <div class="xlarge-70 large-70 medium-60 small-100 tiny-100">
+      <article>
+        {{{contents}}}
+      </article>
+    </div>
+    <section class="xlarge-30 large-30 medium-40 small-100 tiny-100">
+      <nav id="sidenav" class="ink-navigation ink-sticky bottom-space"
+           data-bottom-element="#sticky-stop">
+        <ul class="menu vertical black" id="sections">
+          <li class="heading active"><a href="#">Quicklinks:</a></li>
+        </ul>
+      </nav>
+    </section>
+  </section>
+  <div id="sticky-stop">&nbsp;</div>
+
+  <section class="column-group gutters">
+    <div class="all-20 small-100 tiny-100">
+      <h4>Heading 1</h4>
+      <img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
+      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
+    </div>
+    <div class="all-20 small-100 tiny-100">
+      <h4>Heading 2</h4>
+      <img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
+      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
+    </div>
+    <div class="all-20 small-100 tiny-100">
+      <h4>Heading 3</h4>
+      <img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
+      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
+    </div>
+    <div class="all-20 small-100 tiny-100">
+      <h4>Heading 4</h4>
+      <img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
+      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
+    </div>
+    <div class="all-20 small-100 tiny-100">
+      <h4>Heading 5</h4>
+      <img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
+      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel tortor vel nisl vestibulum congue vel vel lectus. Cras vehicula metus nec nibh ornare, in ullamcorper ipsum sodales. Duis luctus tempus augue, sed facilisis sem semper non. Pellentesque elementum auctor lectus, a fringilla quam."</p>
+    </div>
+  </section>
+</div>
+<footer class="clearfix">
+  <div class="ink-grid">
+    <ul class="unstyled inline half-vertical-space">
+      <li class="active"><a href="#">About</a></li>
+      <li><a href="#">Sitemap</a></li>
+      <li><a href="#">Contacts</a></li>
+    </ul>
+    <p class="note">Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.</p>
+  </div>
+</footer>
+</body>
+</html>
\ No newline at end of file
