added new docs pages

- components/direct-chat
- browser-support
- implementations
- faq
- license

docs/browser-support.md

@@ -0,0 +1,28 @@
+---
+layout: page
+title: Browser Support
+---
+
+AdminLTE comes with the same browser support as Bootstrap 4.
+
+> ##### Excerpt from Bootstrap's official Documentation!
+> Bootstrap supports the __latest, stable releases__ of all major browsers and platforms. On Windows, __we support Internet Explorer 10-11 / Microsoft Edge__.
+>
+> For more details [look here](https://getbootstrap.com/docs/4.3/getting-started/browsers-devices/#supported-browsers).
+
+You can find our supported range of browsers and their versions in [our .browserslistrc file](https://github.com/ColorlibHQ/AdminLTE/blob/v3-dev/.browserslistrc):
+```
+# https://github.com/browserslist/browserslist#readme
+
+>= 1%
+last 1 major version
+not dead
+Chrome >= 45
+Firefox >= 38
+Edge >= 12
+Explorer >= 10
+iOS >= 9
+Safari >= 9
+Android >= 4.4
+Opera >= 30
+```

docs/components/direct-chat.md

@@ -0,0 +1,807 @@
+---
+layout: page
+title: Direct Chat Components
+---
+
+The direct chat widget extends the card component to create a beautiful chat interface. This widget consists of a required messages pane and an __optional__ contacts pane. Examples:
+
+<div class="row">
+  <div class="col-md-6">
+    <div class="card card-primary direct-chat direct-chat-primary">
+      <div class="card-header">
+        <h3 class="card-title">Direct Chat</h3>
+        <div class="card-tools">
+          <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
+          <button type="button" class="btn btn-tool" data-widget="collapse">
+            <i class="fas fa-minus"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+            <i class="fas fa-comments"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="direct-chat-messages">
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Is this template really for free? That's unbelievable!
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              You better believe it!
+            </div>
+          </div>
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Working with AdminLTE on a great new app! Wanna join?
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              I would love to.
+            </div>
+          </div>
+        </div>
+        <!--/.direct-chat-messages-->
+        <div class="direct-chat-contacts">
+          <ul class="contacts-list">
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Count Dracula
+                    <small class="contacts-list-date float-right">2/28/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">How have you been? I was...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Sarah Doe
+                    <small class="contacts-list-date float-right">2/23/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I will be waiting for...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nadia Jolie
+                    <small class="contacts-list-date float-right">2/20/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I'll call you back at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nora S. Vans
+                    <small class="contacts-list-date float-right">2/10/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Where is your new...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    John K.
+                    <small class="contacts-list-date float-right">1/27/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Can I take a look at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Kenneth M.
+                    <small class="contacts-list-date float-right">1/4/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Never mind I found...</span>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-footer">
+        <form action="#" method="post">
+          <div class="input-group">
+            <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+            <span class="input-group-append">
+              <button type="button" class="btn btn-primary">Send</button>
+            </span>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card card-danger direct-chat direct-chat-danger">
+      <div class="card-header">
+        <h3 class="card-title">Direct Chat</h3>
+        <div class="card-tools">
+          <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
+          <button type="button" class="btn btn-tool" data-widget="collapse">
+            <i class="fas fa-minus"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+            <i class="fas fa-comments"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="direct-chat-messages">
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Is this template really for free? That's unbelievable!
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              You better believe it!
+            </div>
+          </div>
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Working with AdminLTE on a great new app! Wanna join?
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              I would love to.
+            </div>
+          </div>
+        </div>
+        <!--/.direct-chat-messages-->
+        <div class="direct-chat-contacts">
+          <ul class="contacts-list">
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Count Dracula
+                    <small class="contacts-list-date float-right">2/28/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">How have you been? I was...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Sarah Doe
+                    <small class="contacts-list-date float-right">2/23/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I will be waiting for...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nadia Jolie
+                    <small class="contacts-list-date float-right">2/20/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I'll call you back at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nora S. Vans
+                    <small class="contacts-list-date float-right">2/10/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Where is your new...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    John K.
+                    <small class="contacts-list-date float-right">1/27/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Can I take a look at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Kenneth M.
+                    <small class="contacts-list-date float-right">1/4/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Never mind I found...</span>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-footer">
+        <form action="#" method="post">
+          <div class="input-group">
+            <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+            <span class="input-group-append">
+              <button type="button" class="btn btn-primary">Send</button>
+            </span>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<!-- Construct the card with style you want. Here we are using card-danger -->
+<!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
+<!-- The contextual class should match the card, so we are using direct-chat-danger -->
+<div class="card card-danger direct-chat direct-chat-danger">
+  <div class="card-header">
+    <h3 class="card-title">Direct Chat</h3>
+    <div class="card-tools">
+      <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
+      <button type="button" class="btn btn-tool" data-widget="collapse">
+        <i class="fas fa-minus"></i>
+      </button>
+      <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+        <i class="fas fa-comments"></i>
+      </button>
+      <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+      </button>
+    </div>
+  </div>
+  <!-- /.card-header -->
+  <div class="card-body">
+    <!-- Conversations are loaded here -->
+    <div class="direct-chat-messages">
+      <!-- Message. Default to the left -->
+      <div class="direct-chat-msg">
+        <div class="direct-chat-infos clearfix">
+          <span class="direct-chat-name float-left">Alexander Pierce</span>
+          <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
+        </div>
+        <!-- /.direct-chat-infos -->
+        <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+        <!-- /.direct-chat-img -->
+        <div class="direct-chat-text">
+          Is this template really for free? That's unbelievable!
+        </div>
+        <!-- /.direct-chat-text -->
+      </div>
+      <!-- /.direct-chat-msg -->
+      <!-- Message to the right -->
+      <div class="direct-chat-msg right">
+        <div class="direct-chat-infos clearfix">
+          <span class="direct-chat-name float-right">Sarah Bullock</span>
+          <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
+        </div>
+        <!-- /.direct-chat-infos -->
+        <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+        <!-- /.direct-chat-img -->
+        <div class="direct-chat-text">
+          You better believe it!
+        </div>
+        <!-- /.direct-chat-text -->
+      </div>
+      <!-- /.direct-chat-msg -->
+      <!-- Message. Default to the left -->
+      <div class="direct-chat-msg">
+        <div class="direct-chat-infos clearfix">
+          <span class="direct-chat-name float-left">Alexander Pierce</span>
+          <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
+        </div>
+        <!-- /.direct-chat-infos -->
+        <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+        <!-- /.direct-chat-img -->
+        <div class="direct-chat-text">
+          Working with AdminLTE on a great new app! Wanna join?
+        </div>
+        <!-- /.direct-chat-text -->
+      </div>
+      <!-- /.direct-chat-msg -->
+      <!-- Message to the right -->
+      <div class="direct-chat-msg right">
+        <div class="direct-chat-infos clearfix">
+          <span class="direct-chat-name float-right">Sarah Bullock</span>
+          <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
+        </div>
+        <!-- /.direct-chat-infos -->
+        <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+        <!-- /.direct-chat-img -->
+        <div class="direct-chat-text">
+          I would love to.
+        </div>
+        <!-- /.direct-chat-text -->
+      </div>
+      <!-- /.direct-chat-msg -->
+    </div>
+    <!--/.direct-chat-messages-->
+    <!-- Contacts are loaded here -->
+    <div class="direct-chat-contacts">
+      <ul class="contacts-list">
+        <li>
+          <a href="#">
+            <img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}">
+            <div class="contacts-list-info">
+              <span class="contacts-list-name">
+                Count Dracula
+                <small class="contacts-list-date float-right">2/28/2015</small>
+              </span>
+              <span class="contacts-list-msg">How have you been? I was...</span>
+            </div>
+            <!-- /.contacts-list-info -->
+          </a>
+        </li>
+        <!-- End Contact Item -->
+        <li>
+          <a href="#">
+            <img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}">
+            <div class="contacts-list-info">
+              <span class="contacts-list-name">
+                Sarah Doe
+                <small class="contacts-list-date float-right">2/23/2015</small>
+              </span>
+              <span class="contacts-list-msg">I will be waiting for...</span>
+            </div>
+            <!-- /.contacts-list-info -->
+          </a>
+        </li>
+        <!-- End Contact Item -->
+        <li>
+          <a href="#">
+            <img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}">
+            <div class="contacts-list-info">
+              <span class="contacts-list-name">
+                Nadia Jolie
+                <small class="contacts-list-date float-right">2/20/2015</small>
+              </span>
+              <span class="contacts-list-msg">I'll call you back at...</span>
+            </div>
+            <!-- /.contacts-list-info -->
+          </a>
+        </li>
+        <!-- End Contact Item -->
+        <li>
+          <a href="#">
+            <img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}">
+            <div class="contacts-list-info">
+              <span class="contacts-list-name">
+                Nora S. Vans
+                <small class="contacts-list-date float-right">2/10/2015</small>
+              </span>
+              <span class="contacts-list-msg">Where is your new...</span>
+            </div>
+            <!-- /.contacts-list-info -->
+          </a>
+        </li>
+        <!-- End Contact Item -->
+        <li>
+          <a href="#">
+            <img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}">
+            <div class="contacts-list-info">
+              <span class="contacts-list-name">
+                John K.
+                <small class="contacts-list-date float-right">1/27/2015</small>
+              </span>
+              <span class="contacts-list-msg">Can I take a look at...</span>
+            </div>
+            <!-- /.contacts-list-info -->
+          </a>
+        </li>
+        <!-- End Contact Item -->
+        <li>
+          <a href="#">
+            <img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}">
+            <div class="contacts-list-info">
+              <span class="contacts-list-name">
+                Kenneth M.
+                <small class="contacts-list-date float-right">1/4/2015</small>
+              </span>
+              <span class="contacts-list-msg">Never mind I found...</span>
+            </div>
+            <!-- /.contacts-list-info -->
+          </a>
+        </li>
+        <!-- End Contact Item -->
+      </ul>
+      <!-- /.contacts-list -->
+    </div>
+    <!-- /.direct-chat-pane -->
+  </div>
+  <!-- /.card-body -->
+  <div class="card-footer">
+    <form action="#" method="post">
+      <div class="input-group">
+        <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+        <span class="input-group-append">
+          <button type="button" class="btn btn-primary">Send</button>
+        </span>
+      </div>
+    </form>
+  </div>
+  <!-- /.card-footer-->
+</div>
+<!--/.direct-chat -->
+```
+{: .max-height-300}
+
+##### Outline Direct Chat
+{: .text-bold .text-dark .mt-5}
+
+Of course you can use direct chat with a outline card by adding the class `.card-outline` to the card. Here are a couple of examples: 
+
+<div class="row">
+  <div class="col-md-6">
+    <div class="card card-primary card-outline direct-chat direct-chat-primary">
+      <div class="card-header">
+        <h3 class="card-title">Direct Chat</h3>
+        <div class="card-tools">
+          <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
+          <button type="button" class="btn btn-tool" data-widget="collapse">
+            <i class="fas fa-minus"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+            <i class="fas fa-comments"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="direct-chat-messages">
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Is this template really for free? That's unbelievable!
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              You better believe it!
+            </div>
+          </div>
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Working with AdminLTE on a great new app! Wanna join?
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              I would love to.
+            </div>
+          </div>
+        </div>
+        <!--/.direct-chat-messages-->
+        <div class="direct-chat-contacts">
+          <ul class="contacts-list">
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Count Dracula
+                    <small class="contacts-list-date float-right">2/28/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">How have you been? I was...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Sarah Doe
+                    <small class="contacts-list-date float-right">2/23/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I will be waiting for...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nadia Jolie
+                    <small class="contacts-list-date float-right">2/20/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I'll call you back at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nora S. Vans
+                    <small class="contacts-list-date float-right">2/10/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Where is your new...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    John K.
+                    <small class="contacts-list-date float-right">1/27/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Can I take a look at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Kenneth M.
+                    <small class="contacts-list-date float-right">1/4/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Never mind I found...</span>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-footer">
+        <form action="#" method="post">
+          <div class="input-group">
+            <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+            <span class="input-group-append">
+              <button type="button" class="btn btn-primary">Send</button>
+            </span>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="card card-danger card-outline direct-chat direct-chat-danger">
+      <div class="card-header">
+        <h3 class="card-title">Direct Chat</h3>
+        <div class="card-tools">
+          <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span>
+          <button type="button" class="btn btn-tool" data-widget="collapse">
+            <i class="fas fa-minus"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">
+            <i class="fas fa-comments"></i>
+          </button>
+          <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="direct-chat-messages">
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Is this template really for free? That's unbelievable!
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              You better believe it!
+            </div>
+          </div>
+          <div class="direct-chat-msg">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-left">Alexander Pierce</span>
+              <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              Working with AdminLTE on a great new app! Wanna join?
+            </div>
+          </div>
+          <div class="direct-chat-msg right">
+            <div class="direct-chat-infos clearfix">
+              <span class="direct-chat-name float-right">Sarah Bullock</span>
+              <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
+            </div>
+            <img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
+            <div class="direct-chat-text">
+              I would love to.
+            </div>
+          </div>
+        </div>
+        <!--/.direct-chat-messages-->
+        <div class="direct-chat-contacts">
+          <ul class="contacts-list">
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Count Dracula
+                    <small class="contacts-list-date float-right">2/28/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">How have you been? I was...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Sarah Doe
+                    <small class="contacts-list-date float-right">2/23/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I will be waiting for...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nadia Jolie
+                    <small class="contacts-list-date float-right">2/20/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">I'll call you back at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Nora S. Vans
+                    <small class="contacts-list-date float-right">2/10/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Where is your new...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    John K.
+                    <small class="contacts-list-date float-right">1/27/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Can I take a look at...</span>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}">
+                <div class="contacts-list-info">
+                  <span class="contacts-list-name">
+                    Kenneth M.
+                    <small class="contacts-list-date float-right">1/4/2015</small>
+                  </span>
+                  <span class="contacts-list-msg">Never mind I found...</span>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="card-footer">
+        <form action="#" method="post">
+          <div class="input-group">
+            <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+            <span class="input-group-append">
+              <button type="button" class="btn btn-primary">Send</button>
+            </span>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

docs/faq.md

@@ -0,0 +1,15 @@
+---
+layout: page
+title: FAQ
+---
+
+#### Can AdminLTE be used with Wordpress?
+AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.
+
+#### Is there an integration guide for PHP frameworks such as Yii or Symfony?
+Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
+
+<!---
+#### How do I get notified of new AdminLTE versions?
+The best option is to subscribe to our mailing list using the [subscription form on Almsaeed Studio](http://almsaeedstudio.com/#subscribe). If that's not appealing to you, you may watch the [repository on Github](https://github.com/almasaeed2010/AdminLTE) or visit [Almsaeed Studio](http://almsaeedstudio.com) every now and then for updates and announcements.
+--->

docs/implementations.md

@@ -0,0 +1,32 @@
+---
+layout: page
+title: Implementations
+---
+
+Thanks to many of AdminLTE users, there are multiple implementations of the template for easy integration with back-end frameworks. The following are some of them: 
+
+
+##### AdminLTE v2.4
+{: .text-bold .text-dark .mt-3}
+- [Laravel-AdminLTE](https://github.com/jeroennoten/Laravel-AdminLTE) by [Jeroen Noten](https://github.com/jeroennoten)
+- [Laravel 5 package](https://github.com/acacha/adminlte-laravel) by [Sergi Tur Badenas](https://github.com/acacha)
+- [Yii 2](https://github.com/dmstr/yii2-adminlte-asset) by [Tobias Munk](https://github.com/schmunk42)
+
+##### AdminLTE v2.3
+{: .text-bold .text-dark .mt-3}
+- [Symfony](https://github.com/avanzu/AdminThemeBundle) by [Marc Bach](https://github.com/avanzu)
+- [lte-rails](https://github.com/racketlogger/lte-rails) by [Carlos at RacketLogger](https://github.com/racketlogger)
+
+##### AdminLTE v2.2
+{: .text-bold .text-dark .mt-3}
+- [Persian RTL](https://github.com/mmdsharifi/AdminLTE-RTL) by [Mohammad Sharifi](https://github.com/mmdsharifi)
+
+##### AdminLTE v2.1
+{: .text-bold .text-dark .mt-3}
+- [adminlte2-rails](https://github.com/nicolas-besnard/adminlte2-rails) by [Nicolas Besnard](https://github.com/nicolas-besnard)
+
+
+
+> ##### Note!
+> These implementations are not supported by ColorlibHQ. However, they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release of AdminLTE, please visit our [repository](https://github.com/ColorlibHQ/AdminLTE/) or [website](https://adminlte.io).
+{: .quote-danger}

docs/license.md

@@ -0,0 +1,20 @@
+---
+layout: page
+title: License
+---
+
+AdminLTE is an open source project that is licensed under the [MIT license](http://opensource.org/licenses/MIT). This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." Attribution is not required (though very much appreciated).
+
+<h5 class="text-bold text-dark mt-3">What You Are <span class="text-success">Allowed</span> To Do With AdminLTE</h5>
+- Use in commercial projects.
+- Use in personal/private projects.
+- Modify and change the work.
+- Distribute the code.
+- Sublicense: incorporate the work into something that has a more restrictive license.
+
+<h5 class="text-bold text-dark mt-3">What You Are <span class="text-danger">Not Allowed</span> To Do With AdminLTE</h5>
+- The work is provided "as is". You may not hold the author liable.
+
+<h5 class="text-bold text-dark mt-3">What You <span class="text-warning">Must</span> Do When Using AdminLTE</h5>
+- Include the license notice in all copies of the work.
+- Include the copyright notice in all copies of the work. This applies to everything except the notice in the footer of the HTML example pages.