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.
Use of these tools is completely optional.
npm install -g grunt-cliand
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:
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.
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 └──
<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>
please use below classes bg 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
main scss file in present in src folder.
||you can update main style using this scss file.|
||you can update main style for dark version using this scss file.|
||for all styles of bourbon css.|
||for all preset mixins.|
custom js file in present in dist/js folder.
||all custom js required for Doodle.|
||all js with **-data are releted with individual pages.|
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.
For all the layout you have to add below classes with
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
We provide 6 themes which you can use, you have to add below classes with
We provide 8 primary color scheme which you can use, you have to add below classes with
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
If you want to use weather app withot forcastuse
Note : Images are not included in downloaded version source.