diff --git a/Documentation~/.gitignore b/Documentation~/.gitignore
new file mode 100644
index 0000000..161187c
--- /dev/null
+++ b/Documentation~/.gitignore
@@ -0,0 +1,2 @@
+/_site
+/api
\ No newline at end of file
diff --git a/Documentation~/attachments/site/favicon.png b/Documentation~/attachments/site/favicon.png
new file mode 100644
index 0000000..90c201b
Binary files /dev/null and b/Documentation~/attachments/site/favicon.png differ
diff --git a/Documentation~/attachments/site/icon.png b/Documentation~/attachments/site/icon.png
new file mode 100644
index 0000000..90c201b
Binary files /dev/null and b/Documentation~/attachments/site/icon.png differ
diff --git a/Documentation~/docfx.json b/Documentation~/docfx.json
new file mode 100644
index 0000000..9c1c5d5
--- /dev/null
+++ b/Documentation~/docfx.json
@@ -0,0 +1,72 @@
+{
+	"metadata": [
+		{
+			"src": [
+				{
+					"src": "..",
+					"files": [
+						"**/*.cs"
+					]
+				}
+			],
+			"dest": "api",
+			"disableDefaultFilter": false,
+			"disableGitFeatures": false,
+			"globalNamespaceId": "Global",
+			"includeExplicitInterfaceImplementations": true,
+			"includePrivateMembers": false,
+			"memberLayout": "separatePages",
+			"allowCompilationErrors": true
+		}
+	],
+	"build": {
+		"content": [
+			{
+				"files": [
+					"toc.yml",
+					"index.md"
+				]
+			},
+			{
+				"files": [
+					"api/*.yml"
+				]
+			},
+			{
+				"files": [
+					"pages/manual/toc.yml",
+					"pages/manual/*.md"
+				]
+			}
+		],
+		"resource": [
+			{
+				"files": [
+					"attachments/**/*"
+				]
+			}
+		],
+		"template": [
+			"default",
+			"templates/singulinkfx"
+		],
+		"globalMetadata": {
+			"_appTitle": "Rewired Glyphs Docs",
+			"_appName": "Rewired Glyphs Docs",
+			"_appFooter": "<strong>Rewired Glyphs</strong>",
+			"_appFaviconPath": "attachments/site/favicon.png",
+			"_appLogoPath": "attachments/site/icon.png",
+			"_copyrightFooter": "Docs generated for Rewired-Glyphs Unity Package. Package distributed under MIT license.",
+			"_disableSideFilter": false,
+			"_enableNewTab": true,
+			"_disableContribution": true,
+			"_disableBreadcrumb": false,
+			"_enableSearch": true
+		},
+		"xref": [
+			"https://normanderwan.github.io/UnityXrefMaps/xrefmap.yml"
+		],
+		"markdownEngineName": "markdig",
+		"dest": "_site"
+	}
+}
\ No newline at end of file
diff --git a/Documentation~/index.md b/Documentation~/index.md
new file mode 100644
index 0000000..54770be
--- /dev/null
+++ b/Documentation~/index.md
@@ -0,0 +1 @@
+# Rewired Glyphs Documentation
\ No newline at end of file
diff --git a/Documentation~/pages/manual/docs-overview.md b/Documentation~/pages/manual/docs-overview.md
new file mode 100644
index 0000000..cf139c4
--- /dev/null
+++ b/Documentation~/pages/manual/docs-overview.md
@@ -0,0 +1,98 @@
+# Docs Overview
+
+This article explains the technologies used for our documentation then details how to install and contribute using them.
+
+## How the Docs Website Works
+
+This docs are generated using a tool known as [DocFX](https://github.com/dotnet/docfx). Simply put it generates a website from our codebase (referred to as the scripting API) and articles we have written (such as this very page!).
+
+### Installing DocFX
+
+To install the docfx tool run the following command in a terminal or command prompt window.
+
+```
+dotnet tool install -g docfx
+```
+
+> [!NOTE]
+>
+> You may need to [install the .NET SDK](https://dotnet.microsoft.com/en-us/download) if you receive a `Unrecognized command 'dotnet'`  error
+
+> [!NOTE]
+>
+> Our documentation is generated using `2.75.0`. Using an earlier version may not generate the website correctly. You can check your version using `docfx --version`.
+>
+> You can update your version with the `dotnet tool update -g docfx` command.
+
+> [!CAUTION]
+>
+> Do *NOT* install DocFX using a package manager (such as homebrew or chocolatey). These are usually out of date and unmaintained.
+
+### Generate Website
+
+To generate a website from the codebase and articles run the following command from the `Documentation` folder:
+
+```
+docfx
+```
+
+> [!WARNING]
+>
+> Getting the `Cannot find config file docfx.json` error? 
+> 
+> Make sure you change the directory of the terminal window to the project's documentation folder using `cd` 
+
+### Viewing the Website Locally
+
+To view the generated website after it has been generated run the following command from the `Documentation` folder:
+
+```
+docfx serve
+```
+
+You can now view the website in your browser at `http://localhost:8080`
+
+> [!TIP]
+>
+> You can generate and serve the website in a single command by using an argument on the command: `docfx --serve`
+
+## Editing Articles
+
+To edit articles head to the `~/Documentation~/pages/*` directory of the package. Find the article you would like to edit in this directory and open it in a text editor of your choice.
+
+These pages are all written in the `markdown` format. We recommend reviewing the [Markdown Syntax](https://www.markdownguide.org/basic-syntax/) page for an overview of the features of markdown. Since we are generating the website using DocFX we also gain access to special [DocFX Specifc Markdown Synax](https://dotnet.github.io/docfx/docs/markdown.html) which can be used in our articles.
+
+> [!TIP]
+>
+> [Visual Studio Code](https://code.visualstudio.com/Download) is recommended for editing markdown files, but any text editor will do.
+
+## Adding New Articles
+
+To create a new article follow these steps:
+
+1. Create a new markdown file in one of the existing directories at `~/Documentation/pages/*`
+	1. These directories correspond to the category the article is in. 
+	2. Creating a new category is out of the scope of this article.
+2. Within the directory you created the article modify the table of contents (`toc.yml`) file and add a reference to your new article file.
+	1. View [DocFX TOC Docs](http://hellosnow.github.io/docfx/tutorial/intro_toc.html) for more information.
+3. Optional: Consider adding a link to your article at in the `index.md` of the category and root index.md so this article can more easily be found.
+
+## Adding New Attachments
+
+Want to add images to an article? Simply add the file to the `~/Documentation~/attachments/` directory and it can be referenced in your article as such:
+
+```
+![Attachment](../../attachments/manual/docs-overview/example_attachment.png)
+```
+
+Or if you want more control over the html properties:
+
+```
+<img src="../../attachments/manual/docs-overview/example_attachment.png" width="450">
+```
+
+> [!TIP]
+>
+> All files in the attachments folder can be referenced regardless of it's location.
+>
+> However, for organizational purposes you are strongly encouraged to place your attachments in a directory that is related to the article it is included in.
\ No newline at end of file
diff --git a/Documentation~/pages/manual/index.md b/Documentation~/pages/manual/index.md
new file mode 100644
index 0000000..7cd7ba6
--- /dev/null
+++ b/Documentation~/pages/manual/index.md
@@ -0,0 +1 @@
+# Manual
\ No newline at end of file
diff --git a/Documentation~/pages/manual/toc.yml b/Documentation~/pages/manual/toc.yml
new file mode 100644
index 0000000..e63717b
--- /dev/null
+++ b/Documentation~/pages/manual/toc.yml
@@ -0,0 +1,7 @@
+- name: 🏠 Home
+  href: index.md
+- name: Manual
+  href: index.md
+  items:
+  - name: ⭐️ Docs Overview
+    href: docs-overview.md
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/layout/_master.tmpl b/Documentation~/templates/singulinkfx/layout/_master.tmpl
new file mode 100644
index 0000000..b78b10d
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/layout/_master.tmpl
@@ -0,0 +1,74 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+{{!include(/^styles/.*/)}}
+{{!include(/^fonts/.*/)}}
+{{!include(favicon.ico)}}
+{{!include(logo.svg)}}
+{{!include(search-stopwords.json)}}
+<!DOCTYPE html>
+<!--[if IE]><![endif]-->
+<html>
+    {{>partials/head}}
+
+    <body>
+        <!-- Header required for docfx anchor scroll to work -->
+        <header id="head"></header>
+        <div class="top-navbar">
+            <a class="burger-icon" onclick="toggleMenu()">
+                <svg name="Hamburger" 
+                    style="vertical-align: middle;"
+                    width="34" height="34" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M20 6H4V9H20V6ZM4 10.999H20V13.999H4V10.999ZM4 15.999H20V18.999H4V15.999Z"></path></svg>
+            </a>
+
+            {{>partials/logo}}
+        </div>
+
+        <div class="body-content">
+            <div id="blackout" class="blackout" onclick="toggleMenu()"></div>
+
+            <nav id="sidebar" role="navigation">
+                <div class="sidebar">
+                    {{>partials/navbar}}
+                    <div class="sidebar-item-separator"></div>
+                    {{^_disableToc}}
+                        {{>partials/toc}}
+                    {{/_disableToc}}
+                </div>
+                {{>partials/footer}}
+            </nav>
+
+            <main class="main-panel">
+                {{#_enableSearch}}
+                {{>partials/searchResults}}
+                {{/_enableSearch}}
+
+ 
+
+                <div role="main" class="hide-when-search" >
+                    {{^_disableBreadcrumb}}
+                        {{>partials/breadcrumb}}
+                    {{/_disableBreadcrumb}}
+
+                   {{^_disableContribution}}
+                         <div id="contribution">
+                             {{#docurl}}
+                               <a href="{{docurl}}" class="contribution-link">{{__global.improveThisDoc}}</a>
+                             {{/docurl}}
+                         </div>
+                    {{/_disableContribution}}
+
+                    <article class="content wrap" id="_content" data-uid="{{uid}}">
+                      {{!body}}
+                    </article>
+                </div>
+
+                {{#_copyrightFooter}}
+                <div class="copyright-footer">
+                    <span>{{_copyrightFooter}}</span>
+                </div>
+                {{/_copyrightFooter}}
+            </main>
+        </div>
+
+        {{>partials/scripts}}
+    </body>
+</html>
diff --git a/Documentation~/templates/singulinkfx/partials/footer.tmpl.partial b/Documentation~/templates/singulinkfx/partials/footer.tmpl.partial
new file mode 100644
index 0000000..dd601a9
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/footer.tmpl.partial
@@ -0,0 +1,4 @@
+<div class="footer">
+  {{{_appFooter}}}
+  {{^_appFooter}}<strong><a href='https://dotnet.github.io/docfx/'>DocFX</a> + <a href='https://www.singulink.com'>Singulink</a> = ♥</strong>{{/_appFooter}}
+</div>
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/partials/head.tmpl.partial b/Documentation~/templates/singulinkfx/partials/head.tmpl.partial
new file mode 100644
index 0000000..2b0dd67
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/head.tmpl.partial
@@ -0,0 +1,23 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}</title>
+  <meta name="viewport" content="width=device-width">
+  <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
+  <meta name="generator" content="docfx {{_docfxVersion}}">
+  {{#_description}}<meta name="description" content="{{_description}}">{{/_description}}
+  <link rel="shortcut icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" integrity="sha384-EvBWSlnoFgZlXJvpzS+MAUEjvN7+gcCwH+qh7GRFOGgZO0PuwOFro7qPOJnLfe7l" crossorigin="anonymous">
+  <link rel="stylesheet" href="{{_rel}}styles/config.css">
+  <link rel="stylesheet" href="{{_rel}}styles/singulink.css">
+  <link rel="stylesheet" href="{{_rel}}styles/main.css">
+  <meta property="docfx:navrel" content="{{_navRel}}">
+  <meta property="docfx:tocrel" content="{{_tocRel}}">
+  {{#_noindex}}<meta name="searchOption" content="noindex">{{/_noindex}}
+  {{#_enableSearch}}<meta property="docfx:rel" content="{{_rel}}">{{/_enableSearch}}
+  {{#_enableNewTab}}<meta property="docfx:newtab" content="true">{{/_enableNewTab}}
+</head>
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/partials/li.tmpl.partial b/Documentation~/templates/singulinkfx/partials/li.tmpl.partial
new file mode 100644
index 0000000..2c8a3d0
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/li.tmpl.partial
@@ -0,0 +1,31 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<ul class="nav level{{level}}">
+  {{#items}}
+    {{^dropdown}}
+      <li>
+          {{^leaf}}
+            <span class="expand-stub"></span>
+          {{/leaf}}
+          {{#topicHref}}
+            <a href="{{topicHref}}" class="sidebar-item" name="{{tocHref}}" title="{{name}}">{{name}}</a>
+          {{/topicHref}}
+          {{^topicHref}}
+            <a>{{{name}}}</a>
+          {{/topicHref}}
+        
+        {{^leaf}}
+          {{>partials/li}}
+        {{/leaf}}
+      </li>
+    {{/dropdown}}
+    {{#dropdown}}
+      <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{name}} <span class="caret"></span></a>
+        <ul class="dropdown-menu level{{level}}">
+          {{>partials/dd-li}}
+        </ul>
+      </li>
+    {{/dropdown}}
+  {{/items}}
+</ul>
diff --git a/Documentation~/templates/singulinkfx/partials/logo.tmpl.partial b/Documentation~/templates/singulinkfx/partials/logo.tmpl.partial
new file mode 100644
index 0000000..738ab5b
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/logo.tmpl.partial
@@ -0,0 +1,6 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<a class="brand" href="{{_rel}}index.html">
+  <img src="{{_rel}}{{{_appLogoPath}}}{{^_appLogoPath}}logo.svg{{/_appLogoPath}}" alt="{{_appName}}" class="logomark">
+  <span class="brand-title">{{_appName}}</span>
+</a>
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/partials/namespace.tmpl.partial b/Documentation~/templates/singulinkfx/partials/namespace.tmpl.partial
new file mode 100644
index 0000000..42d64e6
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/namespace.tmpl.partial
@@ -0,0 +1,13 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<h1 id="{{id}}" data-uid="{{uid}}" class="text-break">{{>partials/title}}</h1>
+<div class="markdown level0 summary">{{{summary}}}</div>
+<div class="markdown level0 conceptual">{{{conceptual}}}</div>
+<div class="markdown level0 remarks">{{{remarks}}}</div>
+{{#children}}
+  <h3 id="{{id}}">{{>partials/namespaceSubtitle}}</h3>
+  {{#children}}
+    <h5><xref uid="{{uid}}" altProperty="fullName" displayProperty="name"/></h5>
+    <section>{{{summary}}}</section>
+  {{/children}}
+{{/children}}
diff --git a/Documentation~/templates/singulinkfx/partials/navbar.tmpl.partial b/Documentation~/templates/singulinkfx/partials/navbar.tmpl.partial
new file mode 100644
index 0000000..cfddfd8
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/navbar.tmpl.partial
@@ -0,0 +1,19 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div>
+  <div class="mobile-hide">
+    {{>partials/logo}}
+  </div>
+
+  {{#_enableSearch}}
+  <div class="sidesearch">
+    <form id="search" role="search" class="search">
+        <i class="bi bi-search search-icon"></i>
+        <input type="text" id="search-query" placeholder="{{__global.search}}" autocomplete="off">
+    </form>
+  </div>
+  {{/_enableSearch}}
+
+  <div id="navbar">
+  </div>
+</div>
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/partials/scripts.tmpl.partial b/Documentation~/templates/singulinkfx/partials/scripts.tmpl.partial
new file mode 100644
index 0000000..8ef7f26
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/scripts.tmpl.partial
@@ -0,0 +1,13 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/jquery.twbsPagination.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mark.js@8.11.1/dist/jquery.mark.min.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/url.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/anchor-js@5.0.0/anchor.min.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/docfx.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/main.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/singulink.js"></script>
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/partials/searchResults.tmpl.partial b/Documentation~/templates/singulinkfx/partials/searchResults.tmpl.partial
new file mode 100644
index 0000000..9f08c90
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/searchResults.tmpl.partial
@@ -0,0 +1,9 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div id="search-results" style="display: none;">
+  <h1 class="search-list">{{__global.searchResults}} <span></span></h1>
+  <div class="sr-items">
+    <p><i class="bi bi-hourglass-split index-loading"></i></p>
+  </div>
+  <ul id="pagination" data-first={{__global.pageFirst}} data-prev={{__global.pagePrev}} data-next={{__global.pageNext}} data-last={{__global.pageLast}}></ul>
+</div>
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/partials/toc.tmpl.partial b/Documentation~/templates/singulinkfx/partials/toc.tmpl.partial
new file mode 100644
index 0000000..c660966
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/partials/toc.tmpl.partial
@@ -0,0 +1,5 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div id="sidetoggle">
+  <div id="sidetoc"></div>
+</div>
diff --git a/Documentation~/templates/singulinkfx/styles/config.css b/Documentation~/templates/singulinkfx/styles/config.css
new file mode 100644
index 0000000..cb39b51
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/config.css
@@ -0,0 +1,124 @@
+/* Theme Configuration Options */
+
+:root 
+{
+    /* General */
+
+    --base-font-size: 16px;
+    --smalldevice-base-font-size: 14px; /* Base font size for devices < 1024px */
+    
+    --main-bg-color: #1f1f23;
+    --footer-bg-color: rgba(0,0,0,.4);
+    --separator-color: #42474f;
+
+    --table-strip-bg-color: #151515;
+    --table-header-bg-color: black;
+    --table-header-color: hsla(0,0%,100%,.8);
+    --table-header-border-color: #040405;
+
+    /* Text */
+
+    --appname-color: white;
+
+    --h1-color: white;
+    --h2-color: #f2f2f2;
+    --h3-color: #e3e3e3;
+    --h4-color: #ffffff;
+    --h5-color: #e0e0e0;
+
+    --text-color: #e1e1e1;
+    --link-color: #00b0f4;
+    --link-hover-color: #2ec4ff;
+    
+    /* Mobile Topbar */
+
+    --topbar-bg-color: #18191c;
+    
+    /* Button */
+
+    --button-color: #747f8d;
+
+    /* Sidebar */
+
+    --sidebar-width: 400px;
+    --sidebar-bg-color: #292B30;
+
+    --search-color: #bdbdbd;
+    --search-bg-color: #1b1e21;
+    --search-searchicon-color: #e3e3e3;
+    --search-border-color: black;
+
+    --sidebar-item-color: white;
+    --sidebar-active-item-color: #00b0f4;
+    --sidebar-level1-item-bg-color: #222429;
+    --sidebar-level1-item-hover-bg-color: #1D1F22;
+
+    --toc-filter-color: #bdbdbd;
+    --toc-filter-bg-color: #1b1e21;
+    --toc-filter-filtericon-color: #e3e3e3;
+    --toc-filter-clearicon-color: #e68585;
+    --toc-filter-border-color: black;
+
+    /* Scrollbars */
+
+    --scrollbar-bg-color: transparent;
+    --scrollbar-thumb-bg-color: rgba(0,0,0,.4);
+    --scrollbar-thumb-border-color: transparent;
+
+    /* Alerts and Blocks */
+
+    --alert-info-border-color: rgba(114,137,218,.5);
+    --alert-info-bg-color: rgba(114,137,218,.1);
+
+    --alert-warning-border-color: rgba(250,166,26,.5);
+    --alert-warning-bg-color: rgba(250,166,26,.1);
+
+    --alert-danger-border-color: rgba(240,71,71,.5);
+    --alert-danger-bg-color: rgba(240,71,71,.1);
+
+    --alert-tip-border-color: rgba(255,255,255,.5);
+    --alert-tip-bg-color: rgba(255,255,255,.1);
+
+    --blockquote-border-color: rgba(255,255,255,.5);
+    --blockquote-bg-color: rgba(255,255,255,.1);
+
+    --breadcrumb-bg-color: #2f3136;
+
+    /* Tabs */
+
+    --nav-tabs-border-width: 1px;
+    --nav-tabs-border-color: #495057;
+    --nav-tabs-border-radius: .375rem;
+    --nav-tabs-link-hover-border-color: #303336 #303336 transparent;
+    --nav-tabs-link-active-color: white;
+    --nav-tabs-link-active-bg: var(--main-bg-color);
+    --nav-tabs-link-active-border-color: var(--nav-tabs-border-color) var(--nav-tabs-border-color) var(--main-bg-color);
+
+    /* Inline Code */
+
+    --ref-bg-color: black;
+    --ref-color: #89d4f1;
+
+    /* Code Blocks */
+
+    --code-bg-color: #151515;
+    --code-color: #d6deeb;
+    --code-keyword-color: #569cd6;
+    --code-comment-color: #57a64a;
+    --code-macro-color: #beb7ff;
+    --code-string-color: #d69d85;
+    --code-string-escape-color: #ffd68f;
+    --code-field-color: #c8c8c8;
+    --code-function-color: #dcdcaa;
+    --code-control-color: #d8a0df;
+    --code-class-color: #4ec9b0;
+    --code-number-color: #b5cea8;
+    --code-params-color: #9a9a9a;
+    --code-breakpoint-color: #8c2f2f;
+}
+
+/* Code Block Overrides */
+
+pre, legend {
+    --scrollbar-thumb-bg-color: #333;
+}
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/styles/down-arrow.svg b/Documentation~/templates/singulinkfx/styles/down-arrow.svg
new file mode 100644
index 0000000..fbd1dae
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/down-arrow.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+		 viewBox="0 0 491.996 491.996" style="enable-background:new 0 0 491.996 491.996;" xml:space="preserve">
+<g>
+	<g color="white">
+		<path d="M484.132,124.986l-16.116-16.228c-5.072-5.068-11.82-7.86-19.032-7.86c-7.208,0-13.964,2.792-19.036,7.86l-183.84,183.848
+			L62.056,108.554c-5.064-5.068-11.82-7.856-19.028-7.856s-13.968,2.788-19.036,7.856l-16.12,16.128
+			c-10.496,10.488-10.496,27.572,0,38.06l219.136,219.924c5.064,5.064,11.812,8.632,19.084,8.632h0.084
+			c7.212,0,13.96-3.572,19.024-8.632l218.932-219.328c5.072-5.064,7.856-12.016,7.864-19.224
+			C491.996,136.902,489.204,130.046,484.132,124.986z" fill="currentcolor"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/Documentation~/templates/singulinkfx/styles/jquery.twbsPagination.js b/Documentation~/templates/singulinkfx/styles/jquery.twbsPagination.js
new file mode 100644
index 0000000..332c01c
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/jquery.twbsPagination.js
@@ -0,0 +1,317 @@
+/*!
+ * jQuery pagination plugin v1.4.1
+ * http://esimakin.github.io/twbs-pagination/
+ *
+ * Copyright 2014-2016, Eugene Simakin
+ * Released under Apache 2.0 license
+ * http://apache.org/licenses/LICENSE-2.0.html
+ */
+(function ($, window, document, undefined) {
+
+    'use strict';
+
+    var old = $.fn.twbsPagination;
+
+    // PROTOTYPE AND CONSTRUCTOR
+
+    var TwbsPagination = function (element, options) {
+        this.$element = $(element);
+        this.options = $.extend({}, $.fn.twbsPagination.defaults, options);
+
+        if (this.options.startPage < 1 || this.options.startPage > this.options.totalPages) {
+            throw new Error('Start page option is incorrect');
+        }
+
+        this.options.totalPages = parseInt(this.options.totalPages);
+        if (isNaN(this.options.totalPages)) {
+            throw new Error('Total pages option is not correct!');
+        }
+
+        this.options.visiblePages = parseInt(this.options.visiblePages);
+        if (isNaN(this.options.visiblePages)) {
+            throw new Error('Visible pages option is not correct!');
+        }
+
+        if (this.options.onPageClick instanceof Function) {
+            this.$element.first().on('page', this.options.onPageClick);
+        }
+
+        // hide if only one page exists
+        if (this.options.hideOnlyOnePage && this.options.totalPages == 1) {
+            this.$element.trigger('page', 1);
+            return this;
+        }
+
+        if (this.options.totalPages < this.options.visiblePages) {
+            this.options.visiblePages = this.options.totalPages;
+        }
+
+        if (this.options.href) {
+            this.options.startPage = this.getPageFromQueryString();
+            if (!this.options.startPage) {
+                this.options.startPage = 1;
+            }
+        }
+
+        var tagName = (typeof this.$element.prop === 'function') ?
+            this.$element.prop('tagName') : this.$element.attr('tagName');
+
+        if (tagName === 'UL') {
+            this.$listContainer = this.$element;
+        } else {
+            this.$listContainer = $('<ul></ul>');
+        }
+
+        this.$listContainer.addClass(this.options.paginationClass);
+
+        if (tagName !== 'UL') {
+            this.$element.append(this.$listContainer);
+        }
+
+        if (this.options.initiateStartPageClick) {
+            this.show(this.options.startPage);
+        } else {
+            this.render(this.getPages(this.options.startPage));
+            this.setupEvents();
+        }
+
+        return this;
+    };
+
+    TwbsPagination.prototype = {
+
+        constructor: TwbsPagination,
+
+        destroy: function () {
+            this.$element.empty();
+            this.$element.removeData('twbs-pagination');
+            this.$element.off('page');
+
+            return this;
+        },
+
+        show: function (page) {
+            if (page < 1 || page > this.options.totalPages) {
+                throw new Error('Page is incorrect.');
+            }
+            this.currentPage = page;
+
+            this.render(this.getPages(page));
+            this.setupEvents();
+
+            this.$element.trigger('page', page);
+
+            return this;
+        },
+
+        buildListItems: function (pages) {
+            var listItems = [];
+
+            if (this.options.first) {
+                listItems.push(this.buildItem('first', 1));
+            }
+
+            if (this.options.prev) {
+                var prev = pages.currentPage > 1 ? pages.currentPage - 1 : this.options.loop ? this.options.totalPages  : 1;
+                listItems.push(this.buildItem('prev', prev));
+            }
+
+            for (var i = 0; i < pages.numeric.length; i++) {
+                listItems.push(this.buildItem('page', pages.numeric[i]));
+            }
+
+            if (this.options.next) {
+                var next = pages.currentPage < this.options.totalPages ? pages.currentPage + 1 : this.options.loop ? 1 : this.options.totalPages;
+                listItems.push(this.buildItem('next', next));
+            }
+
+            if (this.options.last) {
+                listItems.push(this.buildItem('last', this.options.totalPages));
+            }
+
+            return listItems;
+        },
+
+        buildItem: function (type, page) {
+            var $itemContainer = $('<li></li>'),
+                $itemContent = $('<a></a>'),
+                itemText = this.options[type] ? this.makeText(this.options[type], page) : page;
+
+            $itemContainer.addClass(this.options[type + 'Class']);
+            $itemContainer.data('page', page);
+            $itemContainer.data('page-type', type);
+            $itemContainer.append($itemContent.attr('href', this.makeHref(page)).addClass(this.options.anchorClass).html(itemText));
+
+            return $itemContainer;
+        },
+
+        getPages: function (currentPage) {
+            var pages = [];
+
+            var half = Math.floor(this.options.visiblePages / 2);
+            var start = currentPage - half + 1 - this.options.visiblePages % 2;
+            var end = currentPage + half;
+
+            // handle boundary case
+            if (start <= 0) {
+                start = 1;
+                end = this.options.visiblePages;
+            }
+            if (end > this.options.totalPages) {
+                start = this.options.totalPages - this.options.visiblePages + 1;
+                end = this.options.totalPages;
+            }
+
+            var itPage = start;
+            while (itPage <= end) {
+                pages.push(itPage);
+                itPage++;
+            }
+
+            return {"currentPage": currentPage, "numeric": pages};
+        },
+
+        render: function (pages) {
+            var _this = this;
+            this.$listContainer.children().remove();
+            var items = this.buildListItems(pages);
+            jQuery.each(items, function(key, item){
+                _this.$listContainer.append(item);
+            });
+
+            this.$listContainer.children().each(function () {
+                var $this = $(this),
+                    pageType = $this.data('page-type');
+
+                switch (pageType) {
+                    case 'page':
+                        if ($this.data('page') === pages.currentPage) {
+                            $this.addClass(_this.options.activeClass);
+                        }
+                        break;
+                    case 'first':
+                            $this.toggleClass(_this.options.disabledClass, pages.currentPage === 1);
+                        break;
+                    case 'last':
+                            $this.toggleClass(_this.options.disabledClass, pages.currentPage === _this.options.totalPages);
+                        break;
+                    case 'prev':
+                            $this.toggleClass(_this.options.disabledClass, !_this.options.loop && pages.currentPage === 1);
+                        break;
+                    case 'next':
+                            $this.toggleClass(_this.options.disabledClass,
+                                !_this.options.loop && pages.currentPage === _this.options.totalPages);
+                        break;
+                    default:
+                        break;
+                }
+
+            });
+        },
+
+        setupEvents: function () {
+            var _this = this;
+            this.$listContainer.off('click').on('click', 'li', function (evt) {
+                var $this = $(this);
+                if ($this.hasClass(_this.options.disabledClass) || $this.hasClass(_this.options.activeClass)) {
+                    return false;
+                }
+                // Prevent click event if href is not set.
+                !_this.options.href && evt.preventDefault();
+                _this.show(parseInt($this.data('page')));
+            });
+        },
+
+        makeHref: function (page) {
+            return this.options.href ? this.generateQueryString(page) : "#";
+        },
+
+        makeText: function (text, page) {
+            return text.replace(this.options.pageVariable, page)
+                .replace(this.options.totalPagesVariable, this.options.totalPages)
+        },
+        getPageFromQueryString: function (searchStr) {
+            var search = this.getSearchString(searchStr),
+                regex = new RegExp(this.options.pageVariable + '(=([^&#]*)|&|#|$)'),
+                page = regex.exec(search);
+            if (!page || !page[2]) {
+                return null;
+            }
+            page = decodeURIComponent(page[2]);
+            page = parseInt(page);
+            if (isNaN(page)) {
+                return null;
+            }
+            return page;
+        },
+        generateQueryString: function (pageNumber, searchStr) {
+            var search = this.getSearchString(searchStr),
+                regex = new RegExp(this.options.pageVariable + '=*[^&#]*');
+            if (!search) return '';
+            return '?' + search.replace(regex, this.options.pageVariable + '=' + pageNumber);
+
+        },
+        getSearchString: function (searchStr) {
+            var search = searchStr || window.location.search;
+            if (search === '') {
+                return null;
+            }
+            if (search.indexOf('?') === 0) search = search.substr(1);
+            return search;
+        }
+
+    };
+
+    // PLUGIN DEFINITION
+
+    $.fn.twbsPagination = function (option) {
+        var args = Array.prototype.slice.call(arguments, 1);
+        var methodReturn;
+
+        var $this = $(this);
+        var data = $this.data('twbs-pagination');
+        var options = typeof option === 'object' ? option : {};
+
+        if (!data) $this.data('twbs-pagination', (data = new TwbsPagination(this, options) ));
+        if (typeof option === 'string') methodReturn = data[ option ].apply(data, args);
+
+        return ( methodReturn === undefined ) ? $this : methodReturn;
+    };
+
+    $.fn.twbsPagination.defaults = {
+        totalPages: 1,
+        startPage: 1,
+        visiblePages: 5,
+        initiateStartPageClick: true,
+        hideOnlyOnePage: false,
+        href: false,
+        pageVariable: '{{page}}',
+        totalPagesVariable: '{{total_pages}}',
+        page: null,
+        first: 'First',
+        prev: 'Previous',
+        next: 'Next',
+        last: 'Last',
+        loop: false,
+        onPageClick: null,
+        paginationClass: 'pagination',
+        nextClass: 'page-item next',
+        prevClass: 'page-item prev',
+        lastClass: 'page-item last',
+        firstClass: 'page-item first',
+        pageClass: 'page-item',
+        activeClass: 'active',
+        disabledClass: 'disabled',
+        anchorClass: 'page-link'
+    };
+
+    $.fn.twbsPagination.Constructor = TwbsPagination;
+
+    $.fn.twbsPagination.noConflict = function () {
+        $.fn.twbsPagination = old;
+        return this;
+    };
+
+    $.fn.twbsPagination.version = "1.4.1";
+
+})(window.jQuery, window, document);
diff --git a/Documentation~/templates/singulinkfx/styles/jquery.twbsPagination.min.js b/Documentation~/templates/singulinkfx/styles/jquery.twbsPagination.min.js
new file mode 100644
index 0000000..a9e11c6
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/jquery.twbsPagination.min.js
@@ -0,0 +1,8 @@
+/*!
+ * jQuery pagination plugin v1.4.1
+ * http://esimakin.github.io/twbs-pagination/
+ *
+ * Copyright 2014-2016, Eugene Simakin
+ * Released under Apache 2.0 license
+ * http://apache.org/licenses/LICENSE-2.0.html
+ */ !function(t,s,i,e){"use strict";var a=t.fn.twbsPagination,o=function(s,i){if(this.$element=t(s),this.options=t.extend({},t.fn.twbsPagination.defaults,i),this.options.startPage<1||this.options.startPage>this.options.totalPages)throw Error("Start page option is incorrect");if(this.options.totalPages=parseInt(this.options.totalPages),isNaN(this.options.totalPages))throw Error("Total pages option is not correct!");if(this.options.visiblePages=parseInt(this.options.visiblePages),isNaN(this.options.visiblePages))throw Error("Visible pages option is not correct!");if(this.options.onPageClick instanceof Function&&this.$element.first().on("page",this.options.onPageClick),this.options.hideOnlyOnePage&&1==this.options.totalPages)return this.$element.trigger("page",1),this;this.options.totalPages<this.options.visiblePages&&(this.options.visiblePages=this.options.totalPages),this.options.href&&(this.options.startPage=this.getPageFromQueryString(),this.options.startPage||(this.options.startPage=1));var e="function"==typeof this.$element.prop?this.$element.prop("tagName"):this.$element.attr("tagName");return"UL"===e?this.$listContainer=this.$element:this.$listContainer=t("<ul></ul>"),this.$listContainer.addClass(this.options.paginationClass),"UL"!==e&&this.$element.append(this.$listContainer),this.options.initiateStartPageClick?this.show(this.options.startPage):(this.render(this.getPages(this.options.startPage)),this.setupEvents()),this};o.prototype={constructor:o,destroy:function(){return this.$element.empty(),this.$element.removeData("twbs-pagination"),this.$element.off("page"),this},show:function(t){if(t<1||t>this.options.totalPages)throw Error("Page is incorrect.");return this.currentPage=t,this.render(this.getPages(t)),this.setupEvents(),this.$element.trigger("page",t),this},buildListItems:function(t){var s=[];if(this.options.first&&s.push(this.buildItem("first",1)),this.options.prev){var i=t.currentPage>1?t.currentPage-1:this.options.loop?this.options.totalPages:1;s.push(this.buildItem("prev",i))}for(var e=0;e<t.numeric.length;e++)s.push(this.buildItem("page",t.numeric[e]));if(this.options.next){var a=t.currentPage<this.options.totalPages?t.currentPage+1:this.options.loop?1:this.options.totalPages;s.push(this.buildItem("next",a))}return this.options.last&&s.push(this.buildItem("last",this.options.totalPages)),s},buildItem:function(s,i){var e=t("<li></li>"),a=t("<a></a>"),o=this.options[s]?this.makeText(this.options[s],i):i;return e.addClass(this.options[s+"Class"]),e.data("page",i),e.data("page-type",s),e.append(a.attr("href",this.makeHref(i)).addClass(this.options.anchorClass).html(o)),e},getPages:function(t){var s=[],i=Math.floor(this.options.visiblePages/2),e=t-i+1-this.options.visiblePages%2,a=t+i;e<=0&&(e=1,a=this.options.visiblePages),a>this.options.totalPages&&(e=this.options.totalPages-this.options.visiblePages+1,a=this.options.totalPages);for(var o=e;o<=a;)s.push(o),o++;return{currentPage:t,numeric:s}},render:function(s){var i=this;this.$listContainer.children().remove();var e=this.buildListItems(s);jQuery.each(e,function(t,s){i.$listContainer.append(s)}),this.$listContainer.children().each(function(){var e=t(this),a=e.data("page-type");switch(a){case"page":e.data("page")===s.currentPage&&e.addClass(i.options.activeClass);break;case"first":e.toggleClass(i.options.disabledClass,1===s.currentPage);break;case"last":e.toggleClass(i.options.disabledClass,s.currentPage===i.options.totalPages);break;case"prev":e.toggleClass(i.options.disabledClass,!i.options.loop&&1===s.currentPage);break;case"next":e.toggleClass(i.options.disabledClass,!i.options.loop&&s.currentPage===i.options.totalPages)}})},setupEvents:function(){var s=this;this.$listContainer.off("click").on("click","li",function(i){var e=t(this);if(e.hasClass(s.options.disabledClass)||e.hasClass(s.options.activeClass))return!1;s.options.href||i.preventDefault(),s.show(parseInt(e.data("page")))})},makeHref:function(t){return this.options.href?this.generateQueryString(t):"#"},makeText:function(t,s){return t.replace(this.options.pageVariable,s).replace(this.options.totalPagesVariable,this.options.totalPages)},getPageFromQueryString:function(t){var s=this.getSearchString(t),i=RegExp(this.options.pageVariable+"(=([^&#]*)|&|#|$)").exec(s);return i&&i[2]?(i=parseInt(i=decodeURIComponent(i[2])),isNaN(i))?null:i:null},generateQueryString:function(t,s){var i=this.getSearchString(s),e=RegExp(this.options.pageVariable+"=*[^&#]*");return i?"?"+i.replace(e,this.options.pageVariable+"="+t):""},getSearchString:function(t){var i=t||s.location.search;return""===i?null:(0===i.indexOf("?")&&(i=i.substr(1)),i)}},t.fn.twbsPagination=function(s){var i,e=Array.prototype.slice.call(arguments,1),a=t(this),n=a.data("twbs-pagination");return n||a.data("twbs-pagination",n=new o(this,"object"==typeof s?s:{})),"string"==typeof s&&(i=n[s].apply(n,e)),void 0===i?a:i},t.fn.twbsPagination.defaults={totalPages:1,startPage:1,visiblePages:5,initiateStartPageClick:!0,hideOnlyOnePage:!1,href:!1,pageVariable:"{{page}}",totalPagesVariable:"{{total_pages}}",page:null,first:"First",prev:"Previous",next:"Next",last:"Last",loop:!1,onPageClick:null,paginationClass:"pagination",nextClass:"page-item next",prevClass:"page-item prev",lastClass:"page-item last",firstClass:"page-item first",pageClass:"page-item",activeClass:"active",disabledClass:"disabled",anchorClass:"page-link"},t.fn.twbsPagination.Constructor=o,t.fn.twbsPagination.noConflict=function(){return t.fn.twbsPagination=a,this},t.fn.twbsPagination.version="1.4.1"}(window.jQuery,window,document);
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/styles/main.css b/Documentation~/templates/singulinkfx/styles/main.css
new file mode 100644
index 0000000..d9d0332
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/main.css
@@ -0,0 +1,3 @@
+.inheritedMembers { display: none; }
+.inheritance { display: none; }
+.implements { display: none; }
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/styles/main.js b/Documentation~/templates/singulinkfx/styles/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/Documentation~/templates/singulinkfx/styles/singulink.css b/Documentation~/templates/singulinkfx/styles/singulink.css
new file mode 100644
index 0000000..154d8d1
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/singulink.css
@@ -0,0 +1,1061 @@
+@keyframes showThat {
+    0% {
+        opacity: 0;
+        visibility: hidden
+    }
+
+    1% {
+        opacity: 0;
+        visibility: visible
+    }
+
+    to {
+        opacity: 1;
+        visibility: visible
+    }
+}
+
+@keyframes hideThat {
+    0% {
+        opacity: 1;
+        visibility: visible
+    }
+
+    99% {
+        opacity: 0;
+        visibility: visible
+    }
+
+    to {
+        opacity: 0;
+        visibility: hidden
+    }
+}
+
+::-webkit-scrollbar {
+    width: 10px
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-bg-color)
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-bg-color);
+    border-color: var(--scrollbar-thumb-border-color);
+    border-radius: 5px
+}
+
+::marker {
+    unicode-bidi: isolate;
+    font-variant-numeric: tabular-nums;
+    text-transform: none;
+    text-indent: 0!important;
+    text-align: start!important;
+    text-align-last: start!important
+}
+
+*,:after,:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+body,html {
+    padding: 0;
+    margin: 0;
+    font: 15px/150%"Roboto",sans-serif;
+    color: var(--text-color);
+    background-color: var(--main-bg-color)
+}
+
+img {
+    max-width: 100%
+}
+
+ol>li,ul>li {
+    display: list-item
+}
+
+h1 {
+    color: var(--link-active-color)
+}
+
+h1,h2,h3,h4,h5 {
+    position: relative
+}
+
+h1,h2 {
+    margin-block-start: 2em
+}
+
+h3 {
+    color: var(--h3-color)
+}
+
+h4 {
+    opacity: 1;
+    color: var(--h4-color);
+    border-bottom: 2px solid var(--separator-color);
+    margin: 20px 0 0
+}
+
+h5 {
+    margin-block-end: .8em;
+    margin-block-start: 1em;
+    font-weight: 500;
+    color: var(--h5-color)
+}
+
+h6 {
+    font-size: .75em;
+    margin: 0
+}
+
+p {
+    font-weight: 400
+}
+
+ul {
+    position: relative
+}
+
+ol,ul {
+    padding-inline-start: 3em
+}
+
+ul.level1 {
+    list-style-type: none;
+    padding-inline-start: 0
+}
+
+ul.level2,ul.level3 {
+    list-style-type: none;
+    font-size: .9em
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color .25s
+}
+
+a:focus,a:hover {
+    color: var(--link-hover-color);
+    text-decoration: underline
+}
+
+a.anchorjs-link:hover {
+    text-decoration: none
+}
+
+a.active,a:active {
+    color: var(--link-active-color)
+}
+
+.body-content {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden
+}
+
+.footer>h4,.page-title {
+    margin-block-start: 0
+}
+
+nav {
+    transition: left .5s ease-out;
+    position: fixed;
+    left: -350px;
+    top: 40px;
+    bottom: 0;
+    background-color: var(--sidebar-bg-color);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000
+}
+
+h1:first-child {
+    margin-top: 1.1em
+}
+
+.sidebar {
+    flex: 1
+}
+
+.sidebar-item {
+    font-size: 1em;
+    font-weight: 400;
+    display: block;
+    padding: 4px 16px;
+    color: var(--sidebar-item-color)
+}
+
+#navbar .sidebar-item,.sidebar-item.large {
+    padding: 8px 16px
+}
+
+a.sidebar-item:focus,a.sidebar-item:hover {
+    color: var(--link-active-color);
+    text-decoration: none
+}
+
+a.sidebar-item.active {
+    color: var(--link-active-color)
+}
+
+ul.level1>li>a.sidebar-item {
+    background-color: transparent;
+    border-radius: 4px
+}
+
+#toc ul.level1>li>a.sidebar-item.active {
+    background-color: var(--link-active-bg-color)
+}
+
+.sidebar-item-separator {
+    height: 2px;
+    width: 100%;
+    background-color: var(--separator-color);
+    opacity: .8
+}
+
+span.sidebar-item {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: .8em;
+    color: var(--text-color);
+    margin-block-start: 1.25em
+}
+
+.main-panel {
+    background-color: var(--main-bg-color);
+    flex: 1;
+    overflow-x: hidden;
+}
+
+.top-navbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--topbar-bg-color)
+}
+
+.burger-icon {
+    color: var(--button-color)
+}
+
+.burger-icon:focus,.burger-icon:hover {
+    color: var(--link-active-color)
+}
+
+.burger-icon.active,.burger-icon:active {
+    color: var(--link-active-color)
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    justify-content: start
+}
+
+.logomark {
+    height: 28px
+}
+
+.brand-title {
+    padding: 0 .5em;
+    font-size: .9em;
+    color: var(--link-active-color)
+}
+
+.blackout,.footer {
+    background-color: var(--footer-bg-color)
+}
+
+.footer {
+    margin: 0 20px 20px;
+    border-radius: 8px
+}
+
+.blackout {
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    z-index: 100;
+    bottom: 0;
+    left: 0;
+    right: 0
+}
+
+.showThat {
+    animation: showThat .5s forwards
+}
+
+.hideThat {
+    animation: hideThat .5s forwards
+}
+
+@media (min-width:1024px) {
+    nav {
+        position: fixed;
+        left: 0!important;
+        top: 0;
+        bottom: 0
+    }
+
+    .blackout,.top-navbar {
+        display: none
+    }
+}
+
+.table-responsive {
+    overflow-x: auto
+}
+
+table {
+    background-color: var(--code-bg-color);
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: auto
+}
+
+table.table-striped tbody tr:nth-child(2n) {
+    background-color: var(--table-strip-bg-color)
+}
+
+table thead {
+    background: var(--table-header-bg-color)
+}
+
+table th {
+    color: var(--table-header-color);
+    text-transform: uppercase;
+    line-height: 15px;
+    border-bottom: 1px solid var(--table-header-border-color);
+    font-size: 14px;
+    padding: 9px 10px
+}
+
+.table-condensed th {
+    text-align: left
+}
+
+table td {
+    padding: 6px 10px
+}
+
+.mainContainer[dir=rtl] main ul[role=tablist],table td>p {
+    margin: 0
+}
+
+.alert,blockquote {
+    border-radius: 4px;
+    padding: 8px;
+    margin: 25px 0
+}
+
+.alert>h5 {
+    display: none;
+    margin: 0
+}
+
+.alert>p,blockquote>p {
+    margin: 0;
+    font-size: 15px
+}
+
+.alert>p,table td {
+    font-weight: 400
+}
+
+.alert.alert-info {
+    border: 2px solid var(--alert-info-border-color);
+    background: var(--alert-info-bg-color)
+}
+
+.alert.alert-warning {
+    border: 2px solid var(--alert-warning-border-color);
+    background: var(--alert-warning-bg-color)
+}
+
+.alert.alert-danger {
+    border: 2px solid var(--alert-danger-border-color);
+    background: var(--alert-danger-bg-color)
+}
+
+.TIP.alert.alert-info {
+    border: 2px solid var(--alert-tip-border-color);
+    background: var(--alert-tip-bg-color)
+}
+
+blockquote {
+    margin: 8px 0;
+    border-left: 4px solid var(--blockquote-border-color);
+    background: var(--blockquote-bg-color)
+}
+
+blockquote>p {
+    font-style: italic
+}
+
+#breadcrumb {
+    padding: 8px 16px;
+    background: var(--breadcrumb-bg-color);
+    border-radius: 4px;
+    overflow: scroll;
+    margin-bottom: 0
+}
+
+#breadcrumb:empty {
+    display: none
+}
+
+ul.breadcrumb {
+    display: flex;
+    flex-direction: row;
+    margin: 0
+}
+
+ul.breadcrumb>li {
+    margin-right: 6px
+}
+
+ul.breadcrumb>li::before {
+    content: "/";
+    margin-right: 5px
+}
+
+ul.breadcrumb>li:first-child::before {
+    content: "";
+    margin: 0
+}
+
+legend,pre {
+    display: block;
+    background-color: var(--code-bg-color);
+    border-radius: 4px;
+    padding: 6px
+}
+
+.hljs {
+    background: 0 0
+}
+
+.small {
+    font-size: .9em
+}
+
+.pull-right {
+    float: right
+}
+
+.sidetoc li>ul.level3, .sidetoc li>ul.level4, .sidetoc li>ul.level5 {
+    display: none
+}
+
+#breadcrumb wbr,.hide,ul.level1>li>.expand-stub {
+    display: none
+}
+
+@media (max-width:1023.98px) {
+    .mobile-hide {
+        display: none
+    }
+}
+
+li {
+    position: relative
+}
+
+.expand-stub {
+    cursor: pointer;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: -10px
+}
+
+.toc .nav>li.active>.expand-stub::before,.toc .nav>li>.expand-stub::before {
+    content: " ";
+    position: absolute;
+    transform: rotate(-90deg);
+    background-repeat: no-repeat;
+    background: url(down-arrow.svg)
+}
+
+.toc .nav>li.active>.expand-stub::before,.toc .nav>li.filtered>.expand-stub::before,.toc .nav>li.in.active>.expand-stub::before,.toc .nav>li.in>.expand-stub::before {
+    transform: none
+}
+
+/* Hide levels 3-5 if we are not in it. We reveal levels 1-2 always as a design choice. */
+.sidetoc li>ul.level3, .sidetoc li>ul.level4, .sidetoc li>ul.level5 {
+    display: none
+}
+
+li,.sidetoc li>ul,li.in>ul {
+    display: block
+}
+
+/* Reveal levels 3-5 when expanded */
+.sidetoc li.in>ul.level3, .sidetoc li.in>ul.level4, .sidetoc li.in>ul.level5 {
+    display: block
+}
+
+ul.level2>li>a.sidebar-item {
+    font-size: .95em;
+    padding: 0
+}
+
+ul.level3>li>a.sidebar-item {
+    padding: 0
+}
+
+ul.level2>li>a.sidebar-item:focus,ul.level2>li>a.sidebar-item:hover,ul.level3>li>a.sidebar-item:focus,ul.level3>li>a.sidebar-item:hover {
+    color: var(--link-active-color);
+    text-decoration: underline
+}
+
+ul.level2>li>a.sidebar-item.active,ul.level3>li>a.sidebar-item.active {
+    color: var(--link-active-color)
+}
+
+.inheritance .level0:before,.inheritance .level1:before,.inheritance .level2:before,.inheritance .level3:before,.inheritance .level4:before,.inheritance .level5:before {
+    content: "↳";
+    margin-right: 5px
+}
+
+.inheritance .level0 {
+    margin-left: 0
+}
+
+.inheritance .level1 {
+    margin-left: 1em
+}
+
+.inheritance .level2 {
+    margin-left: 2em
+}
+
+.inheritance .level3 {
+    margin-left: 3em
+}
+
+.inheritance .level4 {
+    margin-left: 4em
+}
+
+.inheritance .level5 {
+    margin-left: 5em
+}
+
+body {
+    font-size: var(--base-font-size)
+}
+
+@media (max-width:1024px) {
+    body {
+        font-size: var(--smalldevice-base-font-size)
+    }
+}
+
+h1,h2,h3,h4,h5 {
+    line-height: initial
+}
+
+h1,h1:first-child {
+    font-size: 2.25em;
+    letter-spacing: .5px;
+    color: var(--h1-color);
+    margin-block-start: 1em;
+    margin-block-end: -.05em
+}
+
+.article h1 {
+    margin-block-end: -.2em
+}
+
+h2 {
+    font-size: 2.1em;
+    color: var(--h2-color)
+}
+
+.article h2 {
+    margin-block-start: 1.3em;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--separator-color)
+}
+
+.article h3,h3 {
+    font-size: 1.95em;
+    font-weight: 500;
+    margin-block-start: 1.7em
+}
+
+.article h3 {
+    font-size: 1.85em;
+    margin-block-start: 1.2em;
+    margin-block-end: .9em
+}
+
+h4 {
+    font-size: 1.8em;
+    font-weight: 400;
+    margin-block-start: 2em;
+    padding-bottom: 10px
+}
+
+.article h4 {
+    font-size: 1.5em;
+    font-weight: 300;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    padding-bottom: 0;
+    border-bottom: none
+}
+
+h5 {
+    font-size: 1.1em
+}
+
+.article h5 {
+    font-size: 1.13em;
+    font-weight: 400;
+    text-decoration: underline;
+    margin-block-start: 1.5em;
+    margin-block-end: 1em
+}
+
+a.brand:hover {
+    text-decoration: none
+}
+
+a.brand .brand-title {
+    font-size: 1.4em;
+    font-weight: 500;
+    letter-spacing: .5px;
+    color: var(--appname-color);
+    margin-top: 1px;
+    padding: 0 0 0 .4em
+}
+
+@media (min-width:1024px) {
+    a.brand .brand-title {
+        font-size: 1.55em
+    }
+}
+
+a.brand .logomark {
+    height: 35px
+}
+
+.top-navbar {
+    height: 60px;
+    padding: 0 0 0 10px
+}
+
+.burger-icon {
+    margin-right: 10px
+}
+
+.sidebar {
+    padding: 25px 17px 32px
+}
+
+.blackout {
+    top: 60px
+}
+
+@media (max-width:1023.98px) {
+    .navbar-nav {
+        margin-top: 0
+    }
+}
+
+nav {
+    width: 94%;
+    max-width: var(--sidebar-width);
+    left: calc(var(--sidebar-width)*-1)
+}
+
+@media (max-width:1023.98px) {
+    nav {
+        top: 60px
+    }
+}
+
+nav ul {
+    list-style-type: none
+}
+
+nav .nav a,nav .nav a:hover {
+    text-decoration: none;
+    cursor: pointer;
+    display: block
+}
+
+nav a.sidebar-item {
+    padding: 4px 0 4px 10px;
+    cursor: pointer
+}
+
+.footer a:focus,.footer a:hover,nav a.sidebar-item:focus,nav a.sidebar-item:hover,nav a:focus {
+    text-decoration: underline
+}
+
+nav a,nav a:focus,nav a:hover {
+    color: var(--sidebar-item-color)!important
+}
+
+nav a.active,nav a.active:focus,nav a.active:hover {
+    color: var(--sidebar-active-item-color)!important
+}
+
+.sidebar-item-separator {
+    margin: 20px 0
+}
+
+#toc ul li a {
+    padding: 0 0 0 10px
+}
+
+.search {
+    background: var(--search-bg-color);
+    border: 1px solid var(--search-border-color);
+    border-radius: 5px;
+    position: relative;
+    margin-block-start: 25px
+}
+
+@media (max-width:1023.98px) {
+    .search {
+        margin-block-start: 0;
+        margin-block-end: 15px
+    }
+}
+
+.search>input {
+    font-size: .95em;
+    color: var(--search-color);
+    border: 0;
+    background: 0 0;
+    padding: 11px 30px 10px 37px;
+    width: 100%
+}
+
+.search>input:focus,.toc-filter>input:focus {
+    outline: 0
+}
+
+.search>.search-icon,.toc-filter>.filter-icon {
+    font-size: 1.2em;
+    color: var(--search-searchicon-color);
+    position: absolute;
+    top: 9px;
+    left: 9px
+}
+
+.toc-filter {
+    background: var(--toc-filter-bg-color);
+    border: 1px solid var(--toc-filter-border-color);
+    border-radius: 5px;
+    position: relative
+}
+
+.toc-filter>input {
+    font-size: .95em;
+    color: var(--toc-filter-color);
+    border: 0;
+    background: 0 0;
+    padding: 11px 30px 10px 37px;
+    width: 100%
+}
+
+.toc-filter>.filter-icon {
+    color: var(--toc-filter-filtericon-color)
+}
+
+.toc-filter>.clear-icon {
+    color: var(--toc-filter-clearicon-color);
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    cursor: pointer
+}
+
+.toc .nav>li.active>.expand-stub::before,.toc .nav>li>.expand-stub::before {
+    width: 8px;
+    height: 8px;
+    top: 6px;
+    left: 6px
+}
+
+#toc ul.level2 {
+    margin-bottom: 20px
+}
+
+#toc ul.level1>li>a {
+    font-weight: 500;
+    margin-bottom: 10px;
+    padding: 5px 10px
+}
+
+#toc ul.level1>li>a,#toc ul.level1>li>a.active {
+    background-color: var(--sidebar-level1-item-bg-color)!important;
+    border-radius: 2px
+}
+
+#toc ul.level1>li>a.active:focus,#toc ul.level1>li>a.active:hover,#toc ul.level1>li>a:focus,#toc ul.level1>li>a:hover {
+    background-color: var(--sidebar-level1-item-hover-bg-color)!important;
+    text-decoration: none
+}
+
+ul.level2 {
+    padding-inline-start: .7em
+}
+
+ul.level2 .expand-stub {
+    top: 1px
+}
+
+ul.level2>li>a,ul.level2>li>a.sidebar-item {
+    font-weight: 400;
+    color: var(--sidebar-item-color);
+    margin: 4px 0
+}
+
+ul.level3 {
+    padding-inline-start: 1em
+}
+
+ul.level3>li>a,ul.level3>li>a.sidebar-item,ul.level4>li>a,ul.level4>li>a.sidebar-item {
+    font-size: 1.05em;
+    color: var(--sidebar-item-color);
+    margin: 4px 0
+}
+
+ul.level4 {
+    padding-inline-start: 0;
+    margin-bottom: 12px
+}
+
+ul.level4>li>a,ul.level4>li>a.sidebar-item {
+    margin: 5px 0 5px 10px
+}
+
+.subnav.navbar {
+    margin: 0-15px
+}
+
+#breadcrumb::-webkit-scrollbar {
+    display: none
+}
+
+#breadcrumb a {
+    white-space: nowrap
+}
+
+#search-results h1 {
+    margin-block-start: .5em
+}
+
+#search-results .item-title {
+    font-size: 1.3em;
+    margin-top: 1.5em
+}
+
+#search-results .item-href {
+    font-size: .85em
+}
+
+#search-results .item-brief {
+    margin-top: .7em
+}
+
+#search-results ul.pagination {
+    text-align: center;
+    padding: 10px 0 0;
+    margin-block-start: 40px;
+    border-top: 1px solid var(--separator-color)
+}
+
+#search-results ul.pagination>li {
+    display: inline-block;
+    margin: 0 10px
+}
+
+#search-results ul.pagination>li.disabled a,#search-results ul.pagination>li.disabled a:hover {
+    color: var(--text-color);
+    cursor: txt;
+    text-decoration: none
+}
+
+.main-panel {
+	max-width: 1024px;
+    margin-bottom: 60px;
+    padding: 20px
+}
+
+@media (min-width:1024px) {
+    .main-panel {
+        margin-bottom: 0;
+        margin-left: var(--sidebar-width);
+        padding: 20px 40px
+    }
+}
+
+.pull-right {
+    margin-top: 70px;
+    position: relative;
+    z-index: 1
+}
+
+.divider {
+    margin-left: 4px
+}
+
+article ol li,article ul li {
+    margin-bottom: 10px
+}
+
+.hljs {
+    color: var(--code-color)
+}
+
+.hljs::-webkit-scrollbar {
+    height: 6px
+}
+
+.hljs-built_in,.hljs-keyword,.hljs-title {
+    font-style: normal
+}
+
+code,p .xref {
+    background-color: var(--ref-bg-color);
+    color: var(--ref-color);
+    padding: 2px 3px;
+    font-size: .95em;
+    border-radius: 6px
+}
+
+code,p .xref,span.parametername {
+    font-family: monospace
+}
+
+.table {
+    width: auto
+}
+
+.table-responsive {
+    margin-bottom: 0
+}
+
+table td p {
+    font-weight: 300
+}
+
+.footer {
+    text-align: center;
+    color: var(--text-color);
+    padding: 10px
+}
+
+.copyright-footer {
+    font-size: .85em;
+    font-weight: 700;
+    text-align: center;
+    margin-block-start: 30px
+}
+
+#contribution {
+    float: right;
+    margin-top: 1.1em;
+    position: relative;
+    z-index: 999
+}
+
+.tabGroup {
+    margin-top: 1rem;
+    margin-bottom: 1rem
+}
+
+.tabGroup ul[role=tablist] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color)
+}
+
+.tabGroup ul[role=tablist]>li {
+    list-style: none;
+    display: inline-block;
+    margin-bottom: 0
+}
+
+.tabGroup ul[role=tablist] .dropdown-menu {
+    margin-top: calc(-1*var(--nav-tabs-border-width));
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+.tabGroup a[role=tab] {
+    display: block;
+    text-decoration: none;
+    padding: .5rem 1rem;
+    margin-bottom: calc(-1*var(--nav-tabs-border-width));
+    border: var(--nav-tabs-border-width) solid transparent;
+    border-top-left-radius: var(--nav-tabs-border-radius);
+    border-top-right-radius: var(--nav-tabs-border-radius)
+}
+
+.tabGroup a[role=tab]:focus,.tabGroup a[role=tab]:hover {
+    isolation: isolate;
+    border-color: var(--nav-tabs-link-hover-border-color)
+}
+
+.tabGroup a[role=tab][aria-selected=true] {
+    color: var(--nav-tabs-link-active-color);
+    background-color: var(--nav-tabs-link-active-bg);
+    border-color: var(--nav-tabs-link-active-border-color)
+}
+
+.tabGroup a[role=tab]:disabled {
+    color: var(--nav-link-disabled-color);
+    background-color: transparent;
+    border-color: transparent
+}
+
+.tabGroup section[role=tabpanel] {
+    padding: 15px;
+    margin: 0;
+    overflow: hidden;
+    border: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
+    border-top: none;
+    border-bottom-left-radius: var(--nav-tabs-border-radius);
+    border-bottom-right-radius: var(--nav-tabs-border-radius)
+}
+
+.tabGroup section[role=tabpanel]>.codeHeader,.tabGroup section[role=tabpanel]>pre {
+    margin-left: -16px;
+    margin-right: -16px
+}
+
+.tabGroup section[role=tabpanel]>:first-child {
+    margin-top: 0
+}
+
+.tabGroup section[role=tabpanel]>pre:last-child {
+    display: block;
+    margin-bottom: -16px
+}
+
+.tabGroup>section {
+    margin: 0;
+    padding: 1rem;
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/styles/singulink.js b/Documentation~/templates/singulinkfx/styles/singulink.js
new file mode 100644
index 0000000..07cda60
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/singulink.js
@@ -0,0 +1,81 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+function toggleMenu() {
+               
+    var sidebar = document.getElementById("sidebar");
+    var blackout = document.getElementById("blackout");
+
+    if (sidebar.style.left === "0px") 
+    {
+        sidebar.style.left = "-" + sidebar.getBoundingClientRect().width + "px";
+        blackout.classList.remove("showThat");
+        blackout.classList.add("hideThat");
+    } 
+    else 
+    {
+        sidebar.style.left = "0px";
+        blackout.classList.remove("hideThat");
+        blackout.classList.add("showThat");
+    }
+}
+
+// jQuery .deepest(): https://gist.github.com/geraldfullam/3a151078b55599277da4
+
+(function ($) {
+    $.fn.deepest = function (selector) {
+        var deepestLevel  = 0,
+            $deepestChild,
+            $deepestChildSet;
+     
+        this.each(function () {
+            $parent = $(this);
+            $parent
+                .find((selector || '*'))
+                .each(function () {
+                    if (!this.firstChild || this.firstChild.nodeType !== 1) {
+                        var levelsToParent = $(this).parentsUntil($parent).length;
+                        if (levelsToParent > deepestLevel) {
+                            deepestLevel = levelsToParent;
+                            $deepestChild = $(this);
+                        } else if (levelsToParent === deepestLevel) {
+                            $deepestChild = !$deepestChild ? $(this) : $deepestChild.add(this);
+                        }
+                    }
+                });
+            $deepestChildSet = !$deepestChildSet ? $deepestChild : $deepestChildSet.add($deepestChild);
+        });
+            
+        return this.pushStack($deepestChildSet || [], 'deepest', selector || '');
+    };
+}(jQuery));
+
+$(function() {
+    $('table').each(function(a, tbl) {
+        var currentTableRows = $(tbl).find('tbody tr').length;
+        $(tbl).find('th').each(function(i) {
+            var remove = 0;
+            var currentTable = $(this).parents('table');
+
+            var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')');
+            tds.each(function(j) { if ($(this).text().trim() === '') remove++; });
+
+            if (remove == currentTableRows) {
+                $(this).hide();
+                tds.hide();
+            }
+        });
+    });
+
+    function scrollToc() {
+        var activeTocItem = $('.sidebar').deepest('.sidebar-item.active')[0]
+    
+        if (activeTocItem) {
+            activeTocItem.scrollIntoView({ block: "center" });
+        }
+        else{
+            setTimeout(scrollToc, 500);
+        }
+    }
+
+    setTimeout(scrollToc, 500);
+});
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/styles/url.min.js b/Documentation~/templates/singulinkfx/styles/url.min.js
new file mode 100644
index 0000000..8057e0a
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/styles/url.min.js
@@ -0,0 +1 @@
+/*! url - v1.8.6 - 2013-11-22 */window.url=function(){function a(a){return!isNaN(parseFloat(a))&&isFinite(a)}return function(b,c){var d=c||window.location.toString();if(!b)return d;b=b.toString(),"//"===d.substring(0,2)?d="http:"+d:1===d.split("://").length&&(d="http://"+d),c=d.split("/");var e={auth:""},f=c[2].split("@");1===f.length?f=f[0].split(":"):(e.auth=f[0],f=f[1].split(":")),e.protocol=c[0],e.hostname=f[0],e.port=f[1]||("https"===e.protocol.split(":")[0].toLowerCase()?"443":"80"),e.pathname=(c.length>3?"/":"")+c.slice(3,c.length).join("/").split("?")[0].split("#")[0];var g=e.pathname;"/"===g.charAt(g.length-1)&&(g=g.substring(0,g.length-1));var h=e.hostname,i=h.split("."),j=g.split("/");if("hostname"===b)return h;if("domain"===b)return/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(h)?h:i.slice(-2).join(".");if("sub"===b)return i.slice(0,i.length-2).join(".");if("port"===b)return e.port;if("protocol"===b)return e.protocol.split(":")[0];if("auth"===b)return e.auth;if("user"===b)return e.auth.split(":")[0];if("pass"===b)return e.auth.split(":")[1]||"";if("path"===b)return e.pathname;if("."===b.charAt(0)){if(b=b.substring(1),a(b))return b=parseInt(b,10),i[0>b?i.length+b:b-1]||""}else{if(a(b))return b=parseInt(b,10),j[0>b?j.length+b:b]||"";if("file"===b)return j.slice(-1)[0];if("filename"===b)return j.slice(-1)[0].split(".")[0];if("fileext"===b)return j.slice(-1)[0].split(".")[1]||"";if("?"===b.charAt(0)||"#"===b.charAt(0)){var k=d,l=null;if("?"===b.charAt(0)?k=(k.split("?")[1]||"").split("#")[0]:"#"===b.charAt(0)&&(k=k.split("#")[1]||""),!b.charAt(1))return k;b=b.substring(1),k=k.split("&");for(var m=0,n=k.length;n>m;m++)if(l=k[m].split("="),l[0]===b)return l[1]||"";return null}}return""}}(),"undefined"!=typeof jQuery&&jQuery.extend({url:function(a,b){return window.url(a,b)}});
\ No newline at end of file
diff --git a/Documentation~/templates/singulinkfx/toc.html.primary.tmpl b/Documentation~/templates/singulinkfx/toc.html.primary.tmpl
new file mode 100644
index 0000000..f4deb5e
--- /dev/null
+++ b/Documentation~/templates/singulinkfx/toc.html.primary.tmpl
@@ -0,0 +1,22 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div id="sidetoggle">
+  <div>
+    {{^_disableSideFilter}}
+    <div class="sidefilter">
+      <form class="toc-filter">
+        <i class="bi bi-funnel-fill filter-icon"></i>
+        <i id="toc_filter_clear" class="bi bi-x-lg clear-icon"></i>
+        <input type="text" id="toc_filter_input" placeholder="{{__global.tocFilter}}" autocomplete="off" onkeypress="if(event.keyCode==13) {return false;}">
+      </form>
+    </div>
+    {{/_disableSideFilter}}
+    <div class="sidetoc">
+      <div class="toc" id="toc">
+        {{^leaf}}
+          {{>partials/li}}
+        {{/leaf}}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/Documentation~/toc.yml b/Documentation~/toc.yml
new file mode 100644
index 0000000..c85a381
--- /dev/null
+++ b/Documentation~/toc.yml
@@ -0,0 +1,4 @@
+- name: Manual
+  href: pages/manual/
+- name: API
+  href: api/
\ No newline at end of file