If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.
Adminox is a premium, fully responsive web app UI kit. It has flat design and built with Bootstrap 3.3.7 & Bootstrap 4 alpha 6, HTML5, CSS3 and Jquery. It comes with bunch of reusable UI widgets, components, ready made pages. The clean and modular code will allow you to easily build any web application.
We really care for our buyers and so in case if you have any question or feedback, please feel free to get back to us.
I have tried to follow the standards and modular structure while developing the theme. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.
├── html files Src/assets/ ├── less/ │ └── All LESS files ├── scss/ │ └── All SCSS files ├── css/ │ └── All css files. ├── fonts/ ├── pages/ │ └── All the pages related scripts ├── images/ │ └── All images └── js/ │ └── All common Javascripts files plugins/ └── The plugins files - which are not available through bower
Less is a CSS pre-processor and 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, themable and extendable. Less runs inside Node, in the browser and inside Rhino.
All the css files are pre-compiled using less compiler and provided inside the assets/css/ folder. In case if you are not familiar with less or
don't have any environment setup which can be used to compile the less files, then you can use these CSS files directly.
But if you are familiar with less, then I'll suggest you to use the less files.
Files are explained below:
| File | Description |
|---|---|
bootstrap.css
|
Adminox uses the Bootstrap 3.3.7. The core bootstrap file is being used in all the pages. |
elements.less
|
This file is containing some of the utility functions or mixins for less. This file is from Joel Sutherland. |
core.less/core.css
|
This file is containing all common styles for all the pages. |
pages.less/pages.css
|
Pages contains the styles for all supported third-party JS/CSS plugins. It has overwritten version of styles. |
components.less/components.css
|
This is the one of the core and important file. It contains the styles for all the components, ui elements, and some other parts of the theme. |
responsive.less/responsive.css
|
This file is containing the styles related to responsiveness support. |
icons.less/icons.css
|
Combines various font icons. You should remove the fonts you don't plan to use from this file and recompile it. |
menu.less
|
This is for default sidebar menu. If you would like to change to some other style check below. |
menu_sm.less
|
Include this file instead of menu.less if you would like to have small sidebar menu.
|
menu_light.less
|
Include this file instead of menu.less if you would like to have light sidebar menu.
|
menu_light_sm.less
|
Include this file instead of menu.less if you would like to have light sidebar with small menu.
|
Adminox uses jQuery, Bootstrap JS framework(at its core) and some of the third-party plugins. There are may more third party plugin which you can use according to your needs. The css is already containing matching style for these plugins so you will not need to do anything around it.
Files are explained below:
| File | Description |
|---|---|
jquery.js, bootstrap.js,
jquery.slimscroll, etc.
|
These files are used at core of the theme. |
jquery.app.js
|
This is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc. |
jquery.core.js
|
This file contains the definition of some of the key components (e.g. notifications, portlet, etc) and code (for self-initialization) related to some of the controls (e.g. modal, range-slider, switchery, multiselect, etc) |
pages/*.js
|
These are the files containing pages specific code. They are mainly used for demo purpose. |
plugins/**.js
|
All supported and integrated third-party plugins are included in here. |
The theme contains various utilies including some helper classes, widgets, etc. Please see below some helper classes.
Helper Classes:
| Class | Description |
|---|---|
| .p-0 | Removes all padding space |
| .p-20 | Adds 20px padding |
| .p-30 | Adds 30px padding |
| .p-t-0 | Remove top padding |
| .p-t-10 | Adds 10px top padding |
| .p-b-10 | Adds 10px bottom padding |
| .p-l-0 | Remove left 0px padding |
| .p-r-0 | Remove right 0px padding |
| .p-l-r-10 | Adds 10px left and right padding |
| .m-0 | Remove all margin |
| .m-r-5 | Adds 5px right margin |
| .m-r-10 | Adds 10px right margin |
| .m-r-15 | Adds 15px right margin |
| .m-l-10 | Adds 10px left margin |
| .m-l-15 | Adds 15px left margin |
| .m-t-0 | Remove top margin |
| .m-t-10 | Adds 10px top margin |
| .m-t-15 | Adds 15px top margin |
| .m-t-20 | Adds 20px top margin |
| .m-t-30 | Adds 30px top margin |
| .m-t-40 | Adds 40px top margin |
| .m-b-0 | Remove bottom margin |
| .m-b-10 | Adds 10px bottom margin |
| .m-b-15 | Adds 15px bottom margin |
| .m-b-30 | Adds 30px bottom margin |
| .w-xs | Minimum width 80px |
| .w-sm | Minimum width 95px |
| .w-md | Minimum width 110px |
| .w-lg | Minimum width 140px |
| .b-0 | Removes all borders |
| .w-xs | minimum width 80px |
| .w-sm | minimum width 95px |
| .w-md | minimum width 110px |
| .w-lg | minimum width 140px |
| .m-h-40 | minimum height 40px |
| .m-h-50 | minimum height 50px |
| .font-normal | font normal |
| .font-600 | font weight 600 |
| .font-bold | font weight 700 |
| .font-light | font weight 300 |
| .font-14 | font size 14px |
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. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.
Stay Awesome!
- Coderthemes
Version 1.2.0 29 Jun 2017
Version 1.1.0 22 May 2017
Version 1.0.0 17 April 2017
Copyright © 2017 Coderthemes.com