Ninja Admin - Responsive Boostrap Admin

Thank you very much for your purchase!

Ninja Admin is a bootstrap based premium admin template. It has super clean user interface, customizable components and widgets It is fully responsive and easy to customize. The code is lightweight with support minify version and fully customizable with developer version. It's easy to make it become into real web application.
Please feel free to contact us at any time cool

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.

File structure

-- html files
-- assets
|----- fonts (All fonts files here. Including Icon Fonts)
|----- images (Images for demo)
|----- less( LESS files here)
|----- plugin ( All plugin files )
|----- scripts ( All common javascript here. You can find file scripts initial and demo for plugin here)
|----- styles ( All Css here)

HTML structure

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

CSS & LESS

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

Javascripts

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.

Plugin's usage information

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.

- NinjaTeam

Version 1.0 - (10/10/2016)