- Main

- Dashboard
  - Analytical
  - Cryptocurrency
    Hot
  - Profile
- E-Commerce
  - Dashboard
  - Products
  - Product Detail
  - Add Product
  - Orders
  - Cart
  - Checkout
- Apps
  - chats
  - calendar
  - weather
  - Email
    - inbox
    - detail email
  - Contacts
    - list
    - cards
  - File Manager
  - To Do/Tasklist
- component

- UI Elements
  - Panels & Wells
  - Modals
  - Sweet Alerts
  - notifications
  - Typography
  - Buttons
  - Accordion / Toggles
  - Tabs
  - Progress bars
  - Skills & Counters
  - Pricing Tables
  - Nestables
  - Dropdowns
  - Tree View
  - Carousel
  - Range Slider
  - Grid
  - Bootstrap UI
- Components
  - Forms
    - Basic Forms
    - form Layout
    - Form Advanced
    - Form Mask
    - Form Picker
    - form Validation
    - Form Wizard
    - X-Editable
    - Cropperjs
    - File Upload
    - Dropzone
    - Bootstrap Wysihtml5
    - Tinymce Wysihtml5
    - summernote
    - typeahead
  - Charts
    - Flot Chart
    - Echart Chart
    - Morris Chart
    - chartjs
    - chartist
    - Easy Pie Chart
    - Sparkline
    - Peity Chart
  - Tables
    - Basic Table
    - Bootstrap Table
    - Data Table
    - Export Table
    - RSPV DataTable
    - Responsive Table
    - Editable Table
    - Foo Table
    - Jsgrid Table
  - Icons
    - Fontawesome
    - Themify
    - Linea
    - Simple Line
    - Pe-icon-7
    - Glyphicons
  - maps
    - Vector Map
    - Google Map
- featured

- Pages
  - Blank Page
  - Authantication pages
    - Login
    - Register
    - Recover Password
    - reset Password
    - Lock Screen
  - Invoice
    - Invoice
    - Invoice Archive
  - error pages
    - Error 404
    - Error 500
  - Gallery
  - Timeline
  - FAQ
- documentation

- - chat
  - messages
  - todo
  users
  - Clay Masse No one saves us but ourselves.
    Evie Ono Unity is strength
    Madalyn Rascon Respect yourself if you would have others respect you.
    Mitsuko Heid I’m thankful.
    Ezequiel Merideth Patience is bitter.
    Jonnie Metoyer Genius is eternal patience.
    Angelic Lauver Every burden is a blessing.
    Priscila Shy Wise to resolve, and patient to perform.
    Linda Stack Our patience will achieve more than our force.
  ryan

  - Hello Jason, how are you, it's been a long time since we last met?

    2:30 PM
  - Oh, hi Sarah I'm have got a new job now and is going great.
    2:31 pm
  - How about you?
    2:31 pm

  - Not too bad.

    2:35 pm
  - Action
  - Another action
  - Separated link
  messages
  Clay Masse 12:28 AM
  Themeforest message sent via your envato market profile

  Neque porro quisquam est qui dolorem ipsu messm quia dolor sit amet, consectetur, adipisci velit

  Evie Ono 1 Feb
  Pogody theme support

  Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

  Madalyn Rascon 31 Jan
  Congratulations from design nominees

  Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

  Ezequiel Merideth 29 Jan
  Themeforest item support message

  Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

  Jonnie Metoyer 27 Jan
  Help with beavis contact form

  Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

  Priscila Shy 19 Jan
  Your uploaded theme is been selected

  Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

  Linda Stack 13 Jan
  A new rating has been received

  Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit

  todo list
  - Record The First Episode

  - Prepare The Conference Schedule

  - Decide The Live Discussion Time

  - Prepare For The Next Project

  - Finish Up AngularJs Tutorial

  - Finish Infinity Project

##### Documentation

1. Dashboard
2. documentation

###### Inroduction

