Thank you
First of all, thank you for purchasing my template.
Adomx is a responsive HTML Admin template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Adomx and provide a consistent look throughout the template.
Before you start working with the template, we suggest you go through the elements pages that are bundled with the template. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.
Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this template, please open a support ticket https://hasthemes.com/contact-us/
This is the simple static HTML template so no need any headache to install it. Just double click on any html (html/light/) file and you can access it.
1) Install Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.
2) NPM Packages: You can do this by running npm install from the root of your project to install all the necessary dependencies.
For compiling scss & js:
We used gulp for compiling scss and js file so if you are also using scss then try our gulp task manager to compile scss
If you never work with gulp then you need to get starterd from here: https://gulpjs.com/docs/en/getting-started/quick-start
1. Install gulp globally:
If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.
$ npm install --global gulp-cli
2. Install gulp in your project devDependencies:
$ npm install --save-dev gulp
3. We already created gulpfile.js at the root of the project:
if you want any other task you can add that
4. Run gulp:
$ gulp
Adomx
|
|── documentation
|
|── gulp-build
| └
| └── css
| └── (All plugins CSS files)
└── vendor (Bootstrap & all icon font CSS files) └── fonts
| └── images
| └── js
| └── (All plugins JS & plugins active JS files) | └── vendor (Bootstrap, jQuery, Modernizr & Popper JS files)
| └── main.js
| └── media
| └── scsspartials (All HTML Partials files)
| └── All HTML Files
| └──
|└──
|── html
| └── dark
| └── assets
| └── css
| └── (All plugins CSS files)
└── vendor (Bootstrap & all icon font CSS files)
| └── fonts
| └── images
| └── js
| └── (All plugins JS & plugins active JS files) | └── vendor (Bootstrap, jQuery, Modernizr & Popper JS files)
| └── main.js
| └── media
| └── scss
| └── All HTML Files
|
| └── dark-rtl |
| └── light |
| └── light-rtl
|
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Adomx - Responsive Bootstrap 4 Admin Template</title>
<meta name="robots" content="noindex, follow" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
<!-- CSS
============================================ -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
<!-- Icon Font CSS -->
<link rel="stylesheet" href="assets/css/vendor/material-design-iconic-font.min.css">
<link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/vendor/themify-icons.css">
<link rel="stylesheet" href="assets/css/vendor/cryptocurrency-icons.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/css/plugins/plugins.css">
<!-- Helper CSS -->
<link rel="stylesheet" href="assets/css/helper.css">
<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main-wrapper">
<!-- Header Section Start -->
<div class="header-section">
</div><!-- Header Section End -->
<!-- Side Header Start -->
<div class="side-header show">
</div><!-- Side Header End -->
<!-- Content Body Start -->
<div class="content-body">
</div><!-- Content Body End -->
<!-- Footer Section Start -->
<div class="footer-section">
</div><!-- Footer Section End -->
</div>
<!-- JS
============================================ -->
<!-- Global Vendor, plugins & Activation JS -->
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!--Plugins JS-->
<script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
<script src="assets/js/plugins/tippy4.min.js.js"></script>
<!--Main JS-->
<script src="assets/js/main.js"></script>
<!-- Plugins & Activation JS For Only This Page -->
<!--VMap-->
<script src="assets/js/plugins/vmap/jquery.vmap.min.js"></script>
<script src="assets/js/plugins/vmap/maps/jquery.vmap.world.js"></script>
<script src="assets/js/plugins/vmap/maps/samples/jquery.vmap.sampledata.js"></script>
<script src="assets/js/plugins/vmap/vmap.active.js"></script>
</body>
</html>
We include both html & gulp build version. If you don't want to use gulp-build you can use already compiled html version and you will find all layout option files here light, light-rtl, dark & dark-rtl. So you can chose the layout you like and use it. If you want to use gulp-build and change the layout option follow the instruction below.
To change the layout into dark version just use class skin-dark in body tag.
<body class="skin-dark">
To change the layout into rtl version just use attribute dir="rtl" in body tag.
<body dir="rtl">
To change the primary color if you are using gulp-build you can change it in _variabls.scss from assets/scss folder and compile it using gulp cmd. As for the html version we already include 7 color style files so if you want to change the primary color into the color we included you can change the main css file name in html form style.css to style-indigo.css or in any included color file name.
<!-- Main Style CSS --> <link rel="stylesheet" href="assets/css/style.css">
to
<!-- Main Style CSS --> <link rel="stylesheet" href="assets/css/style-indigo.css">
We include aditonal 11 color for header and sidebar skin you can use them by adding a additonal class to body tag. Header & Sidebar colors are ( light, dark, primary, secondary, indigo, purple, pink, red, brown, orange, green ).
For header skin color add a class header-top-colorName in body tag.
<body class="header-top-primary">
For sidebar skin color add a class side-header-colorName in body tag.
<body class="side-header-primary">
Icons
v1.0.1 (01-06-2019)
- update: Raphael js.
- fixed: Elements media image missing.
v1.0.0 (21-05-2019)
- Initial release