further docs changes

- updated docs assets
- added yarn install info
- overhauled color parts in layout.md
- added components/main-sidebar, /control-sidebar & /cards
- updated title in components/main-header
- created blank pages javascript/control-sidebar& /push-menu to ensure docs generation
- renamed Sidebar to Main Sidebar

docs/_config.yml

@@ -42,8 +42,8 @@ navigation:
   subitems: 
     - title: Main Header
       url: components/main-header.html
-    - title: Sidebar
-      url: components/sidebar.html
+    - title: Main Sidebar
+      url: components/main-sidebar.html
     - title: Control Sidebar
       url: components/control-sidebar.html
     - title: Card

docs/components/cards.md

+---
+layout: page
+title: Cards Component
+---
+
+The card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.
+
+##### Default Card Markup
+{: .text-bold .text-dark .mt-5}
+
+
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Default Card Example</h3>
+    <div class="card-tools">
+      <span class="badge badge-primary">Label</span>
+    </div>
+  </div>
+  <div class="card-body">
+    The body of the card
+  </div>
+  <div class="card-footer">
+    The footer of the card
+  </div>
+</div>
+
+```html
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Default Card Example</h3>
+    <div class="card-tools">
+      <!-- Buttons, labels, and many other things can be placed here! -->
+      <!-- Here is a label for example -->
+      <span class="badge badge-primary">Label</span>
+    </div>
+    <!-- /.card-tools -->
+  </div>
+  <!-- /.card-header -->
+  <div class="card-body">
+    The body of the card
+  </div>
+  <!-- /.card-body -->
+  <div class="card-footer">
+    The footer of the card
+  </div>
+  <!-- /.card-footer -->
+</div>
+<!-- /.card -->
+```
+{: .max-height-300}
+
+##### Card Variants
+{: .text-bold .text-dark .mt-5}
+You can change the style of the box by adding any of the contextual classes.
+
+<div class="row">
+  <div class="col-sm-3">
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Default Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-primary">
+      <div class="card-header">
+        <h3 class="card-title">Primary Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-secondary">
+      <div class="card-header">
+        <h3 class="card-title">Secondary Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-success">
+      <div class="card-header">
+        <h3 class="card-title">Success Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-sm-3">
+    <div class="card card-info">
+      <div class="card-header">
+        <h3 class="card-title">Info Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-warning">
+      <div class="card-header">
+        <h3 class="card-title">Warning Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-danger">
+      <div class="card-header">
+        <h3 class="card-title">Danger Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-dark">
+      <div class="card-header">
+        <h3 class="card-title">Dark Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="card">...</div>
+<div class="card card-primary">...</div>
+<div class="card card-secondary">...</div>
+<div class="card card-success">...</div>
+<div class="card card-info">...</div>
+<div class="card card-warning">...</div>
+<div class="card card-danger">...</div>
+<div class="card card-dark">...</div>
+```
+
+
+<div class="row">
+  <div class="col-sm-3">
+    <div class="card card-outline">
+      <div class="card-header">
+        <h3 class="card-title">Default Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-outline card-primary">
+      <div class="card-header">
+        <h3 class="card-title">Primary Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-outline card-secondary">
+      <div class="card-header">
+        <h3 class="card-title">Secondary Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-outline card-success">
+      <div class="card-header">
+        <h3 class="card-title">Success Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-sm-3">
+    <div class="card card-outline card-info">
+      <div class="card-header">
+        <h3 class="card-title">Info Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-outline card-warning">
+      <div class="card-header">
+        <h3 class="card-title">Warning Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-outline card-danger">
+      <div class="card-header">
+        <h3 class="card-title">Danger Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="card card-outline card-dark">
+      <div class="card-header">
+        <h3 class="card-title">Dark Card Example</h3>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+      <div class="card-footer">
+        The footer of the card
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="card card-outline card-primary">...</div>
+<div class="card card-outline card-secondary">...</div>
+<div class="card card-outline card-success">...</div>
+<div class="card card-outline card-info">...</div>
+<div class="card card-outline card-warning">...</div>
+<div class="card card-outline card-danger">...</div>
+<div class="card card-outline card-dark">...</div>
+```

docs/components/control-sidebar.md

+---
+layout: page
+title: Control Sidebar Component
+---
+
+Control sidebar is the right sidebar. It can be used for many purposes and is extremely easy to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to slide over the content. The second pushes the content to make space for the sidebar. Either of these methods can be set through the [Javascript options]({% link javascript/control-sidebar.md %}). 
+
+The following code should be placed within the `.wrapper` div. I prefer to place it right after the footer.
+
+##### Dark Sidebar Markup
+{: .text-bold .text-dark}
+```html
+  <!-- Control Sidebar -->
+  <aside class="control-sidebar control-sidebar-dark">
+    <!-- Control sidebar content goes here -->
+    <div class="p-3">
+      <!-- Content of the sidebar goes here -->
+    </div>
+  </aside>
+  <!-- /.control-sidebar -->
+```
+
+##### Light Sidebar Markup
+{: .text-bold .text-dark .mt-5}
+```html
+  <!-- Control Sidebar -->
+  <aside class="control-sidebar control-sidebar-light">
+    <!-- Control sidebar content goes here -->
+    <div class="p-3">
+      <!-- Content of the sidebar goes here -->
+    </div>
+  </aside>
+  <!-- /.control-sidebar -->
+```
+
+##### Control Sidebar Toggle Markup
+{: .text-bold .text-dark .mt-5}
+Once you create the sidebar, you will need a toggle button to open/close it. By adding the attribute data-toggle="control-sidebar" to any button, it will automatically act as the toggle button. 
+
+```html
+<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">Toggle Control Sidebar</a>
+```

