Dashto - Powerfull Admin Template

Introduction

Much thanks to you such a great amount for acquiring this Template. You will get all the data in regards to Dashto here in this documentation. If there's still any issue, you can get in touch with us through our profile page at Themeforest here, or don't hesitate to reach us through our email. And you have a more broad inquiry identifying with the Template on ThemeForest, you should think about going to the gatherings and making your inquiry in the "Item Discussion" segment.

For utilizing this Template, you would require fundamental comprehension of HTML, CSS and Javascript, if you don't mind give your inquiry a brisk Google or visit W3Schools as topic issues get top need.

Project Structure

The following is the structure how the project is arranged. Click on the folder items below to check the sub folder items.

File Structure

dist
src
- apps
- assets
- components
- ecommerce
- pages
- analytics.html
- demography.html
- hospital.html
- index.html
- restaurant.html
gulpfile.js
package.json

Tools and Installation on Local Server

You need a couple of tools to work with the template, basically this template made using Gulp so you can get a dist/ folder after build a gulp. You can use this folder to upload on your server.

Node.js
For influencing utilization of this template to genuine power you'll require Gulp, and for Gulp you'll require Node.js to be installed on your system. Download the most recent rendition of Node.js from here
Gulp
After installing Node.js, you need to install Gulp on your system. Run this command in Terminal/CMD of your system: npm install -g gulp
Install Modules of the template
Open Terminal/CMD in the template folder and run this command : npm install. This command will install the tools required for this template, for example build tools like SASS Compiler, Autoprefixer etc.
Running the environment
To start working with the template, just open Terminal/CMD in the template folder and run gulp watch. This will start the work environment for you. Now you can edit the template in the Code Editor of your choice.
Making Distribution Folder
To make deployable template, just open Terminal/CMD in the template folder and run this command : gulp build. This will generate dist/ folder in your template directory. You can directly upload this folder to your server.

Installation

Dashto is a static HTML Template so you needn't bother with much introducing on the server-side. Simply upload the /dist folder to your server and you make them run.

HTML Structure


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- Meta Tag -->
        <meta charset="utf-8">
        ...

        <title>Dashto - Powerfull Admin Template</title>

        <!-- Favicon -->
        <link href="..." rel="icon" />

        <!-- Styles -->
        <link href="..." rel="stylesheet" type="text/css" />
        ...
    </head>
    <body>
        <!-- Begin | Page Loader [[ Find in loader.scss ]] -->
        <div id="loader">...</div>
        <!-- End | Page Loader -->

        <!-- Begin | Page Wrapper [[ Find in core.scss ]] -->
        <div id="wrapper">
            <!-- Begin | Header [[ Find in header.scss ]] -->
            <header id="header">...</header>
            <!-- End | Header -->

            <!-- Begin | Sidebar [[ Find in sidebar.scss ]] -->
            <aside id="sidebar">...</aside>
            <!-- End | Sidebar -->

            <!-- Begin | Page Content Wrapper [[ Find in core.scss ]] -->
            <main id="page-wrapper">...</main>
            <!-- End | Page Content Wrapper -->
        </div>
        <!-- End | Page Wrapper -->

        <script src="...">...</script>
    </body>
    </html>

Theme Option

We have provided a bunch of page layouts and menu layouts that can be implemented with just a class change to body! Please refer the below table for corresponding classes.

Note: We have also add new layouts option in future.

Layout	Class
Theme colors	.theme-*(blue, green,...)
Dark sidebar	.theme-dark
Compact menu	.js-mini-sidebar

Navbar


    <!-- Begin | Sidebar Navigation [[ Find in navbar.scss ]] -->
    <nav id="sidebar-nav">
        <ul>
            <li class="nav-head">...<li>
            <li>
                <a href="javascript:void(0);" class="sub-nav">...</a>
                <ul class="sub-nav-item">...</ul>
            <li>
            <li>
                <a href="...">...</a>
            <li>
            ...
        </ul>
    </nav>
    <!-- End | Sidebar Navigation -->

SASS / CSS

You can find all the sass in the src/assets/scss folder, all the compiled SCSS are returned to scr/assets/css and dist/assets/css. You'll get the following files and folders in scss folder.

Compiled Files
Without underscore(_) .scss files are compiled to scr/assets/css and dist/assets/css. It houses the main styling styles.sass and the preloader styling used
Apps
You can get apps related scss file here in this folder like: inbox, chat, etc...
Base
This folder contains all the basic styling of the template. Global styling, core style, helper classes, useful mixins and variables file can be found here in this folder.
Component
This folder contains all the styling of the card and components of the template. Like buttons, cards, carousels etc...
Layout
This folder host all the styling of layout options like: skin, dark sidebar etc...
Modules
This folder contains all the styling of the modules of the template. Like auth, charts, 404 etc.
Utils
This folder mainly for colors, typography and animation.

Plugins

Bootstrap 4

