diff --git a/docfx/docfx.json b/docfx/docfx.json
index 209dbe951..0b07b4746 100644
--- a/docfx/docfx.json
+++ b/docfx/docfx.json
@@ -42,7 +42,7 @@
   "build": {
     "template": [
       "default",
-      "./templates/default"
+      "./templates/singulinkfx"
     ],
     "content": [
       {
@@ -89,9 +89,18 @@
     ],
     "dest": "../docs",
     "globalMetadata": {
-      "_enableSearch": "true",
-      "_appLogoPath": "images/logo48.png",
+      "_appTitle": "Terminal.Gui v2 Title",
+      "_appName": "Terminal.Gui v2 AppName",
+      "_appFaviconPath": "images/favicon.png",
+      "_appLogoPath": "images/logo.png",
+      "_appFooter": "<strong>Terminal.Gui Footer</strong>",
+      "_enableSearch": true,
+      "_disableSideFilter": false,
+      "_enableNewTab": true,
       "_disableContribution": false,
+      "_disableBreadcrumb": false,
+
+
       "_gitContribute": {
         "repo": "https://github.com/gui-cs/Terminal.Gui",
         "branch": "v2_develop",
diff --git a/docfx/templates/singulinkfx/layout/_master.tmpl b/docfx/templates/singulinkfx/layout/_master.tmpl
new file mode 100644
index 000000000..8e433098d
--- /dev/null
+++ b/docfx/templates/singulinkfx/layout/_master.tmpl
@@ -0,0 +1,72 @@
+{{!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>
+        <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/docfx/templates/singulinkfx/partials/footer.tmpl.partial b/docfx/templates/singulinkfx/partials/footer.tmpl.partial
new file mode 100644
index 000000000..dd601a975
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/partials/head.tmpl.partial b/docfx/templates/singulinkfx/partials/head.tmpl.partial
new file mode 100644
index 000000000..20343404d
--- /dev/null
+++ b/docfx/templates/singulinkfx/partials/head.tmpl.partial
@@ -0,0 +1,24 @@
+{{!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/discord.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/docfx/templates/singulinkfx/partials/li.tmpl.partial b/docfx/templates/singulinkfx/partials/li.tmpl.partial
new file mode 100644
index 000000000..2c8a3d0e7
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/partials/logo.tmpl.partial b/docfx/templates/singulinkfx/partials/logo.tmpl.partial
new file mode 100644
index 000000000..738ab5b6f
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/partials/namespace.tmpl.partial b/docfx/templates/singulinkfx/partials/namespace.tmpl.partial
new file mode 100644
index 000000000..42d64e69b
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/partials/navbar.tmpl.partial b/docfx/templates/singulinkfx/partials/navbar.tmpl.partial
new file mode 100644
index 000000000..cfddfd830
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/partials/scripts.tmpl.partial b/docfx/templates/singulinkfx/partials/scripts.tmpl.partial
new file mode 100644
index 000000000..8ef7f269f
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/partials/searchResults.tmpl.partial b/docfx/templates/singulinkfx/partials/searchResults.tmpl.partial
new file mode 100644
index 000000000..9f08c90e3
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/partials/toc.tmpl.partial b/docfx/templates/singulinkfx/partials/toc.tmpl.partial
new file mode 100644
index 000000000..c660966b6
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/styles/config.css b/docfx/templates/singulinkfx/styles/config.css
new file mode 100644
index 000000000..cb39b519b
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/styles/discord.css b/docfx/templates/singulinkfx/styles/discord.css
new file mode 100644
index 000000000..fd53fc733
--- /dev/null
+++ b/docfx/templates/singulinkfx/styles/discord.css
@@ -0,0 +1,680 @@
+/* Discord Style */
+
+::-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: 0px !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;
+}
+
+html, body 
+{
+    padding: 0;
+    margin: 0;
+    font: 15px/150% 'Roboto', sans-serif;
+    overflow: hidden;
+    color: var(--text-color);
+    background-color: var(--main-bg-color);
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+img {
+    max-width: 100%;
+}
+
+ul > li, ol > li {
+    display: list-item;
+}
+
+h1,h2,h3,h4,h5 
+{
+    color: var(--link-active-color);
+    position: relative;
+}
+
+h1, h2
+{
+    margin-block-start: 2em;
+}
+
+h3 
+{
+    margin-block-start: 1em;
+    font-weight: 300;
+    font-size: 1.5em;
+    color: var(--h3-color);
+    margin-block-start: 3em;
+}
+
+h4 
+{
+    opacity: 1;
+    color: var(--h4-color);
+    font-size: large;
+    border-bottom: 2px solid var(--separator-color);
+    margin: 20px 0 0 0;
+}
+
+
+h5 {
+    margin-block-end: .8em;
+    margin-block-start: 1em;
+    font-size: .85em;
+    font-weight: 500;
+    color: var(--h5-color);
+}
+
+h6 {
+    font-size: .75em;
+    margin: 0;
+}
+
+p 
+{
+    font-weight: 400;
+}
+
+ul 
+{
+    position: relative;
+}
+
+ul, ol 
+{
+    padding-inline-start: 3em;
+}
+
+ul.level1
+{
+    list-style-type: none;
+    padding-inline-start: 0;
+}
+
+ul.level2, ul.level3 
+{
+    padding-inline-start: 1em;
+    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;
+}
+
+.page-title
+{
+    margin-block-start: 0;
+}
+
+nav 
+{
+    width: 300px;
+    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-block-start: 1.1em;
+    margin-top: 1.1em;
+}
+
+.sidebar
+{
+    padding: 32px 17px 32px 32px;
+    flex: 1;
+}
+
+.sidebar-item
+{
+    font-size: 1em;
+    font-weight: 400;
+    display: block;
+    padding: 4px 16px;
+    color: var(--sidebar-item-color);
+}
+
+.sidebar-item.large, #navbar .sidebar-item
+{
+    padding: 8px 16px;
+}
+
+a.sidebar-item:hover, a.sidebar-item:focus 
+{
+    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);
+    margin: 2em 0;
+    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-y: auto;
+    padding: 20px 40px;
+}
+
+.top-navbar 
+{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 40px;
+    height: 40px;
+    background-color: var(--topbar-bg-color);
+}
+
+.burger-icon
+{
+    margin-right: 1em;
+    color: var(--button-color);
+}
+
+.burger-icon:hover, .burger-icon:focus
+{
+    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);
+}
+
+.footer 
+{
+    background-color: var(--footer-bg-color);
+    padding: 20px;
+    margin: 0 20px 20px 20px;
+    border-radius: 8px;
+    color: var(--link-active-color);
+}
+
+.footer > h4 
+{
+    margin-block-start: 0;
+}
+
+.blackout
+{
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    z-index: 100;
+    top: 40px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--footer-bg-color);
+}
+
+@keyframes showThat {
+    0% { opacity: 0; visibility: hidden; }
+    1% { opacity: 0; visibility: visible; }
+    100% { opacity: 1; visibility: visible;}
+}
+
+@keyframes hideThat {
+    0% { opacity: 1; visibility: visible; }
+    99% { opacity: 0; visibility: visible; }
+    100% { opacity: 0; visibility: hidden;}
+}
+
+.showThat
+{
+    animation: showThat .5s forwards;
+}
+
+.hideThat
+{
+    animation: hideThat .5s forwards;
+}
+
+
+
+@media (min-width: 1024px)
+{
+    nav
+    {
+        position: relative;
+        left: 0!important;
+        top: 0;
+        bottom: 0;
+    }
+
+    .top-navbar 
+    {
+        display: none;
+    }
+
+    .blackout
+    {
+        display: none;
+    }
+}
+
+/* Table */
+
+.table-responsive 
+{
+    overflow-x: auto;
+    margin-bottom: 64px;
+}
+
+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;
+    font-size: 12px;
+    line-height: 15px;
+    border-bottom: 1px solid var(--table-header-border-color);
+    padding: 8px;
+}
+
+.table-condensed th {
+    text-align: left;
+}
+
+table td 
+{
+    padding: 8px;
+    font-weight: 300;
+}
+
+table td > p 
+{
+    margin: 0;
+}
+
+/* Alerts */
+.alert {
+    border-radius: 4px;
+    padding: 8px;
+    margin: 25px 0;
+}
+
+.alert > h5 
+{
+    display: none;
+    margin: 0;
+}
+
+.alert > p 
+{
+    margin: 0;
+    font-weight: 300;
+    font-size: 13px;
+}
+
+.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);
+    padding: 8px;
+    background: var(--blockquote-bg-color);
+    border-radius: 4px;
+}
+
+blockquote > p {
+    margin: 0;
+    font-style: italic;
+    font-size: 13px;
+}
+
+
+/* Breadcrumb */
+
+#breadcrumb 
+{
+    padding: 8px 16px;
+    background: var(--breadcrumb-bg-color);
+    border-radius: 4px;
+    margin-bottom: 30px;
+}
+
+#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;
+}
+
+
+/* Code */
+
+legend, pre 
+{
+    display: block;
+    background-color: var(--code-bg-color);
+    padding: 16px;
+    border-radius: 4px;
+}
+
+code 
+{
+    background-color: var(--code-bg-color);
+    padding: 2px 4px;
+    border-radius: 4px;
+}
+
+.hljs 
+{
+    background: transparent;
+}
+
+/* DocFX related */
+
+.small {
+    font-size: .9em;
+}
+
+.pull-right 
+{
+    float: right;
+}
+
+.hide
+{
+    display: none;
+}
+
+@media (max-width: 1023.98px) 
+{
+    .mobile-hide 
+    {
+        display: none;
+    }
+}
+
+li 
+{
+    display: block;
+    position: relative;
+}
+
+.expand-stub
+{
+    cursor: pointer;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: -10px;
+}
+
+ul.level1 > li > .expand-stub
+{
+    display: none;
+}
+
+.toc .nav > li > .expand-stub::before, .toc .nav > li.active > .expand-stub::before
+{
+    content: " ";
+    position: absolute;
+    transform: rotate(-90deg);
+    width: 10px;
+    height: 10px;
+    top: 5px;
+    left: 5px;
+    background-repeat: no-repeat;
+    background: url(down-arrow.svg);
+}
+
+.toc .nav > li.active > .expand-stub::before, .toc .nav > li.in > .expand-stub::before, .toc .nav > li.in.active > .expand-stub::before, .toc .nav > li.filtered > .expand-stub::before
+{
+    transform: none;
+}
+
+li > ul 
+{
+    display: none;
+}
+
+li.in > ul 
+{
+    display: block;
+}
+
+ul.level2 > li > a.sidebar-item,
+ul.level3 > li > a.sidebar-item
+{
+    font-size: .95em;
+    padding: 0;
+    margin: 2px 16px;
+}
+
+ul.level2 > li > a.sidebar-item
+{
+    color: var(--sidebar-item-2nd-color);
+}
+
+ul.level3 > li > a.sidebar-item
+{
+    color: var(--sidebar-item-3rd-color);
+}
+
+ul.level2 > li > a.sidebar-item:hover,
+ul.level2 > li > a.sidebar-item:focus,
+ul.level3 > li > a.sidebar-item:hover,
+ul.level3 > li > a.sidebar-item:focus
+{
+    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: 0em;
+}
+
+.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;
+}
\ No newline at end of file
diff --git a/docfx/templates/singulinkfx/styles/down-arrow.svg b/docfx/templates/singulinkfx/styles/down-arrow.svg
new file mode 100644
index 000000000..e086126a2
--- /dev/null
+++ b/docfx/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" xmlns:xlink="http://www.w3.org/1999/xlink" 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/docfx/templates/singulinkfx/styles/jquery.twbsPagination.js b/docfx/templates/singulinkfx/styles/jquery.twbsPagination.js
new file mode 100644
index 000000000..332c01c62
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/styles/jquery.twbsPagination.min.js b/docfx/templates/singulinkfx/styles/jquery.twbsPagination.min.js
new file mode 100644
index 000000000..a9e11c678
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/styles/main.css b/docfx/templates/singulinkfx/styles/main.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/docfx/templates/singulinkfx/styles/main.js b/docfx/templates/singulinkfx/styles/main.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/docfx/templates/singulinkfx/styles/singulink.css b/docfx/templates/singulinkfx/styles/singulink.css
new file mode 100644
index 000000000..b478f8442
--- /dev/null
+++ b/docfx/templates/singulinkfx/styles/singulink.css
@@ -0,0 +1,572 @@
+body {
+    font-size: var(--base-font-size);
+}
+
+@media (max-width: 1024px) {
+    body {
+        font-size: var(--smalldevice-base-font-size);
+    }
+}
+
+/* Headings */
+
+h1, h2, h3, h4, h5 {
+    line-height: initial;
+}
+
+h1, h1:first-child {
+    font-size: 2.25em;
+    letter-spacing: 0.5px;
+    color: var(--h1-color);
+    margin-block-start: 1em;
+    margin-block-end: -0.05em;
+}
+
+.article h1 {
+    margin-block-end: -0.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);
+}
+
+h3 {
+    font-size: 1.95em;
+    font-weight: 500;
+    margin-block-start: 1.7em;
+}
+
+.article h3 {
+    font-size: 1.85em;
+    font-weight: 500;
+    margin-block-start: 1.2em;
+    margin-block-end: 0.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: 1.0em;
+}
+
+a.brand:hover
+{
+    text-decoration: none;
+}
+
+a.brand .brand-title {
+    font-size: 1.4em;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    color: var(--appname-color);
+    margin-top: 1px;
+    padding: 0 0 0 0.4em;
+}
+
+@media (min-width: 1024px) {
+    a.brand .brand-title {
+        font-size: 1.55em;
+    }
+}
+
+
+a.brand .logomark {
+    height: 35px;
+}
+
+/* Top bar */
+
+.top-navbar {
+    height: 60px;
+    padding: 0 0 0 10px;
+}
+
+.burger-icon {
+    margin-right: 10px;
+}
+
+/* Side Bar */
+
+.sidebar {
+    padding: 25px 17px 32px 17px;
+}
+
+.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;
+}
+
+nav a:focus, nav a.sidebar-item:hover, nav a.sidebar-item:focus {
+    text-decoration: underline;
+}
+
+nav a, nav a:hover, nav a:focus {
+    color: var(--sidebar-item-color) !important;
+}
+
+nav a.active, nav a.active:hover, nav a.active:focus {
+    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: 0.95em;
+    color: var(--search-color);
+    border: 0;
+    background: none;
+    padding: 11px 30px 10px 37px;
+    width: 100%;
+}
+
+.search > input:focus {
+    outline: 0;
+}
+
+.search > .search-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: 0.95em;
+    color: var(--toc-filter-color);
+    border: 0;
+    background: none;
+    padding: 11px 30px 10px 37px;
+    width: 100%;
+}
+
+.toc-filter > input:focus {
+    outline: 0;
+}
+
+.toc-filter > .filter-icon {
+    font-size: 1.2em;
+    color: var(--toc-filter-filtericon-color);
+    position: absolute;
+    top: 9px;
+    left: 9px;
+}
+
+.toc-filter > .clear-icon {
+    color: var(--toc-filter-clearicon-color);
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    cursor: pointer;
+}
+
+.toc .nav > li > .expand-stub::before, .toc .nav > li.active > .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:hover, #toc ul.level1 > li > a.active:hover,
+#toc ul.level1 > li > a:focus, #toc ul.level1 > li > a.active:focus {
+    background-color: var(--sidebar-level1-item-hover-bg-color) !important;
+    text-decoration: none;
+}
+
+ul.level2 {
+    padding-inline-start: 0.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 4px;
+}
+
+ul.level3 {
+    padding-inline-start: 1em;
+}
+
+ul.level3 > li > a, ul.level3 > 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 {
+    font-size: 1.05em;
+    color: var(--sidebar-item-color);
+    margin: 5px 0 5px 10px;
+}
+
+/* Breadcrumbs */
+
+.subnav.navbar {
+    margin: 0 -15px;
+}
+
+#breadcrumb {
+    overflow: scroll;
+    margin-bottom: 0;
+}
+
+#breadcrumb::-webkit-scrollbar {
+    display: none;
+}
+
+#breadcrumb a {
+    white-space: nowrap;
+}
+
+#breadcrumb wbr {
+    display: none;
+}
+
+/* Search Results */
+
+#search-results h1 {
+    margin-block-start: 0.5em;
+}
+
+#search-results .item-title {
+    font-size: 1.3em;
+    margin-top: 1.5em;
+}
+
+#search-results .item-href {    
+    font-size: 0.85em;
+}
+
+#search-results .item-brief {
+    margin-top: 0.7em;
+}
+
+#search-results ul.pagination {
+    text-align: center;
+    padding: 10px 0 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;
+}
+
+/* Content */
+
+.main-panel {
+    margin-bottom: 60px;
+    padding: 20px;
+}
+
+@media (min-width: 1024px) {
+    .main-panel {
+        margin-bottom: 0;
+        padding: 20px 40px;
+    }
+}
+
+.pull-right {
+    margin-top: 70px;
+    /* Fix unclickable links */
+    position: relative;
+    z-index: 1;
+}
+
+.divider {
+    margin-left: 4px;
+}
+
+article ul li, article ol li {
+    margin-bottom: 10px;
+}
+
+legend, pre {
+    padding: 6px;
+}
+
+.hljs {
+    color: var(--code-color);
+}
+
+.hljs::-webkit-scrollbar {
+    height: 6px;
+}
+
+.hljs-keyword, .hljs-title, .hljs-built_in {
+    font-style: normal;
+}
+
+p .xref, code {
+    background-color: var(--ref-bg-color);
+    color: var(--ref-color);
+    padding: 2px 3px;
+    font-family: monospace;
+    font-size: 0.95em;
+    border-radius: 6px;
+}
+
+span.parametername {
+    font-family: monospace;
+}
+
+.table {
+    width: auto;
+}
+
+.table-responsive {
+    margin-bottom: 0;
+}
+
+table th {
+    font-size: 14px;
+    padding: 9px 10px;
+}
+
+table td p {
+    font-weight: 300;
+}
+
+table td {
+    padding: 6px 10px;
+}
+
+.footer {
+    text-align: center;
+    color: var(--text-color);
+    padding: 10px;
+}
+
+.footer a:hover, .footer a:focus {
+    text-decoration: underline;
+}
+
+.copyright-footer {
+    font-size: 0.85em;
+    font-weight: bold;
+    text-align: center;
+    margin-block-start: 30px;
+}
+
+#contribution {
+    float: right;
+    margin-top: 1.1em;
+}
+
+
+/* Tabs */
+
+.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 {
+    /* Make dropdown border overlap tab border */
+    margin-top: calc(-1 * var(--nav-tabs-border-width));
+    /* Remove the top rounded corners here since there is a hard edge above the menu */
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.tabGroup a[role="tab"] {
+    display: block;
+    text-decoration: none;
+    padding: 0.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"]:hover, .tabGroup a[role="tab"]:focus {
+    /* Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link */
+    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;
+}
+
+.mainContainer[dir='rtl'] main ul[role="tablist"] {
+    margin: 0;
+}
\ No newline at end of file
diff --git a/docfx/templates/singulinkfx/styles/singulink.js b/docfx/templates/singulinkfx/styles/singulink.js
new file mode 100644
index 000000000..40b0d0b41
--- /dev/null
+++ b/docfx/templates/singulinkfx/styles/singulink.js
@@ -0,0 +1,51 @@
+// 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.offsetWidth + "px";
+        blackout.classList.remove("showThat");
+        blackout.classList.add("hideThat");
+    } 
+    else 
+    {
+        sidebar.style.left = "0px";
+        blackout.classList.remove("hideThat");
+        blackout.classList.add("showThat");
+    }
+}
+
+$(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 .sidebar-item.active:last')[0]
+    
+        if (activeTocItem) {
+            activeTocItem.scrollIntoView({ block: "center" });
+        }
+        else{
+            setTimeout(scrollToc, 500);
+        }
+    }
+
+    setTimeout(scrollToc, 500);
+});
\ No newline at end of file
diff --git a/docfx/templates/singulinkfx/styles/url.min.js b/docfx/templates/singulinkfx/styles/url.min.js
new file mode 100644
index 000000000..8057e0aa0
--- /dev/null
+++ b/docfx/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/docfx/templates/singulinkfx/toc.html.tmpl b/docfx/templates/singulinkfx/toc.html.tmpl
new file mode 100644
index 000000000..6549e62e7
--- /dev/null
+++ b/docfx/templates/singulinkfx/toc.html.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>
\ No newline at end of file
