Environment Setup for development.

To customize and build the templare to your specifications, Unzip the downloaded file and open the src/ folder. You will find all the necessary files to build the template. You need to have Node and Git installed on your machine. This project is bundled with gulp and requires Gulp to build the template. To install gulp, run the following command in the terminal.

npm i gulp-cli -g
copy

To install all dependencies needed for this project, run the following command in the terminal.

npm i
copy

Go ahead and edit the files into your project as you want. Happy coding! 😊

Much ❤ from Dashmos Agency

Basic Customization

You can edit the files directly in dist/. As mentioned, these are ready to ship.
Additionally, you can edit the files in src/ by adding your custom vanilla .css code and .js in src/custom/ directory. You can add code in the custom.css and custom.js files.
By doing this, your code overrides the theme code. But is loaded as separate customization via the <script> and <link> tags. It is loaded after the theme and vendor files.

Here's a demo of how your custom css code is loaded;

<!-- All Vendors -->
<link rel="stylesheet" href="assets/css/vendor.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="assets/css/aio-admin.css">
<!-- Your Custom Code -->
<link rel="stylesheet" href="assets/css/custom.css">

Here's a demo of how your custom js code is loaded;

<!-- All Vendors -->
<script src="assets/js/vendor.js"></script>
<!-- Theme JS -->
<script src="assets/js/aio.admin.js"></script>
<!-- Your Custom Code -->
<script src="assets/js/custom.js"></script>

Advanced Customization.

This is done via a Gulp-based flow where your code is automatically integrated into theme files and compiled at once. Here is the directory you need to use for this process.

custom/With-Gulp/
<!-- Inside You find these folders -->
js/
scss/

SCSS User Customization

You can add your custom variable overrides via the _user-variables.scss file located in custom/With-Gulp/scss/_user-variables.scss.
You can then add any .scss customization in the _user-custom.scss files in the same directory mentioned above.

JS User Customization

You can add your custom Javascript via the custom.js file located in custom/With-Gulp/js/custom.js.

All the above code will be integrated into the aio-admin.css and aio-admin.js respectively.

Bundle And Build

After you have customized everything and are ready to ship, You can compile the files into the dist/ folder directory by running the gulp build command in the terminal.
What this does is compile all the .scss files into one .css file named aio-admin.css.

The compiled .scss files are: bootstrap.scss, theme.scss and user-custom.scss.

It also compiles the .js files of the theme into a file named aio-admin.js.
Finally, It bundles all individual Vendor .css and .js files into one vendors.css and one vendors.js file respectively.

The compiled .js are: theme.js, and any other .js files in src/scripts/ directory.

gulp build
copy