docs/components/main-header.md

 ---
 layout: page
-title: Main Header
+title: Main Header Component
 ---
 
 > ##### Reminder!

docs/components/main-sidebar.md

+---
+layout: page
+title: Main Sidebar Component
+---
+
+The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar: 
+
+```html
+  <!-- Main Sidebar Container -->
+  <aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <!-- Brand Logo -->
+    <a href="index3.html" class="brand-link">
+      <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
+           style="opacity: .8">
+      <span class="brand-text font-weight-light">AdminLTE 3</span>
+    </a>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <!-- Sidebar user panel (optional) -->
+      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+        <div class="image">
+          <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
+        </div>
+        <div class="info">
+          <a href="#" class="d-block">Alexander Pierce</a>
+        </div>
+      </div>
+
+      <!-- Sidebar Menu -->
+      <nav class="mt-2">
+        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
+          <!-- Add icons to the links using the .nav-icon class
+               with font-awesome or any other icon font library -->
+          <li class="nav-item has-treeview menu-open">
+            <a href="#" class="nav-link active">
+              <i class="nav-icon fas fa-tachometer-alt"></i>
+              <p>
+                Starter Pages
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link active">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Active Page</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Inactive Page</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-th"></i>
+              <p>
+                Simple Link
+                <span class="right badge badge-danger">New</span>
+              </p>
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <!-- /.sidebar-menu -->
+    </div>
+    <!-- /.sidebar -->
+  </aside>
+```
+{: .max-height-300}
+
+For more infromation about the JS part of the sidebar, please visit the [PushMenu plugin page]({% link javascript/push-menu.md %})

docs/index.md

@@ -18,6 +18,11 @@ Visit the releases section on Github and download the [latest release](https://g
 npm install admin-lte --save
 ```
 
+###### __Via Yarn__
+```bash
+npm add admin-lte
+```
+
 ###### __Via Bower__
 ```bash
 bower install admin-lte

docs/javascript/control-sidebar.md

+---
+layout: page
+title: Control Sidebar Plugin
+---

docs/javascript/push-menu.md

+---
+layout: page
+title: Push Menu Plugin
+---

docs/layout.md

@@ -34,37 +34,43 @@ AdminLTE 3.0 provides a set of options to apply to your main layout. Each one of
 
 AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light & dark) & navbar. You can combine any available color with these class prefixes:
 
-- navbar-*
-- sidebar-dark-*
-- sidebar-light-*
+- `.navbar-*`
+- `.sidebar-dark-*`
+- `.sidebar-light-*`
 
 > ###### Info
-> You can combine navbar-* with navbar-light or navbar-dark.
+> You can combine `.navbar-*` with `.navbar-light` or `.navbar-dark`.
 
 The following colors are available:
 
+##### Theme Colors
+<div class="row">
+  <div class="col-sm-4 col-lg-3 p-3 bg-primary"> Primary (primary) / Blue (blue)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-secondary"> Secondary (secondary) / Gray (gray)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-success"> Success (success) / Green (green)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-info"> Info (info) / Cyan (cyan)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-warning"> Warning (warning) / Yellow (yellow)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-danger"> Danger (danger) / Red (red)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-light"> Light (light)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-dark"> Dark (dark) / Gray Dark (gray-dark)</div>
+</div>
 
+##### Colors
+{: .mt-4}
 <div class="row">
-  <div class="col-sm-6">
-    <ul>
-      <li><i class="fas fa-square-full text-primary fa-lg"></i> Primary (primary) / Blue (blue)</li>
-      <li><i class="fas fa-square-full text-secondary fa-lg"></i> Secondary (secondary) / Gray (gray)</li>
-      <li><i class="fas fa-square-full text-success fa-lg"></i> Success (success) / Green (green)</li>
-      <li><i class="fas fa-square-full text-info fa-lg"></i> Info (info) / Cyan (cyan)</li>
-      <li><i class="fas fa-square-full text-warning fa-lg"></i> Warning (warning) / Yellow (yellow)</li>
-      <li><i class="fas fa-square-full text-danger fa-lg"></i> Danger (danger) / Red (red)</li>
-      <li><i class="fas fa-square-full text-light fa-lg"></i> Light (light)</li>
-      <li><i class="fas fa-square-full text-dark fa-lg"></i> Dark (dark) / Gray Dark (gray-dark)</li>
-    </ul>
-  </div>
-  <div class="col-sm-6">
-    <ul>
-      <li><i class="fas fa-square-full text-indigo fa-lg"></i> Indigo (indigo)</li>
-      <li><i class="fas fa-square-full text-purple fa-lg"></i> Purple (purple)</li>
-      <li><i class="fas fa-square-full text-pink fa-lg"></i> Pink (pink)</li>
-      <li><i class="fas fa-square-full text-orange fa-lg"></i> Orange (orange)</li>
-      <li><i class="fas fa-square-full text-teal fa-lg"></i> Teal (teal)</li>
-      <li><i class="fas fa-square-full text-white fa-lg"></i> White (white)</li>
-    </ul>
-  </div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-indigo"> Indigo (indigo)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-navy"> Navy (navy)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-purple"> Purple (purple)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-fuchsia"> Fuchsia (fuchsia)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-pink"> Pink (pink)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-maroon"> Maroon (maroon)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-orange"> Orange (orange)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-lime"> Lime (lime)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-teal"> Teal (teal)</div>
+  <div class="col-sm-4 col-lg-3 p-3 bg-olive"> Olive (olive)</div>
 </div>
+
+> ##### Tip!
+> You can use these color variations even with `.text-*`, `.bg-*` & much more.
+{: .quote-info}
+