Documentation
  1. Dashboard
  2. documentation
Inroduction

Doodle 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.6 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. Doodle 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.

  • 4 Different Dashboards
  • Ecommerce Pages Included
  • 90+ 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 is 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 Doodle 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
										  ├── 
										  │   └── Doodle/
										  │       └── 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
									<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">
										------
										
										<!-- Right Sidebar Backdrop -->
										<div class="right-sidebar-backdrop">
										------
										
										<!-- 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>
For Background Colors

please use below classes bg colors:

bg-green bg-blue bg-red bg-pink bg-yellow bg-light bg-dark
For Text Colors

please use below classes for text colors:

For green use .txt-success For blue use .txt-primary For pink use .txt-info For yellow use .txt-warning For red use .txt-danger For white use .txt-light For black use .txt-dark For grey use .txt-grey
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 Doodle.
**-data.scss all js with **-data are releted with individual pages.
How to edit all the 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 edit layout ?

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

For boxed layout add .box-layout For dark version use grunt sass-dark For rtl version use grunt sass-rtl For rtl version use grunt sass-rtl-dark For scrollable header add .scrollable-nav
How to edit theme ?

We provide 6 themes which you can use, you have to add below classes with .wrapper class.

.theme-1-active .theme-2-active .theme-3-active .theme-4-active .theme-5-active .theme-6-active
How to edit primary color ?

We provide 8 primary color scheme which you can use, you have to add below classes with .wrapper class.

.pimary-color-red .pimary-color-blue .pimary-color-green .pimary-color-yellow .pimary-color-pink .pimary-color-orange .pimary-color-gold .pimary-color-silver
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
Support

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

2017 © Doodle. Pampered by Hencework