###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

##### Introduction

Dashgrin is a Bootstrap 4.X.X & Sass based solid core framework that works well for all screen sizes and modern browsers. HTML5 validated clean code is focused - keeping it simple and orderly. With Dashgrin's UI components library, you can actually get more time on building stuff, rather than editing pixel distances. Dashgrin - HTML template and Admin UI kit can be used for any type of web application: CRM, Project Management, Statistics, Analytics or any custom admin dashboard. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

##### File Structure

    							HTML
    							  ├──
    							  │   └── dist
    							  │     └── css
    							  │     └── fonts
    							  │     └── img
    							  │     └── js
    							  │   └── src
    							  │     └──scss
    							  │    	  └── colors.scss
    							  │    	  └── mixins.scss
    							  │    	  └── navbar.scss
    							  │    	  └── style.scss
    							  │   └── vendors
    							  │       └── All Required plugins files
    							  │   └── All Html Pages
    							  │   └── .jshintrc
    							  │   └── Gruntfile.js
    							  │   └── package.json
    							  │   └── package-lock.json
    							  └──

##### Installation & Configuration (Install Node.js,Grunt)

Use of these tools are completely optional.

- Node.js and NPM. You can download Node.js from here https://nodejs.org. Npm comes bundled with Node.js
- Next you need to install bower.
- At last install grunt using `npm install -g grunt-cli` and `npm install grunt --save-dev`

After installing all the required frameworks, components and dependencies, go to the root folder of and run the following commands from the command line:

- npm install
- grunt dist
- grunt

If everything was installed correctly, you should see the jQuery version of Dashgrin running in http://localhost:9000/

Above all procedures are optional you can directly use the compiled file which we provided you.

##### Menu Style

For vertical navigation you have to first add `hk-vertical-nav` class with `hk-wrapper`.

For Horizontal navigation you have to first add `hk-horizontal-nav` class with `hk-wrapper`.

For vertical alt navigation you have to first add `hk-alt-nav` class with `hk-wrapper`.

For this menu style you have to add `hk-navbar-alt` class with `navbar`

For light & dark menu you can add `hk-nav-light` or `hk-nav-dark` with `hk-nav` class.

For Scrollable Navigation please add `scrollable-nav` class with `hk-wrapper`.

##### Font

We implemented Inter font. Inter is a typeface carefully crafted & designed for computer screens.

###### How to Setup

###### Using Inter is as easy as downloading & installing the font files. If you're making a web thing, you can simply use this CSS

    								@import url('https://rsms.me/inter/inter.css');
    								html { font-family: 'Inter', sans-serif; }
    								@supports (font-variation-settings: normal) {
    								  html { font-family: 'Inter var', sans-serif; }
    								}

###### Note:- You can add other fonts like google font by replacing above css with respective one.

##### Twitter Feed

We implemented live Twitter Feed on Dashgrin, for that we used twitterFetcher third party plugin.

###### How to Setup

###### HTML Structure

    								<div class="card bg-primary text-center">
    									<div class="twitter-slider-wrap card-body">
    										<div class="twitter-icon text-center mb-15">
    											<i class="fa fa-twitter"></i>
    										</div>
    										<div id="tweets_fetch" class="owl-carousel owl-theme"></div>
    									</div>
    								</div>

###### CSS

    								<!-- Lightgallery CSS -->
    								<link href="../HTML/vendors/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">

###### JS

    								<!-- twitter JavaScript -->
    								<script src="../HTML/dist/js/twitterFetcher.js"></script>
    								<script src="../HTML/dist/js/widgets-data.js"></script>
    								​
    								<!-- Owl JavaScript -->
    								<script src="../HTML/vendors/owl.carousel/dist/owl.carousel.min.js"></script>
    								​
    								<!-- Owl Init JavaScript -->
    								<script src="../HTML/dist/js/owl-data.js"></script>
    								​

###### Initialize Twitter Feed

    								if( $('#tweets_fetch').length > 0 ){
    										var configList = {
    										  "profile": {"screenName": 'envato'},
    										  "domId": 'tweets_fetch',
    										  "maxTweets": 2,
    										  "enableLinks": true,
    										  "showUser": false,
    										  "showTime": true,
    										  "showImages": false,
    										  "showInteraction":false,
    										  "lang": 'en'
    										};
    										twitterFetcher.fetch(configList);
    									}
    								});
    								​
    								$(window).on('load', function () {
    									setTimeout(function(){
    										$('#tweets_fetch').owlCarousel({
    											loop:true,
    											margin:0,
    											autoplay:true,
    											responsiveClass:true,
    											autoHeight:true,
    											autoplayTimeout:4000,
    											responsive:{
    												0:{
    													items:1
    												}
    											}
    										});
    									},2000);
    								});
    								​

##### Chat

Chat spp is exclusive design for Dashgrin users , it provide you rich user experience.There are no external plugin dependencies.

###### How to Setup