To use Bootstrap in your application, include the following css files in <head>.


    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script">

Bootstrap Tagsinput

To use Bootstrap tagsinput in your application, include the following css files in <head>.


    <link href="node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script">

Bootstrap Datepicker

To use Bootstrap datepicker in your application, include the following css files in <head>.


    <link href="node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script">

Font awesome

To use Font awesome in your application, include the following css files in <head>.


    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

Ionicons

To use Ionicons in your application, include the following css files in <head>.


    <link href="node_modules/ionicons-npm/css/ionicons.min.css" rel="stylesheet" type="text/css" />

Material Icons

To use Material icons in your application, include the following css files in <head>.


    <link href="node_modules/material-icons/iconfont/material-icons.css" rel="stylesheet" type="text/css" />
    <link href="node_modules/material-icons/css/material-icons.min.css" />

Weather Icons

To use Weather icons in your application, include the following css files in <head>.


    <link href="src/assets/css/weather-icons.min.css" rel="stylesheet" type="text/css" />

Owl Carousel

To use Owl carousel in your application, include the following css files in <head>.


    <link href="node_modules/owl.carousel2/dist/assets/owl.carousel.min.css" rel="stylesheet" type="text/css" />
    <link href="node_modules/owl.carousel2/dist/assets/owl.theme.default.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/owl.carousel2/dist/owl.carousel.min.js"></script">

Toast

To use Toast in your application, include the following css files in <head>.


    <link href="node_modules/jquery-toast-plugin/dist/jquery.toast.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/jquery-toast-plugin/dist/jquery.toast.min.js"></script">

Chart js
To use Chartjs in your application, include the following script files in <body>.
```
    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script">
```

Chartist

To use Chartist in your application, include the following css files in <head>.


    <link href="node_modules/chartist/dist/chartist.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/chartist/dist/chartist.min.js"></script">

Sparkline

To use Sparkline in your application, include the following script files in <body>.


    <script src="node_modules/jquery-sparkline/jquery.sparkline.min.js"></script">

Flotcharts

To use Flotcharts in your application, include the following script files in <body>.


    <script src="node_modules/flot/jquery.flot.js"></script">
    <script src="node_modules/flot/jquery.flot.resize.js"></script">
    <script src="node_modules/flot/jquery.flot.categories.js"></script">
    <script src="node_modules/flot/flot/jquery.flot.fillbetween.js"></script">
    <script src="node_modules/flot/jquery.flot.stack.js"></script">
    <script src="node_modules/flot/flot/jquery.flot.pie.js"></script">

Moment
To use Moment in your application, include the following script files in <body>.
```
    <script src="node_modules/moment/min/moment.min.js"></script">
```
Slim Scroll
To use Slim scroll in your application, include the following script files in <body>.
```
    <script src="node_modules/jquery-slimscroll/jquery.slimscroll.min.js"></script">
```

jVectormap

To use jvectormap in your application, include the following css files in <head>.


    <link href="node_modules/jvectormap/jquery-jvectormap.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/jvectormap/jquery-jvectormap.min.js"></script">
    <script src="node_modules/jvectormap/tests/assets/jquery-jvectormap-world-mill-en.js"></script">

Simple Weather
To use Simple weather in your application, include the following script files in <body>.
```
    <script src="src/assets/js/jquery.simpleWeather.min.js"></script">
```

Data Tables

To use Data tables in your application, include the following css files in <head>.


    <link href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/datatables.net/js/jquery.dataTables.min.js"></script">
    <script src="node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script">

Dropify

To use Dropify in your application, include the following css files in <head>.


    <link href="node_modules/dropify/dist/css/dropify.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/dropify/dist/js/dropify.min.js"></script">

WYSIHTML

To use WYSIHTML in your application, include the following script files in <body>.


    <script src="node_modules/wysihtml/dist/wysihtml.js"></script">
    <script src="node_modules/wysihtml/dist/wysihtml.all-commands.js"></script">
    <script src="node_modules/wysihtml/dist/wysihtml.toolbar.js"></script">
    <script src="node_modules/wysihtml/parser_rules/advanced_and_extended.js"></script">

Full Calendar

To use Full calendar in your application, include the following css files in <head>.


    <link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/fullcalendar/dist/fullcalendar.min.js"></script">

Sweet Alert
To use Sweet alert in your application, include the following script files in <body>.
```
    <script src="node_modules/sweetalert/dist/sweetalert.min.js"></script">
```

X-editable

To use X-editable in your application, include the following script files in <body>.


    <link href="node_modules/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css" />

Add the following script files in <body>.


    <script src="node_modules/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script">

Cookies
To use Cookies in your application, include the following script files in <body>.
```
    <script src="node_modules/jquery.cookie/jquery.cookie.js"></script">
```
typing
To use typing in your application, include the following script files in <body>.
```
    <script src="src/assets/js/init.typing.js"></script">
```

Sources & Credits

I've used the following images, icons or other files as listed: