Template

The base template must include all the assets commented with mandatory for all pagesin order to get the layout functioning properly. The custom assets commented with used for this page only can be skipped depending on project requirements and the assets includes must follow the below order:

<!DOCTYPE html>
<html lang="zxx">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keyword" content="">
	<meta name="author" content="WRAPCODERS">
	<!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->
	<!--! BEGIN: Apps Title-->
	<title>Duralux</title>
	<!--! END:  Apps Title-->
	<!--! BEGIN: Favicon-->
	<link type="image/x-icon" rel="shortcut icon" href="./../assets/images/favicon.ico">
	<!--! END: Favicon-->
	<!--! BEGIN: Bootstrap CSS-->
	<link type="text/css" rel="stylesheet" href="./../assets/css/bootstrap.min.css">
	<!--! END: Bootstrap CSS-->
	<!--! BEGIN: Vendors CSS-->
	<link type="text/css" rel="stylesheet" href="./../assets/vendors/css/vendors.min.css">
	<!--! END: Vendors CSS-->
	<!--! BEGIN: Custom CSS-->
	<link type="text/css" rel="stylesheet" href="./../assets/css/theme.min.css">
	<!--! END: Custom CSS-->
	<!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
	<!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
	<!--[if lt IE 9]>
	<script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>

	<!--! ================================================================ !-->
	<!--! BEGIN: Main Wrapper [main-wrapper] !-->
	<!--! ================================================================ !-->
	<main class="vh-100 d-flex position-relative main-wrapper">

	</div>
	<!--! ================================================================ !-->
	<!--! END: Main Content Body [main-content-body] !-->
	<!--! ================================================================ !-->

	<!--! ================================================================ !-->
	<!--! Footer Script !-->
	<!--! ================================================================ !-->
	<!--! BEGIN: Vendors JS !-->
	<script src="./../assets/vendors/js/vendors.min.js"></script>
	<!-- vendors.min.js {always must need to be top} -->
	<!--! END: Vendors JS !-->
	<!--! BEGIN: Plugin Init JS !-->
	<!--! END: Plugin Init JS !-->
	<!--! BEGIN: Theme Init JS !-->
	<!--! END: Theme Init JS !-->
</body>
</html>
Styling

If you do not want to use SASS then you can use ( getDuralux/html/webapps/dist/assets/css/theme.min.css ) folder. We have added all the themes folder ( default, saas, creative etc) in the dist folder. You can directly change the theme.min.css file. We suggest you not make any changes in the app, bootstrap or other CSS files.

  • GetDuralux
    • HTML
      • CRM
        • dist (deployment)
          • Assets
            • CSS
              • theme.min.css ( edit this file )
              • theme.min.css.map
              • bootstrap.min.css
              • bootstrap.min.css.map
        • src (source)
Recommendations

If you are familiar with SCSS (Recommended), you can easily change theme colors by changing the Bootstrap Theme color variables. Use src/assets/scss/ file to override Bootstrap variables. Duralux theme manages all the core scss files in src/assets/scss/ folder. Gulp command gulp sass-compile for scss compile will generate all css files in dist/assets/css.

  • GetDuralux
    • HTML
      • CRM
        • dist (deployment)
        • dist (source)
          • Assets
            • SCSS
              • Bootstrap
                • ./../**/*.scss
              • Theme ( customizable files )
                • ./**/*.scss ( custom code )
                • theme.scss( custom code )
JavaScript

Duralux theme manages all JS files in src/assets/js/**/* folder. Gulp task gulp clean all the files and folder from dist/ folder, and the task runner copy & build everythings from src folder and minify them.

It is not recommended to change any JS files inside src/assets/js/**/* folder to avoid future update conflicts. If you still modify the file, it may require to merge it manually with future updates.

  • GetDuralux
    • HTML
      • CRM
        • dist (deployment)
        • src (source)
          • Assets
            • JS
              • ./**/*.js (all custom js files)
← Folder Structure Layouts →