sleek-dashboard/src/quick-start.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

---
layout: default
title: "Sleek - Admin Dashboard Template"


parent: "documentation"
sub_parent: ""
activePage: "quick-start"
plugins: []
---

                <div class="row">
                  <div class="col-lg-12">
                    <div class="card card-default text-dark">
                      <div class="card-header">
                        <h1>Quick Start</h1>
                      </div>
                      <div class="card-body pt-4">
                        <h2 class="mt-2 mb-2">Fresh Start</h2>
                        <p>To start from scratch using our template, first download <em>Sleek Dashboard</em> from <a href="https://github.com/tafcoder/sleek-dashboard/releases">latest release</a>. Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype
                          and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like
                          this:</p>
<pre class="mt-4">

&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;

  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;

    &lt;title&gt;Sleek Starter - Admin Dashboard Template&lt;/title&gt;

    &lt;!-- FONTS and ICONS --&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500"
    rel="stylesheet" /&gt;
    &lt;link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" /&gt;

    &lt;!-- SLEEK STYLE FILE --&gt;
    &lt;link id="sleek-css" rel="stylesheet" href="assets/css/sleek.min.css" /&gt;

  &lt;/head&gt;

  &lt;body id="body"&gt;

    &lt;div&gt;Hello World!&lt;/div&gt;

    &lt;script src="assets/plugins/jquery/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/plugins/slimscrollbar/jquery.slimscroll.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/sleek.bundle.js"&gt;&lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;

</pre>
                        <h2 class="mt-5 mb-2">NPM</h2>
                        <p>If you want to use <em>Sleek Dashboard</em> from npm package run following command in your terminal.</p>
<pre class="mt-4">
<code>npm i sleek-dashboard --save</code>
</pre>
                        <h2 class="mt-5 mb-2">Existing Project</h2>
                        <p>Looking to quickly add <em>Sleek Dashboard</em> to your existing project? Use following CDN links.</p>

                        <h3 class="mt-4 mb-2">CSS</h3>
                        <p>Copy-paste the stylesheet <code>link</code> just before closing <code>head</code> tag.</p>
<pre class="mt-4">
<code>&lt;link href="https://unpkg.com/sleek-dashboard/dist/assets/css/sleek.min.css" rel="stylesheet"&gt;</code>
</pre>
                        <h3 class="mt-4 mb-2">JS</h3>
                        <p>Place the following <code>script</code> near the end of your pages, right before the closing <code> body</code> tag.</p>
<pre class="mt-4">
<code>&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;</code>
<code>&lt;script src="https://unpkg.com/sleek-dashboard/dist/assets/js/sleek.bundle.js"&gt;&lt;/script&gt;</code>
</pre>

                      <div class="mt-5">
                        <a class="btn btn-square btn-primary float-left" href="/introduction.html"><i class="mdi mdi-chevron-left"></i> Introduction</a>
                        <a class="btn btn-square btn-primary float-right" href="/customization.html">Customization <i class="mdi mdi-chevron-right"></i></a>
                      </div>


                      </div>
                    </div>
                  </div>
                </div>