Splasher Admin is a WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3.3.7 stable version. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Splasher Admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

- Different Dashboards Styles
- Ecommerce Pages Included
- 95+ pages
- 1000+ fonts
- 300+ Ui Components
- Light,dark, and boxed layout.
- toggle left side menu
- Used Bower A package manager for the web.
- Used gruntjs (The javascript task runner.)
- Vector Maps & Google maps included.
- Powered by Bootstrap Sass.
- CSS3 Animations.

- Lots of widgets
- Bootstrap 3x
- linea-icon Icons
- Themify Icons
- Simple line Icons
- Pe-icon Icons
- Responsive Layout
- W3C HTML Valid code
- Multi-Browser Support
- Box & Full-screen layout options
- Dark & Light Demo options.
- Quick setting panel with many cool options.

- Mobile Responsive Tabs
- Specially Designed Mobile Menu
- Desktop Sidebar Menu
- Tablet Icon Menu
- Multilevel Navigation
- Mega Menu
- Beautiful Profile page
- Working Instagram Live Feeds
- Thoughtfully designed widgets.
- Email App included.
- Stunning Chat App included.
- Login, Forget Password, Register, lock screen and many more.

###### Installation (Install Node.js, Bower, 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
- bower install
- grunt

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

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

###### File structure

    										  HTML
    										  ├──
    										  │   └── Splasher/
    										  │       └── dist
    										  │            └── Distribution pkg(Ready to Use)
    										  │       └── src
    										  │            └── Source pkg
    										  │       └── vendors
    										  │            └── bower_components
    										  │            └── All Required plugins files
    										  │       └── All Html Pages
    										  │       └── .bowerrc
    										  │       └── .bowerrc
    										  │       └── .jshintrc
    										  │       └── bower.json
    										  │       └── package.json
    										  └──

###### Html structure

    									<html>
    										<body>

    										<!-- Preloader -->
    										<div class="preloader-it">
    										<div class="la-anim-1"></div>
    										</div>
    										!-- /Preloader -->

    										<!-- Wrapper -->
    										<div id="wrapper">
    											<!-- Top Menu Items -->
    											<nav class="navbar navbar-inverse navbar-fixed-top">
    											------
    											<!-- Left Sidebar Menu -->
    											<div class="fixed-sidebar-left">
    											------

    											<!-- Right Sidebar Menu -->
    											<div class="fixed-sidebar-right">
    											------

    											<!-- Main Content -->
    											<div class="page-wrapper">

    												<!-- Title -->
    												<div class="row heading-bg">
    													------
    													<!-- Breadcrumb -->
    													<div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
    														------
    													--content--
    											<!-- Footer -->
    											<footer class="footer container-fluid pl-30 pr-30">

    										</body>
    									</html>

###### Background Colors

please use below classes background colors:

class | value
--- | ---
`.bg-[value]` | red | blue | green | yellow | orange | white | dark

###### Text Colors

please use below classes for text colors:

class | value
--- | ---
`.txt-[value]` | primary | success | warning | danger | dark | white | grey | orange

###### scss files

main scss file in present in src folder.

File | Description
--- | ---
`style.scss` | you can update main style using this scss file.
`style-dark.scss` | you can update main style for dark version using this scss file.
`_bourbon.scss` | for all styles of bourbon css.
`mixins.sess` | for all preset mixins.

###### js files

custom js file in present in dist/js folder.

File | Description
--- | ---
`init.js` | all custom js required for Splasher.
`**-data.scss` | all js with **-data are releted with individual pages.

###### How to edit files ?

All index files represent that how can you use all the widgets,tables,charts etc. Other html files are created using there original names like dropzone.html, chartist.html etc. You can easily edit them.

all js which are present in dist/js folder with **-data are releted to individual pages. We used nomenclature related to inividual html page like chartjs-data.js for chats.html, bootstrap-wysuhtml5-data.js for bootstrap-wysihtml5.html etc.

