Thank you very much for your purchase!
Ninja Admin have built based on the standards and modular structure. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.
<div class="main-menu"> <header class="header"> <a href="#" class="logo">...</a> <!-- .logo --> <button type="button" class="button-close glyphicon glyphicon-remove-circle js__menu_close"></button> <div class="user"> ... </div> <!-- /.user --> </header> <!-- /.header --> <div class="content"> <div class="navigation"> <h5 class="title">...</h5> <!-- /.title --> <ul class="menu js__accordion"> <li>...</li> </ul> <!-- /.menu --> ... </div> <!-- /.navigation --> </div> <!-- /.content --> </div> <!-- /.main-menu --> <div class="fixed-navbar"> <div class="pull-left"> <button type="button" class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button> <h1 class="page-title">...</h1> <!-- /.page-title --> </div> <!-- /.pull-left --> <div class="pull-right"> <a href="#" class="fa fa-bell-o notice-alarm js__toggle_open" data-target="#notification-popup"><span class="dot"></span></a> <form action="#" class="searchform"><input type="search" placeholder="Search..." class="input-search"><button class="fa fa-search button-search" type="submit"></button></form> <!-- /.searchform --> </div> <!-- /.pull-right --> </div> <!-- /.fixed-navbar --> <div id="notification-popup" class="notice-popup js__toggle"> <a href="#" class="popup-close glyphicon glyphicon-remove js__toggle_close"></a> <h2 class="popup-title">Notifications</h2> <!-- /.popup-title --> <div class="content"> <ul class="notice-list"> <li>...</li> </ul> <!-- /.notice-list --> </div> <!-- /.content --> </div> <!-- /#notification-popup --> <div id="wrapper"> <div class="main-content"> ... <footer class="footer"> ... </footer> <!-- footer --> </div> <!-- .main-content --> </div> <!-- #wrapper -->
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.
Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.
File | Description |
---|---|
style.css
|
Ninja Admin styles - css version. It's being used in all the pages. |
style.less
|
Ninja Admin styles - less version. It's being used in all the pages. |
bootstrap.css
|
Bootstrap Core Styles Version 3.3.7. It's being used in all the pages. |
bootstrap-theme.css
|
Bootstrap Themes. It's being used in all the pages. You can use another themes available |
Ninja Admin uses jQuery, Bootstrap Js framework and some of the third-party plugins.
File | Description |
---|---|
jquery.min.js ,
bootstrap.min.js
|
Core Js of the theme |
main.js ,
|
Main js file - The custom Js code needed for theme like main menu, notice,... |
plugin/**.js ,
|
Plugin Js files located here. |
Page | Plugin | Description | CSS | JS |
---|---|---|---|---|
All | Wave Effect | Wave effect when click on main menu | waves.min.css | waves.min.js |
mCustomScrollbar | Custom scroll for main menu | jquery.mCustomScrollbar.min.css | jquery.mCustomScrollbar.min.js | |
calendar.html | assets/scripts/fullcalendar.init.js - Custom scripts for demo | |||
Jquery UI | Drag and drop label | jquery-ui.min.css jquery-ui.structure.min.css jquery-ui.theme.min.css |
jquery-ui.min.js | |
Moment | Support for Fullcalendar JS | moment.js | ||
Fullcalendar | Calendar | fullcalendar.min.css fullcalendar.print.css |
fullcalendar.min.js | |
chart-chartist.html | assets/scripts/jquery.chartist.init.min.js - Custom scripts for demo | |||
Chartist | Chart Scripts | chartist.min.css | chartist.min.js | |
chart-chartjs.html | assets/scripts/jquery.chartjs.init.min.js - Custom scripts for demo | |||
Chart.js | Chart Scripts | Chart.bundle.min.js | ||
chart-flot.html | assets/scripts/jquery.flot.init.min.js - Custom scripts for demo | |||
Flot Charts | Chart Scripts | jquery.flot.min.js jquery.flot.tooltip.min.js jquery.flot.categories.min.js jquery.flot.pie.min.js jquery.flot.stack.min.js |
||
chart-morris.html | assets/scripts/jquery.morris.init.min.js - Custom scripts for demo | |||
Chart.js | Chart Scripts | morris.css | morris.min.js raphael-min.js |
|
chart-other.html | Percent Circle | Percent Circle | percircle.css | percircle.js |
Google Chart | Chart Scripts | https://www.gstatic.com/charts/loader.js | ||
compose.html inbox.html read-mail.html |
assets/scripts/mailbox.init.min.js assets/scripts/tinymce.init.min.js Custom scripts for demo |
|||
iCheck | Checkbox scripts | skins/flat/blue.css | icheck.min.js | |
TinyMCE | Context editor scripts | skins/lightgray/skin.min.css | tinymce.min.js | |
extras-comingsoon.html | Coming soon | Coming soon themes | style.css | jquery.countdown.min.js assets/scripts/comingsoon.init.min.js |
extras-faq.html | Jquery UI | Accordion | jquery-ui.min.css jquery-ui.structure.min.css jquery-ui.theme.min.css |
jquery-ui.min.js |
extras-gallery.html | Lightview | Gallery Images Popup | lightview.css | lightview.js |
Isotope | Filters for gallery | isotope.pkgd.min.js cells-by-row.min.js |
||
extras-maps.html | assets/scripts/map.demo.js - Custom scripts for demo | |||
Google Map | Map Scripts | https://maps.googleapis.com/maps/api/js?key=AIzaSyD84ST3FIRNNVS1CEm_IE9KoR-lAIw8OPo | ||
extras-tour.html | assets/scripts/tourist.demo.min.js - Custom scripts for demo | |||
Tourist | Tour scripts | tourist.css | underscore-1.4.4.js backbone-1.0.0.js tourist.min.js |
|
form-advanced.html | assets/scripts/form.demo.min.js - Custom scripts for demo | |||
Flex Datalist | Custom Datalist | jquery.flexdatalist.min.css | jquery.flexdatalist.min.js | |
Popover | Custom Select | jquery.popSelect.min.css | jquery.popSelect.min.js | |
Select2 | Custom Select | select2.min.css | select2.min.js | |
Multi Select | jQuery multiselect | multiselect.min.js | ||
Touch Spin | Increase and decrease value input number | jquery.bootstrap-touchspin.min.css | jquery.bootstrap-touchspin.min.js | |
Colorpicker | Colorpicker | bootstrap-colorpicker.min.css | bootstrap-colorpicker.min.js | |
Datepicker | Datepicker | bootstrap-datepicker.min.css | bootstrap-datepicker.min.js | |
Moment | Support for DateRangepicker | moment.js | ||
DateRangepicker | DateRangepicker | daterangepicker.css | daterangepicker.js | |
Maxlength | Limit characters for input | bootstrap-maxlength.min.js | ||
form-fileupload.html | assets/scripts/fileUpload.demo.min.js - Custom scripts for demo | |||
Dropify | Custom File Upload Plugin | dropify.min.css | dropify.min.js | |
form-validation.html | Validator | Form Validator | validator.min.js | |
form-wizard.html | assets/scripts/form.wizard.init.min.js - Custom scripts for demo | |||
Form Wizard | Form Wizard Plugin | jquery.validate.min.js | ||
Jquery Validation | Form Validatior | prettify.css | prettify.js jquery.bootstrap.wizard.min.js |
|
form-wysiwig.html | assets/scripts/tinymce.init.min.js - Custom scripts for demo | |||
TinyMCE | Context Editor Plugin | skins/lightgray/skin.min.css | tinymce.min.js | |
form-xeditable.html | assets/scripts/x-editable.demo.min.js - Custom scripts for demo | |||
X-Editable | Inline Input Editor Plugin | bootstrap-editable.css | bootstrap-editable.min.js | |
Moment | Support for X-Editor | moment.js | ||
tables-datatable.html | assets/scripts/datatables.demo.min.js - Custom scripts for demo | |||
Data Tables | Data Tables Plugin | media/css/jquery.dataTables.min.css | media/js/jquery.dataTables.min.js media/js/dataTables.bootstrap.min.js |
|
tables-editable.html | assets/scripts/datatables.demo.min.js - Custom scripts for demo | |||
Data Tables | Data Tables Plugin | media/css/jquery.dataTables.min.css | media/js/jquery.dataTables.min.js media/js/dataTables.bootstrap.min.js |
|
Editable Tables | Inline Edit Tables Plugin | mindmup-editabletable.js | ||
tables-responsive.html | assets/scripts/rwd.demo.min.js - Custom scripts for demo | |||
RWD Table Patterns | Responsive Tables Plugin | rwd-table.min.css | rwd-table.min.js | |
ui-draggable-cards.html | Jquery UI | Drag and drop cards | jquery-ui.min.css jquery-ui.structure.min.css jquery-ui.theme.min.css |
jquery-ui.min.js |
ui-material-icons.html | Material Design Icon | Font Icon | materialdesignicons.css | |
ui-themify-icons.html | Themify Icon | Font Icon | themify-icons.css | |
ui-notification.html | assets/scripts/toastr.demo.min.js - Custom scripts for demo | |||
Toastr | Notifications Plugin | toastr.css | toastr.min.js | |
ui-range-slider.html | assets/scripts/nouislider.init.min.js assets/scripts/ion.rangeSlider.init.min.js Custom scripts for demo |
|||
Jquery UI | Range slider | jquery-ui.min.css jquery-ui.structure.min.css jquery-ui.theme.min.css |
jquery-ui.min.js | |
noUI Slider | Range slider Plugin | nouislider.min.css nouislider.pips.css nouislider.tooltips.css |
nouislider.min.js | |
Ion Ranger SLider | Range slider Plugin | ion.rangeSlider.css ion.rangeSlider.skinFlat.css |
ion.rangeSlider.min.js | |
ui-sweetalert.html | assets/scripts/sweetalert.init.min.js - Custom scripts for demo | |||
Sweet Alert | Alert Plugin | sweetalert.css | sweetalert.min.js | |
ui-treeview.html | assets/scripts/treeview.init.min.js - Custom scripts for demo | |||
Treeview | Bootstrap Treeview Plugin | bootstrap-treeview.min.css | bootstrap-treeview.min.js | |
ui-widgets.html | Percent Circle | Percent Circle | percircle.css | percircle.js |
The theme contains various utilies including some helper classes, widgets, etc. Please see below some helper classes.
Class | Description |
---|---|
.margin-top-10 |
Margin top 10px |
.margin-top-20 |
Margin top 20px |
.margin-top-30 |
Margin top 30px |
.margin-top-40 |
Margin top 40px |
.margin-top-50 |
Margin top 50px |
.margin-top-60 |
Margin top 60px |
.margin-top-70 |
Margin top 70px |
.margin-top-80 |
Margin top 80px |
.margin-top-90 |
Margin top 90px |
.margin-top-100 |
Margin top 100px |
.margin-bottom-10 |
Margin bottom 10px |
.margin-bottom-20 |
Margin bottom 20px |
.margin-bottom-30 |
Margin bottom 30px |
.margin-bottom-40 |
Margin bottom 40px |
.margin-bottom-50 |
Margin bottom 50px |
.margin-bottom-60 |
Margin bottom 60px |
.margin-bottom-70 |
Margin bottom 70px |
.margin-bottom-80 |
Margin bottom 80px |
.margin-bottom-90 |
Margin bottom 90px |
.margin-bottom-100 |
Margin bottom 100px |
.padding-10 |
Padding 10px |
.padding-20 |
Padding 20px |
.padding-30 |
Padding 30px |
.min-height-10 |
Min Height 10px |
.min-height-20 |
Min Height 20px |
.min-height-30 |
Min Height 30px |
.min-height-40 |
Min Height 40px |
.min-height-50 |
Min Height 50px |
.no-margin |
Margin 0 |
.no-padding |
Padding 0 |
We've used the following resources as listed. These are some awesome creation and we are thankful to the community.
Once again thank you for your purchase. We care about each of our customers and treat them with respect. If you have any question or ideal about this product, feel free to contact us. We guarantee that we will invest all of our skills and strengths into products and support.
Thanks.