-
Sandy Doe12/10/16Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Sandy Doe2pmNeque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Sandy Doe1pmNeque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Sandy Doe1pmNeque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
Sandy Doe1pmNeque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
-
Documentation
Inroduction
Kenny 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. Kenny 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.
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-cliandnpm 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 Kenny 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 ├── │ └── kenny/ │ └── 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"> ------ <!-- Main Content --> <div class="page-wrapper"> <!-- Title --> <div class="row heading-bg bg-blue"> ------ <!-- 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 of title bars
please use below classes bg colors:
bg-greenbg-bluebg-redbg-pinkbg-yellow
scss files
main scss file in present in src folder.
| File | Description |
|---|---|
style.scss
|
you can update main style 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 kenny. |
**-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.
Note : Images are not included in downloaded version source.
credits
- Bootstrap framework
- http://getbootstrap.com/
- Jquery
- https://jquery.com/
- 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 contact@hencework.com