###### How to change Logo ?

You can change the logo by either replace it from img folder or you can edit it from HTML file.

    										<div class="logo-wrap">
    											<a href="index.html">
    												<img class="brand-img" src="../img/logo.png" alt="brand"/>
    												<span class="brand-text">Splasher</span>
    											</a>
    										</div>

###### How to edit sidebar color ?

We provided 2 theme styles which you can use, you have to add below classes with `.wrapper` class.

class | value
--- | ---
`.theme-[value]-active` | 1 | 2

    										<div class="wrapper  theme-1-active">

###### How to change topbar color ?

We provided 14 topbar colors which you can use, you have to add below classes with `.wrapper` class.

class | value
--- | ---
`.navbar-top-[value]` | light | orange | violet | skyblue | light | green | red | purple | pink | dark | light | teal |chrome | yellow

###### How to get horizontal navigation ?

Please add .horizontal-nav class with`.wrapper` class.

    										<div class="wrapper  theme-1-active horizontal-nav">

###### How to add carousels ?

Add class `.carousel-caption`.

    										<!-- START carousel-->
    										<div id="carousel-example-captions" data-ride="carousel" class="carousel slide mt-40">
    											<ol class="carousel-indicators">
    											   <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
    											   <li data-target="#carousel-example-captions" data-slide-to="1"></li>
    											   <li data-target="#carousel-example-captions" data-slide-to="2"></li>
    											</ol>
    											<div role="listbox" class="carousel-inner">
    											   <div class="item active">
    												  <img src="dist/img/big/img1.jpg" alt="First slide image">
    												  <div class="carousel-caption">
    													<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    												  </div>
    											   </div>
    											   <div class="item">
    												  <img src="dist/img/big/img2.jpg" alt="Second slide image">
    												  <div class="carousel-caption">
    													 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    												  </div>
    											   </div>
    											   <div class="item">
    												  <img src="dist/img/big/img3.jpg" alt="Third slide image">
    												  <div class="carousel-caption">
    													<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    												  </div>
    											   </div>
    											</div>
    											<a href="#carousel-example-captions" role="button" data-slide="prev" class="left carousel-control"> <span aria-hidden="true" class="fa fa-angle-left"></span> <span class="sr-only">Previous</span> </a> <a href="#carousel-example-captions" role="button" data-slide="next" class="right carousel-control"> <span aria-hidden="true" class="fa fa-angle-right"></span> <span class="sr-only">Next</span> </a>
    										</div>
    										<!-- END carousel-->

###### How to add modals ?

Please add below code snippet for modals.

    										<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    											<div class="modal-dialog modal-lg">
    												<div class="modal-content">
    													<div class="modal-header">
    														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    														<h5 class="modal-title" id="myLargeModalLabel">Large modal</h5>
    													</div>
    													<div class="modal-body">
    														<h5 class="mb-15">Overflowing text to show scroll behavior</h5>
    														<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    														<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    													</div>
    													<div class="modal-footer">
    														<button type="button" class="btn btn-danger text-left" data-dismiss="modal">Close</button>
    													</div>
    												</div>
    												<!-- /.modal-content -->
    											</div>
    											<!-- /.modal-dialog -->
    										</div>
    										<!-- Button trigger modal -->
    										<img src="dist/img/modals/model2.png" alt="default" data-toggle="modal" data-target=".bs-example-modal-lg" class="model_img img-responsive"/>

###### How to add tabs ?