###### HTML Structure

    								<div class="chatapp-wrap">
    									<div class="chatapp-left">
    										<header>
    											 <!--Chat app left header content-->
    										</header>
    										<form role="search" class="chat-search">
    											 <!--Chat app search form-->
    										</form>
    										<div class="chatapp-users-list">
    										   <!--Chat app user list-->
    										</div>
    									</div>
    									<div class="chatapp-right">
    										<header>
    											<!--Chat app right header content-->
    										</header>
    										<div class="chat-body">
    											<!--Chat body-->
    										</div>
    										<footer>
    											<!--Chat Input field-->
    										</footer>
    									</div>
    								 </div>

##### Calendar

Calendar app is based on Fullcallendar js https://fullcalendar.io/. We have customized it a bit to give more interactive experience.

###### How to Setup

###### HTML Structure

    								<div class="calendar-wrap">
    									 <div id="calendar"></div>
    								</div>

###### CSS

    								<!-- Calendar CSS -->
    								<link href="../HTML/vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />

###### JS

    								<!-- Fullcalendar JavaScript -->
    								<script src="../HTML/vendors/moment/min/moment.min.js"></script>
    								<script src="../HTML/vendors/jquery-ui.min.js"></script>
    								<script src="../HTML/vendors/fullcalendar/dist/fullcalendar.min.js"></script>
    								<script src="../HTML/dist/js/fullcalendar-data.js"></script>
    								​

###### Initialize

    								$('#calendar').fullCalendar({
    									----
    								});

##### Email

Dashgrin Email app is a web-based email client designed and developed exclusively for Dashgrin framework. It has a responsive design to work flawlessly across many devices.

###### How to Setup

###### HTML Structure

    								<div class="emailapp-wrap">
    								<div class="emailapp-sidebar">
    									<div class="nicescroll-bar">
    										<div class="emailapp-nav-wrap">
    											<!--Email app sidebar content-->
    										</div>
    									</div>
    								</div>
    								<div class="email-box">
    									<div class="emailapp-left">
    										<header>
    											<!--Email app left content-->
    										</header>
    										<form role="search" class="email-search">
    											<!--Email app left content-->
    										</form>
    										<div class="emailapp-emails-list">
    										</div>
    									</div>
    									<div class="emailapp-right">
    										<header>
    											<!--Email app right content-->
    										</header>
    										<div class="email-body">
    											<!--Email app body content-->
    										</div>
    									</div>
    								</div>
    								<!-- Compose email -->
    								<div class="modal fade" id="exampleModalEmail" tabindex="-1" role="dialog" aria-labelledby="exampleModalEmail" aria-hidden="true">
    									<!--Email app compose email content-->
    								</div>
    								<!-- /Compose email -->
    							</div>

###### JS

    								<!-- Tinymce JavaScript -->
    								<script src="../HTML/vendors/tinymce/tinymce.min.js"></script>
    								​
    								<!-- Tinymce Wysuhtml5 Init JavaScript -->
    								<script src="../HTML/dist/js/tinymce-data.js"></script>

##### Charts

In Dashgrin we used different charts mainly e charts, morris charts, sparkline, peity charts. For detail documentation of every chart you can go through cradit URLs.

##### Credits

- Bootstrap framework
- http://getbootstrap.com/
- Jquery
- https://jquery.com/
- Material Design Iconic Font
- http://zavoloklom.github.io/material-design-iconic-font/icons.html
- Font-Awesome
- http://fortawesome.github.io/Font-Awesome/
- Themify
- https://themify.me/themify-icons
- linea-icon
- http://linea.io/
- Simple line icons
- simplelineicons.com
- Pe-7 icons
- http://themes-pixeden.com/font-demos/7-stroke/
- Sweet-Alert
- http://tristanedwards.me/sweetalert
- Nestable
- http://dbushell.com/
- Slimscroll
- http://rocha.la/jQuery-slimScroll
- Full Calendar
- http://arshaw.com/fullcalendar/
- Bootstrap-timepicker
- http://jdewit.github.com/bootstrap-timepicker
- Bootstrap Colorpicker
- http://www.eyecon.ro/bootstrap-colorpicker
- Multi-select
- http://loudev.com/
- Select2
- https://select2.github.io/
- Wysihtml5
- https://github.com/xing/wysihtml5
- Datatables
- https://www.datatables.net/
- Jsgrid
- http://js-grid.com/
- Morris
- http://morrisjs.github.io/morris.js/
- Echart
- https://echarts.apache.org/examples/en/
- Chartjs
- http://chartjs.org/
- Sparkline
- http://omnipotent.net/jquery.sparkline/
- Google maps
- https://hpneo.github.io/gmaps/
- Vector Maps
- http://jqvmap.com/
- Pexels (images)
- https://pexels.com/
- Flot-charts
- http://www.flotcharts.org/
- Owl carousel
- http://owlgraphic.com/owlcarousel/
- Switchery
- https://github.com/abpetkov/switchery
- Bootstrap select
- https://github.com/silviomoreto/bootstrap-select
- Wysiwig Editor
- http://www.tinymce.com/
- Chartist chart
- https://gionkunz.github.io/chartist-js/