layout manager init

js/app/layout-manager.js

+'use strict';
+
+class TablerLayoutManager {
+  static init() {
+    this.elem = document.getElementById('layout-manager');
+
+    if(this.elem) {
+      this.renderHtml();
+    }
+  }
+
+  static renderHtml() {
+    this.elem.innerHTML = 'test';
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  TablerLayoutManager.init();
+});

pages/_includes/layout/homepage.html

@@ -102,13 +102,13 @@
       {% include cards/small-stats-3.html number=621 title="Products" percentage=-1 %}
    </div>
 
-   <div class="col-4">
+   <div class="col-md-4">
       {% include cards/charts/card.html name="temperature" title="A" height=12 %}
    </div>
-   <div class="col-4">
+   <div class="col-md-4">
       {% include cards/charts/card.html name="donut" title="B" height=12 %}
    </div>
-   <div class="col-4">
+   <div class="col-md-4">
       {% include cards/charts/card.html name="pie" title="C" height=12 %}
    </div>
 

pages/_includes/layout/js.html

@@ -10,6 +10,7 @@
 
 <script src="{{ site.base }}/js/tabler.js"></script>
 <script src="{{ site.base }}/js/app/charts.js"></script>
+<script src="{{ site.base }}/js/app/layout-manager.js"></script>
 
 <script>
    window.tabler = window.tabler || {};

pages/layout.html

+---
+title: Layout manager
+---
+
+<div class="card">
+   <div class="card-header">
+      Layout manager
+   </div>
+   <div class="card-body">
+      <form action="">
+         <div class="row">
+            <div class="col-4">
+               <div id="layout-manager"></div>
+            </div>
+         </div>
+      </form>
+   </div>
+</div>

scss/layout/_navbar.scss

@@ -212,6 +212,11 @@ Fixed navbar
     margin-left: $sidenav-width;
   }
 
+  &.navbar-right + .layout-main {
+    margin-left: 0;
+    margin-right: $sidenav-width;
+  }
+
   &.navbar-folded + .layout-main {
     margin-left: $sidenav-folded-width;
   }

scss/ui/_cards.scss

@@ -89,7 +89,7 @@
 
 .card-title {
   display: block;
-  font-size: $h3-font-size;
+  font-size: $h4-font-size;
   font-weight: 500;
   margin: 0 0 1.5rem;
   line-height: 1;