Default version of tab add `tab-struct custom-tab-1` class.

    										<div  class="tab-struct custom-tab-1 mt-40">
    											<ul role="tablist" class="nav nav-tabs" id="myTabs_7">
    												<li class="active" role="presentation"><a aria-expanded="true"  data-toggle="tab" role="tab" id="home_tab_7" href="#home_7">active</a></li>
    												<li role="presentation" class=""><a  data-toggle="tab" id="profile_tab_7" role="tab" href="#profile_7" aria-expanded="false">inactive</a></li>
    												<li class="dropdown" role="presentation">
    													<a  data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop_7" href="#" aria-expanded="false">Dropdown <span class="caret"></span></a>
    													<ul id="myTabDrop_7_contents"  class="dropdown-menu">
    														<li class=""><a  data-toggle="tab" id="dropdown_13_tab" role="tab" href="#dropdown_13" aria-expanded="true">@fat</a></li>
    														<li class=""><a  data-toggle="tab" id="dropdown_14_tab" role="tab" href="#dropdown_14" aria-expanded="false">@mdo</a></li>
    													</ul>
    												</li>
    											</ul>
    											<div class="tab-content" id="myTabContent_7">
    												<div  id="home_7" class="tab-pane fade active in" role="tabpanel">
    													<p>Lorem ipsum dolor sit amet, et pertinax ocurreret scribentur sit, eum euripidis assentior ei. In qui quodsi maiorum, dicta clita duo ut. Fugit sonet quo te. Ad vel quando causae signiferumque. Aperiam luptatum senserit eu vis, eu ius purto torquatos vituperatoribus.An nec fastidii eligendi molestiae.</p>
    												</div>
    												<div  id="profile_7" class="tab-pane fade" role="tabpanel">
    													<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
    												</div>
    												<div id="dropdown_13" class="tab-pane fade " role="tabpanel">
    													<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
    												</div>
    												<div id="dropdown_14" class="tab-pane fade" role="tabpanel">
    													<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
    												</div>
    											</div>
    										</div>

###### How to add accordions ?

Default version of accordions.

    										<div class="panel-group accordion-struct" id="accordion_1" role="tablist" aria-multiselectable="true">
    											<div class="panel panel-default">
    												<div class="panel-heading activestate" role="tab" id="heading_1">
    													<a role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_1" aria-expanded="true">collapse one</a>
    												</div>
    												<div id="collapse_1" class="panel-collapse collapse in" role="tabpanel">
    													<div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la. </div>
    												</div>
    											</div>
    											<div class="panel panel-default">
    												<div class="panel-heading" role="tab" id="heading_2">
    													<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_2" aria-expanded="false">collapse two </a>
    												</div>
    												<div id="collapse_2" class="panel-collapse collapse" role="tabpanel">
    													<div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, </div>
    												</div>
    											</div>
    											<div class="panel panel-default">
    												<div class="panel-heading" role="tab" id="heading_3">
    													<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_3" aria-expanded="false" >collapse three</a>
    												</div>
    												<div id="collapse_3" class="panel-collapse collapse" role="tabpanel">
    													<div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, inable VHS. </div>
    												</div>
    											</div>
    											<div class="panel panel-default">
    												<div class="panel-heading" role="tab" id="heading_4">
    													<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_1" href="#collapse_4" aria-expanded="false"> collapse four</a>
    												</div>
    												<div id="collapse_4" class="panel-collapse collapse" role="tabpanel">
    													<div class="panel-body pa-15"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, inable VHS. </div>
    												</div>
    											</div>
    										</div>

###### How to edit layout ?

For all the layout you have to add below classes with `.wrapper` class.

`For boxed layout add .` `For dark version use grunt sass-dark` `For rtl version use grunt sass-rtl` `For scrollable header add .scrollable-nav`

###### How to edit Weather app ?

We provided working weather app with the help of yahoo API.

For editing the app first open simpleweather-data.js file,If you want to use weather app with forcast of seven day use

`/*With Forcast*/
$.simpleWeather({...`

If you want to use weather app withot forcastuse

`/*Without Forcast*/
$.simpleWeather({...`

Note : Images are not included in downloaded version source.

###### 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/
- 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/

###### Support

If you have any questions that aren’t covered in this article, please mail us at support@hencework.com