Quick Start
Fresh Start
To start from scratch using our template, first download Mono Dashboard from latest release. 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:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Mono Starter - Admin Dashboard Template</title> <!-- FONTS and ICONS --> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet" /> <link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" /> <!-- MONO STYLE FILE --> <link id="mono-css" rel="stylesheet" href="css/mono.min.css" /> </head> <body id="body"> <div>Hello World!</div> <script src="plugins/jquery/jquery.min.js"></script> <script src="plugins/slimscrollbar/jquery.slimscroll.min.js"></script> <script src="js/mono.bundle.js"></script> </body> </html>
NPM
If you want to use Mono Dashboard from npm package run following command in your terminal.
npm i mono-dashboard --save
Existing Project
Looking to quickly add Mono Dashboard to your existing project? Use following CDN links.
CSS
Copy-paste the stylesheet link
just before closing head
tag.
<link href="https://unpkg.com/mono-dashboard/dist/assets/css/mono.min.css" rel="stylesheet">
JS
Place the following script
near the end of your pages, right before the closing body
tag.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/mono-dashboard/dist/assets/js/mono.bundle.js"></script>