added dev and watch command

assets/css/style.css

@@ -2,14 +2,14 @@
 /**
  * Stisla
  *
- * Stisla is a clean & modern HTML5 admin template based on Bootstrap 4. 
+ * Stisla is a clean & modern HTML5 admin template based on Bootstrap 4.
  * Stisla will make it easier for you to create your own admin interface.
  *
- * @package	Stisla 
+ * @package	Stisla
- * @version	2.2.0
+ * @version	2.3.0
  * @author 	Muhamad Nauval Azhar
  * @url 	https://getstisla.com
- * 
+ *
  */
 /**
  * TABLE OF CONTENTS
@@ -136,6 +136,7 @@ a:not(.btn-social-icon):not(.btn-social):not(.page-link) .fab {
   .lead {
     font-size: 17px;
     line-height: 30px; } }
+
 h1, h2, h3, h4, h5, h6 {
   font-weight: 700; }
 
@@ -265,11 +266,9 @@ select.form-control:not([size]):not([multiple]) {
     border-color: transparent; }
 
 .selectgroup {
-  display: -ms-inline-flexbox;
   display: inline-flex; }
 
 .selectgroup-item {
-  -ms-flex-positive: 1;
   flex-grow: 1;
   position: relative; }
   .selectgroup-item + .selectgroup-item {
@@ -314,20 +313,18 @@ select.form-control:not([size]):not([multiple]) {
   .selectgroup-button-icon i {
     font-size: 14px; }
 
-.selectgroup-input:focus + .selectgroup-button, .selectgroup-input:checked + .selectgroup-button {
+.selectgroup-input:focus + .selectgroup-button,
+.selectgroup-input:checked + .selectgroup-button {
   background-color: #6777ef;
   color: #fff;
   z-index: 1; }
 
 .selectgroup-pills {
   display: block;
-  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -ms-flex-align: start;
   align-items: flex-start; }
   .selectgroup-pills .selectgroup-item {
     margin-right: .5rem;
-    -ms-flex-positive: 0;
     flex-grow: 0; }
   .selectgroup-pills .selectgroup-button {
     border-radius: 50px !important; }
@@ -338,9 +335,7 @@ select.form-control:not([size]):not([multiple]) {
   -ms-user-select: none;
   user-select: none;
   cursor: default;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -ms-flex-align: center;
   align-items: center;
   margin: 0; }
 
@@ -350,9 +345,7 @@ select.form-control:not([size]):not([multiple]) {
   opacity: 0; }
 
 .custom-switches-stacked {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
   flex-direction: column; }
   .custom-switches-stacked .custom-switch {
     margin-bottom: .5rem; }
@@ -382,6 +375,7 @@ select.form-control:not([size]):not([multiple]) {
   background: #6777ef; }
   .custom-switch-input:checked ~ .custom-switch-indicator:before {
     left: calc(1rem + 1px); }
+
 .custom-switch-input:focus ~ .custom-switch-indicator {
   border-color: #6777ef; }
 
@@ -414,6 +408,7 @@ select.form-control:not([size]):not([multiple]) {
 
 .imagecheck-input:focus ~ .imagecheck-figure {
   border-color: #6777ef; }
+
 .imagecheck-input:checked ~ .imagecheck-figure {
   border-color: rgba(0, 40, 100, 0.24); }
 
@@ -522,6 +517,7 @@ select.form-control:not([size]):not([multiple]) {
 
 .list-group-item.active {
   background-color: #6777ef; }
+
 .list-group-item.disabled {
   color: #c9d7e0; }
 
@@ -766,10 +762,12 @@ select.form-control:not([size]):not([multiple]) {
     height: auto;
     min-height: auto;
     display: block; }
-  .card.card-statistic-1 .card-header h4, .card.card-statistic-2 .card-header h4 {
+  .card.card-statistic-1 .card-header h4,
+  .card.card-statistic-2 .card-header h4 {
     line-height: 1.2;
     color: #98a6ad; }
-  .card.card-statistic-1 .card-body, .card.card-statistic-2 .card-body {
+  .card.card-statistic-1 .card-body,
+  .card.card-statistic-2 .card-body {
     padding-top: 0; }
   .card.card-statistic-1 .card-body, .card.card-statistic-2 .card-body {
     font-size: 26px;
@@ -804,7 +802,8 @@ select.form-control:not([size]):not([multiple]) {
     padding-top: 25px; }
   .card.card-statistic-2 .card-body {
     padding-top: 20px; }
-  .card.card-statistic-2 .card-header + .card-body, .card.card-statistic-2 .card-body + .card-header {
+  .card.card-statistic-2 .card-header + .card-body,
+  .card.card-statistic-2 .card-body + .card-header {
     padding-top: 0; }
   .card.card-statistic-1 .card-header h4, .card.card-statistic-2 .card-header h4 {
     font-weight: 600;
@@ -890,6 +889,7 @@ select.form-control:not([size]):not([multiple]) {
     .card.card-large-icons .card-icon {
       width: 100%;
       height: 200px; } }
+
 @media (max-width: 767.98px) {
   .card .card-header {
     height: auto;
@@ -899,6 +899,7 @@ select.form-control:not([size]):not([multiple]) {
       flex-grow: 0;
       width: 100%;
       margin-top: 10px; } }
+
 @media (min-width: 768px) and (max-width: 991.98px) {
   .card .card-stats .card-stats-items {
     height: 49px; }
@@ -910,22 +911,30 @@ select.form-control:not([size]):not([multiple]) {
     height: 85px !important; }
   .card.card-hero .card-header {
     padding: 25px; } }
+
 /* 3.6 Table */
 .table td, .table:not(.table-bordered) th {
   border-top: none; }
-.table:not(.table-sm):not(.table-md):not(.dataTable) td, .table:not(.table-sm):not(.table-md):not(.dataTable) th {
+
+.table:not(.table-sm):not(.table-md):not(.dataTable) td,
+.table:not(.table-sm):not(.table-md):not(.dataTable) th {
   padding: 0 25px;
   height: 60px;
   vertical-align: middle; }
+
 .table:not(.table-sm) thead th {
   border-bottom: none;
   background-color: rgba(0, 0, 0, 0.04);
   color: #666;
   padding-top: 15px;
   padding-bottom: 15px; }
-.table.table-md th, .table.table-md td {
+
+.table.table-md th,
+.table.table-md td {
   padding: 10px 15px; }
-.table.table-bordered td, .table.table-bordered th {
+
+.table.table-bordered td,
+.table.table-bordered th {
   border-color: #f6f6f6; }
 
 .table-links {
@@ -946,6 +955,7 @@ table tr:hover .table-links {
 @media (max-width: 575.98px) {
   .table-responsive table {
     min-width: 800px; } }
+
 /* 3.7 Tooltip */
 .tooltip {
   font-size: 12px; }
@@ -1022,6 +1032,7 @@ table tr:hover .table-links {
 .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
   color: #fff;
   background-color: #6777ef; }
+
 .nav-pills .nav-item .nav-link {
   color: #6777ef;
   padding-left: 15px !important;
@@ -1045,9 +1056,11 @@ table tr:hover .table-links {
   color: #6777ef;
   border-radius: 3px;
   margin: 0 3px; }
+
 .page-item.active .page-link {
   background-color: #6777ef;
   border-color: #6777ef; }
+
 .page-item.disabled .page-link {
   border-color: transparent;
   background-color: #f9fafe;
@@ -1135,6 +1148,7 @@ h6 .badge {
 .btn:focus {
   box-shadow: none !important;
   outline: none; }
+
 .btn:active {
   box-shadow: none !important;
   outline: none; }
@@ -1374,10 +1388,12 @@ h6 .badge {
   color: #6777ef;
   font-weight: 600;
   font-size: 16px; }
+
 .media .media-icon {
   font-size: 20px;
   margin-right: 15px;
   line-height: 1; }
+
 .media .media-title {
   margin-top: 0;
   margin-bottom: 5px;
@@ -1387,14 +1403,17 @@ h6 .badge {
   .media .media-title a {
     font-weight: inherit;
     color: #000; }
+
 .media .media-description {
   line-height: 24px;
   color: #34395e; }
+
 .media .media-links {
   margin-top: 10px; }
   .media .media-links a {
     font-size: 12px;
     color: #999; }
+
 .media .media-progressbar {
   flex: 1; }
   .media .media-progressbar .progress-text {
@@ -1402,12 +1421,14 @@ h6 .badge {
     font-weight: 600;
     margin-bottom: 5px;
     color: #34395e; }
+
 .media .media-cta {
   margin-left: 40px; }
   .media .media-cta .btn {
     padding: 5px 15px;
     border-radius: 30px;
     font-size: 12px; }
+
 .media .media-items {
   display: flex; }
   .media .media-items .media-item {
@@ -1487,6 +1508,7 @@ h6 .badge {
   border: none;
   padding-bottom: 0;
   padding-top: 10px; }
+
 .popover .popover-body {
   padding: 15px;
   line-height: 24px; }
@@ -1538,7 +1560,8 @@ h6 .badge {
     font-weight: 500;
     border-radius: 3px 0 0 3px;
     transition: all 1s; }
-    .navbar .form-inline .form-control:focus, .navbar .form-inline .form-control:focus + .btn {
+    .navbar .form-inline .form-control:focus,
+    .navbar .form-inline .form-control:focus + .btn {
       position: relative;
       z-index: 9001; }
     .navbar .form-inline .form-control:focus + .btn + .search-backdrop {
@@ -1655,6 +1678,7 @@ h6 .badge {
 
 .navbar .nav-link:hover {
   color: #fff; }
+
 .navbar .nav-link.disabled {
   color: #fff;
   opacity: .6; }
@@ -1665,7 +1689,6 @@ h6 .badge {
 @media (max-width: 575.98px) {
   body.search-show .navbar .form-inline .search-element {
     display: block; }
-
   .navbar .form-inline .search-element {
     position: absolute;
     top: 10px;
@@ -1686,14 +1709,17 @@ h6 .badge {
     display: none; }
   .navbar .nav-link.nav-link-lg div {
     display: none; } }
+
 @media (min-width: 576px) and (max-width: 767.98px) {
   .navbar .form-inline .search-element {
     display: block; } }
+
 @media (min-width: 768px) and (max-width: 991.98px) {
   .collapse {
     position: relative; }
     .collapse .navbar-nav {
       position: absolute; } }
+
 @media (max-width: 1024px) {
   .nav-collapse {
     position: relative; }
@@ -1719,7 +1745,6 @@ h6 .badge {
       .nav-collapse .navbar-nav .nav-item:focus > a, .nav-collapse .navbar-nav .nav-item.active > a {
         background-color: #6777ef;
         color: #fff; }
-
   .navbar {
     left: 5px;
     right: 0; }
@@ -1727,10 +1752,10 @@ h6 .badge {
       position: absolute; }
     .navbar .navbar-nav {
       flex-direction: row; }
-
   .navbar-expand-lg .navbar-nav .dropdown-menu-right {
     right: 0;
     left: auto; } }
+
 /* 3.19 Dropdown */
 .dropdown-item.has-icon i {
   margin-top: -1px;
@@ -1883,9 +1908,11 @@ a.dropdown-item {
     .dropdown-list-toggle .dropdown-list {
       left: 10px !important;
       width: calc(100% - 20px); } }
+
 /* 3.20 Dropdown */
 .tab-content.no-padding > .tab-pane {
   padding: 0; }
+
 .tab-content > .tab-pane {
   line-height: 28px; }
 
@@ -1913,6 +1940,7 @@ a.dropdown-item {
   /* IE9 Compat Modes */
   src: local("Nunito Regular"), local("Nunito-Regular"), url("../fonts/nunito-v9-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v9-latin-regular.woff2") format("woff2"), url("../fonts/nunito-v9-latin-regular.woff") format("woff"), url("../fonts/nunito-v9-latin-regular.ttf") format("truetype"), url("../fonts/nunito-v9-latin-regular.svg#Nunito") format("svg");
   /* Legacy iOS */ }
+
 /* nunito-600 - latin */
 @font-face {
   font-family: 'Nunito';
@@ -1922,6 +1950,7 @@ a.dropdown-item {
   /* IE9 Compat Modes */
   src: local("Nunito SemiBold"), local("Nunito-SemiBold"), url("../fonts/nunito-v9-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v9-latin-600.woff2") format("woff2"), url("../fonts/nunito-v9-latin-600.woff") format("woff"), url("../fonts/nunito-v9-latin-600.ttf") format("truetype"), url("../fonts/nunito-v9-latin-600.svg#Nunito") format("svg");
   /* Legacy iOS */ }
+
 /* nunito-700 - latin */
 @font-face {
   font-family: 'Nunito';
@@ -1931,6 +1960,7 @@ a.dropdown-item {
   /* IE9 Compat Modes */
   src: local("Nunito Bold"), local("Nunito-Bold"), url("../fonts/nunito-v9-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v9-latin-700.woff2") format("woff2"), url("../fonts/nunito-v9-latin-700.woff") format("woff"), url("../fonts/nunito-v9-latin-700.ttf") format("truetype"), url("../fonts/nunito-v9-latin-700.svg#Nunito") format("svg");
   /* Legacy iOS */ }
+
 /* nunito-800 - latin */
 @font-face {
   font-family: 'Nunito';
@@ -1940,6 +1970,7 @@ a.dropdown-item {
   /* IE9 Compat Modes */
   src: local("Nunito ExtraBold"), local("Nunito-ExtraBold"), url("../fonts/nunito-v9-latin-800.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v9-latin-800.woff2") format("woff2"), url("../fonts/nunito-v9-latin-800.woff") format("woff"), url("../fonts/nunito-v9-latin-800.ttf") format("truetype"), url("../fonts/nunito-v9-latin-800.svg#Nunito") format("svg");
   /* Legacy iOS */ }
+
 :root {
   /* Colors */
   --primary: color(primary);
@@ -2181,8 +2212,10 @@ pre {
     height: 7px;
     background-color: #ffa426;
     border-radius: 50%;
-    animation: pulsate 1s ease-out;
+    -webkit-animation: pulsate 1s ease-out;
-    animation-iteration-count: infinite;
+            animation: pulsate 1s ease-out;
+    -webkit-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
     opacity: 1; }
   .beep.beep-sidebar:after {
     position: static;
@@ -2194,12 +2227,11 @@ pre {
     overflow: auto; }
     .fc-overflow #myEvent {
       width: 800px; }
-
   .ionicons li {
     width: calc(100% / 4); }
-
   .icon-wrap {
     width: 100%; } }
+
 /* 4.2 Section */
 .section {
   position: relative;
@@ -2284,6 +2316,7 @@ pre {
     .section .section-header .section-header-breadcrumb {
       flex-basis: 100%;
       margin-top: 10px; } }
+
 /* 4.3 Page */
 .page-error {
   height: 100%;
@@ -2315,6 +2348,7 @@ pre {
 @media (max-width: 575.98px) {
   .page-error .page-search {
     width: 100%; } }
+
 /* 4.4 Layout */
 .main-sidebar {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
@@ -2337,6 +2371,7 @@ body.sidebar-gone .main-sidebar {
 
 body.sidebar-mini .hide-sidebar-mini {
   display: none !important; }
+
 body.sidebar-mini .main-sidebar {
   width: 65px;
   overflow: initial !important;
@@ -2353,9 +2388,19 @@ body.sidebar-mini .main-sidebar {
     top: 0;
     z-index: -1;
     opacity: 0;
-    animation-name: mini-sidebar;
+    -webkit-animation-name: mini-sidebar;
-    animation-duration: 1.5s;
+            animation-name: mini-sidebar;
-    animation-fill-mode: forwards; }
+    -webkit-animation-duration: 1.5s;
+            animation-duration: 1.5s;
+    -webkit-animation-fill-mode: forwards;
+            animation-fill-mode: forwards; }
+
+@-webkit-keyframes mini-sidebar {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
 @keyframes mini-sidebar {
   from {
     opacity: 0; }
@@ -2427,26 +2472,32 @@ body.sidebar-mini .main-sidebar {
     body.sidebar-mini .main-sidebar .sidebar-menu li:hover > ul.dropdown-menu li .dropdown-menu {
       left: 200px;
       padding: 0; }
+
 body.sidebar-mini .navbar {
   left: 65px; }
+
 body.sidebar-mini .main-content, body.sidebar-mini .main-footer {
   padding-left: 90px; }
 
 body.layout-2 .navbar-bg {
   z-index: 889;
   height: 70px; }
+
 body.layout-2 .navbar {
   left: 0;
   z-index: 890; }
+
 body.layout-2 .main-wrapper {
   display: flex;
   flex-wrap: wrap;
   padding: 0 50px; }
+
 body.layout-2 .main-sidebar,
 body.layout-2 .main-content,
 body.layout-2 .main-footer {
   flex-shrink: 0;
   flex-grow: 0; }
+
 body.layout-2 .main-sidebar {
   background-color: transparent;
   box-shadow: none;
@@ -2466,11 +2517,13 @@ body.layout-2 .main-sidebar {
       background-color: transparent; }
   body.layout-2 .main-sidebar .sidebar-menu li ul.dropdown-menu li a {
     padding-left: 34px; }
+
 body.layout-2 .main-content {
   padding-top: 107px;
   padding-left: 30px;
   padding-right: 0;
   width: calc(100% - 200px); }
+
 body.layout-2 .main-footer {
   margin-left: 230px;
   width: calc(100% - 230px);
@@ -2480,6 +2533,7 @@ body.layout-2 .main-footer {
 body.layout-3 .navbar {
   left: 0;
   right: 0; }
+
 body.layout-3 .navbar.navbar-secondary {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
   background-color: #fff;
@@ -2566,10 +2620,12 @@ body.layout-3 .navbar.navbar-secondary {
     body.layout-3 .navbar.navbar-secondary .navbar-nav > .nav-item .dropdown-menu .nav-item .nav-link:focus {
       background-color: #6777ef;
       color: #fff; }
+
 body.layout-3 .main-content {
   padding-left: 0;
   padding-right: 0;
   padding-top: 170px; }
+
 body.layout-3 .main-footer {
   padding-left: 0;
   padding-right: 0; }
@@ -2588,6 +2644,7 @@ body.layout-3 .main-footer {
     letter-spacing: 1.5px;
     font-weight: 700;
     color: #000; }
+
 .main-sidebar .sidebar-user {
   display: inline-block;
   width: 100%;
@@ -2599,6 +2656,7 @@ body.layout-3 .main-footer {
     .main-sidebar .sidebar-user .sidebar-user-picture img {
       width: 50px;
       border-radius: 50%; }
+
 .main-sidebar .sidebar-menu {
   padding: 0;
   margin: 0; }
@@ -2709,11 +2767,13 @@ body.layout-3 .main-footer {
 body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active a {
   background-color: #6777ef;
   color: #fff; }
+
 body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active ul.dropdown-menu li a {
   color: #e8ebfd; }
   body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active ul.dropdown-menu li a:hover {
     background-color: #6777ef;
     color: #fff; }
+
 body:not(.sidebar-mini) .sidebar-style-1 .sidebar-menu li.active ul.dropdown-menu li.active a {
   color: #fff; }
 
@@ -2726,10 +2786,12 @@ body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu > li.active > a {
     position: absolute;
     left: 0;
     top: 50%;
-    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
     height: 25px;
     width: 4px;
     background-color: #6777ef; }
+
 body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-menu li a {
   padding-left: 61px;
   background-color: #fff; }
@@ -2737,29 +2799,23 @@ body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-men
 @media (max-width: 1024px) {
   .sidebar-gone-hide {
     display: none !important; }
-
   .sidebar-gone-show {
     display: block !important; }
-
   .main-sidebar {
     position: fixed !important;
     margin-top: 0 !important;
     z-index: 891; }
-
   body.layout-2 .main-wrapper,
   body.layout-3 .main-wrapper {
     width: 100%;
     padding: 0;
     display: block; }
-
   .main-content {
     padding-left: 30px;
     padding-right: 30px;
     width: 100% !important; }
-
   .main-footer {
     padding-left: 30px; }
-
   body.search-show {
     overflow: hidden; }
     body.search-show .navbar {
@@ -2788,10 +2844,13 @@ body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-men
   @keyframes fadeinbackdrop {
     to {
       opacity: .6; } } }
+
 /* 4.5 Animation */
 .pulsate {
-  animation: pulsate 1s ease-out;
+  -webkit-animation: pulsate 1s ease-out;
-  animation-iteration-count: infinite;
+          animation: pulsate 1s ease-out;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
   opacity: 1; }
 
 @-webkit-keyframes pulsate {
@@ -2803,5 +2862,3 @@ body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu li.active ul.dropdown-men
   100% {
     -webkit-transform: scale(1.2, 1.2);
     opacity: 0.0; } }
-
-/*# sourceMappingURL=style.css.map */

gulpfile.js

@@ -15,245 +15,186 @@ const uglify = require('gulp-uglify-es').default;
 const imagemin = require('gulp-imagemin');
 const imageminMozjpeg = require('imagemin-mozjpeg');
 const nunjucks = require('gulp-nunjucks');
+const color = require('gulp-color');
 
 /**
  * Configuration
  * @type {String}
  */
-var cssDir = './dist/assets/css',
+var cssDir = './assets/css',
-    jsDir = './dist/assets/js',
+    jsDir = './assets/js',
-    sassDir = './sources/scss/*.scss',
+    htmlDir = './sources/pages',
-    imgDir = './dist/assets/img/*',
+    sassDir = './sources/scss',
-    /**
+    imgDir = './assets/img/*';
-     * CSS main file
-     * @type {Array}
-     */
-    CSSFiles = [
-      // Required dependencies
-      'node_modules/bootstrap/dist/css/bootstrap.min.css',
-      'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
-      // Stisla core
-      'dist/assets/css/style.css',
-    ],
-
-    CSSModules = [
-      // Modules
-      'node_modules/bootstrap-social/bootstrap-social.css',
-      'node_modules/selectric/public/selectric.css',
-      'node_modules/chocolat/dist/css/chocolat.css',
-      'node_modules/prismjs/themes/prism.css',
-      'node_modules/dropzone/dist/min/dropzone.min.css',
-      'node_modules/jqvmap/dist/jqvmap.min.css',
-      'node_modules/flag-icon-css/css/flag-icon.min.css',
-      'node_modules/owl.carousel/dist/assets/owl.carousel.min.css',
-      'node_modules/owl.carousel/dist/assets/owl.theme.default.min.css',
-      'node_modules/summernote/dist/summernote-bs4.css',
-      'node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css',
-      'node_modules/codemirror/lib/codemirror.css',
-      'node_modules/codemirror/theme/duotone-dark.css',
-      'node_modules/bootstrap-daterangepicker/daterangepicker.css',
-      'node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css',
-      'node_modules/select2/dist/css/select2.min.css',
-      'node_modules/bootstrap-timepicker/css/bootstrap-timepicker.min.css',
-      'node_modules/weathericons/css/weather-icons.min.css',
-      'node_modules/weathericons/css/weather-icons-wind.min.css',
-      'node_modules/fullcalendar/dist/fullcalendar.min.css',
-      'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css',
-      'node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css',
-      'node_modules/ionicons201/css/ionicons.min.css',
-      'node_modules/izitoast/dist/css/iziToast.min.css',
-      // add more here
-    ],
-
-    components_css = [
-      // Stisla core
-      'dist/assets/css/components.css',
-    ],
-
-    JSFiles = [
-      // Required dependencies
-      'node_modules/jquery/dist/jquery.js',
-      'node_modules/popper.js/dist/umd/popper.js',
-      'node_modules/tooltip.js/dist/umd/tooltip.js',
-      'node_modules/bootstrap/dist/js/bootstrap.js',
-      'node_modules/nicescroll/dist/jquery.nicescroll.js',
-      'node_modules/moment/moment.js',
-      // Stisla core
-      'dist/assets/js/stisla.js',
-    ],
-
-    JSModules = [
-      // Modules
-      'node_modules/jquery-pwstrength/jquery.pwstrength.js',
-      'node_modules/selectric/public/jquery.selectric.js',
-      'node_modules/chocolat/dist/js/jquery.chocolat.js',
-      'node_modules/jquery-ui-dist/jquery-ui.js',
-      'node_modules/prismjs/prism.js',
-      'node_modules/dropzone/dist/dropzone.js',
-      'node_modules/jquery-sparkline/jquery.sparkline.js',
-      'node_modules/chart.js/dist/Chart.js',
-      'node_modules/jqvmap/dist/jquery.vmap.js',
-      'node_modules/jqvmap/dist/maps/jquery.vmap.world.js',
-      'node_modules/jqvmap/dist/maps/jquery.vmap.indonesia.js',
-      'node_modules/owl.carousel/dist/owl.carousel.js',
-      'node_modules/summernote/dist/summernote-bs4.js',
-      'node_modules/jquery_upload_preview/assets/js/jquery.uploadPreview.js',
-      'node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js',
-      'node_modules/codemirror/lib/codemirror.js',
-      'node_modules/codemirror/mode/javascript/javascript.js',
-      'node_modules/cleave.js/dist/cleave.js',
-      'node_modules/cleave.js/dist/addons/cleave-phone.us.js',
-      'node_modules/bootstrap-daterangepicker/daterangepicker.js',
-      'node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js',
-      'node_modules/bootstrap-timepicker/js/bootstrap-timepicker.js',
-      'node_modules/select2/dist/js/select2.full.js',
-      'node_modules/gmaps/gmaps.js',
-      'node_modules/simpleweather/jquery.simpleWeather.js',
-      'node_modules/sticky-kit/dist/sticky-kit.js',
-      'node_modules/fullcalendar/dist/fullcalendar.js',
-      'node_modules/datatables/media/js/jquery.dataTables.js',
-      'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js',
-      'node_modules/datatables.net-select-bs4/js/select.bootstrap4.js',
-      'node_modules/sweetalert/dist/sweetalert.min.js',
-      'node_modules/izitoast/dist/js/iziToast.js',
-      // add more here
-      // Stisla functions
-      'dist/assets/js/scripts.js'
-    ];
-
 
 /**
  * Helpers
  */
 
-function _js_bundle(JSFiles, filename, jsDir) {
+function _compile_html(path, log=true, ret=false) {
-  return src(JSFiles)
+  if(log)
+    _log('[HTML] Compiling:' + path, 'GREEN');
+
+  let compile_html = src(path, { base: htmlDir })
   .pipe(plumber())
-  .pipe(concat(filename))
+  .pipe(nunjucks.compile({
-  .pipe(uglify())
+    version: '2.3.0'
-  .pipe(dest(jsDir))
+  },
-  .pipe(notify({
+  /**
-    message: 'File <%= file.relative %> bundled successfully'
+   * Nunjucks options
-  }));
+   */
+  {
+    trimBlocks: true,
+    lstripBlocks: true,
+    /**
+     * Nunjucks filters
+     * @type {Object}
+     */
+    filters: {
+      is_active: (str, reg, page) => {
+        reg = new RegExp(reg, 'gm');
+        reg = reg.exec(page);
+        if(reg != null) {
+          return str;
+        }
+      }
+    }
+  }))
+  .pipe(dest('pages'))
+  .pipe(plumber.stop());
+
+  if(ret) return compile_html;
+
+  if(log)
+    _log('[HTML] Finished', 'GREEN');
 }
 
-function _css_bundle(CSSFiles, filename, cssDir) {
+function _compile_scss(path, log=true, ret=false) {
-  return src(CSSFiles)
+  if(log)
+    _log('[SCSS] Compiling:' + path, 'GREEN');
+
+  let compile_scss = src(path)
   .pipe(plumber())
-  .pipe(concat(filename))
+  .pipe(sass({
-  .pipe(postcss([autoprefixer(), cssnano()]))
+    errorLogToConsole: true
+  }))
+  .on('error', console.error.bind(console))
+  .pipe(rename({
+    dirname: '',
+    extname: '.css'
+  }))
+  .pipe(postcss([autoprefixer()]))
   .pipe(dest(cssDir))
-  .pipe(notify({
+  .pipe(plumber.stop());
-    message: 'File <%= file.relative %> bundled successfully'
+
-  }));
+  if(ret) return compile_scss;
+
+  if(log)
+    _log('[SCSS] Finished', 'GREEN');
 }
 
+function _log(str, clr) {
+  if(!clr) clr = 'WHITE';
+  console.log(color(str, clr));
+}
+
+/**
+ * End of helper
+ */
+
 /**
  * Execution
  */
 
-function bundle_main_css() {
+function folder() {
-  return _css_bundle(CSSFiles, 'main.min.css', cssDir);
+  return src('*.*', {read: false})
-}
+  .pipe(dest('./assets'))
-
+  .pipe(dest('./assets/css'))
-function bundle_modules_css() {
+  .pipe(dest('./assets/js'))
-  return _css_bundle(CSSModules, 'modules.min.css', cssDir);
+  .pipe(dest('./assets/img'));
-}
-
-function bundle_components_css() {
-  return _css_bundle(components_css, 'components.min.css', cssDir);
-}
-
-function bundle_main_js() {
-  return _js_bundle(JSFiles, 'main.min.js', jsDir);
-}
-
-function bundle_modules_js() {
-  return _js_bundle(JSModules, 'modules.min.js', jsDir);
-}
-
-function folder(){
-   return src('*.*', {read: false})
-        .pipe(dest('./dist/assets'))
-        .pipe(dest('./dist/assets/css'))
-        .pipe(dest('./dist/assets/js'))
-        .pipe(dest('./dist/assets/img'))
 }
 
 function minify(){
   return src(sassDir)
-      .pipe(plumber())
+  .pipe(plumber())
-      .pipe(sass({
+  .pipe(sass({
-        errorLogToConsole: true
+    errorLogToConsole: true
-      }))
+  }))
-      .on('error', console.error.bind( console ))
+  .on('error', console.error.bind( console ))
-      .pipe(rename({
+  .pipe(rename({
-        suffix: '.min'
+    suffix: '.min'
-      }))
+  }))
-      .pipe(postcss([autoprefixer(), cssnano()]))
+  .pipe(postcss([autoprefixer(), cssnano()]))
-      .pipe(dest(cssDir))
+  .pipe(dest(cssDir))
-      .pipe(notify({
+  .pipe(notify({
-        message: 'Minify <%= file.relative %> berhasil bos'
+    message: 'Minify <%= file.relative %> berhasil bos'
-      }));
+  }));
 }
 
-function image(){
+function image() {
   return src(imgDir)
   .pipe(plumber())
   .pipe(imagemin([
     imageminMozjpeg({quality: 80})
   ]))
   .pipe(dest(imgDir))
-  .pipe(plumber.stop())
+  .pipe(plumber.stop());
 }
 
-function watching (){
+function compile_scss() {
+  return _compile_scss(sassDir + '/*.scss', false, true);
+}
+
+function compile_html() {
+  return _compile_html(htmlDir + '/*.html', false, true);
+}
+
+function watching() {
+  /**
+   * BrowserSync initialization
+   * @type {Object}
+   */
   browserSync.init({
     server:{
       baseDir: "./"
     },
-    port: 8080
+    startPath: 'pages/index.html',
+    port: 1000
+  });
+
+  /**
+   * Watch ${htmlDir}
+   */
+  watch([htmlDir + '/*.html', sassDir + '/*.scss']).on('change', (file) => {
+    if(file.indexOf('.scss') > -1) {
+      _compile_scss(file);
+    }
+
+    if(file.indexOf('.html') > -1) {
+      _compile_html(file);
+    }
+
+    browserSync.reload();
   });
-  watch('./sources/sass/*.scss', minify).on('change', browserSync.reload);
-  watch("*.html").on('change', browserSync.reload);
 }
 
-function  watchcss(){
+// Create folder first
-  watch('./sources/sass/*.scss', minify);
+exports.folder = folder;
-}
 
-function template() {
+// Minify images
-  return src('sources/pages/*.html')
-    .pipe(plumber())
-    .pipe(nunjucks.compile({
-      version: '2.3.0'
-    }, {
-      trimBlocks: true,
-      lstripBlocks: true,
-      filters: {
-        is_active: (str, reg, page) => {
-          reg = new RegExp(reg, 'gm');
-          reg = reg.exec(page);
-          if(reg != null) {
-            return str;
-          }
-        }
-      }
-    }))
-    .pipe(dest('pages'))
-    .pipe(notify({
-      message: 'File <%= file.relative %> compiled successfully'
-    }));
-}
-
-//create folder first
-// exports.folder = folder;
-exports.html = template;
-//then update source
-exports.update = parallel(bundle_main_css, bundle_modules_css, bundle_components_css);
-//minify  IMG SOURCE
 exports.image = image;
-//Run this command for styling OPs
+
+// Run this command for styling OPs
 exports.minify = minify;
-//Run this command for dev.
+
+// Compile SCSS
+exports.scss = compile_scss;
+
+// Compile HTML
+exports.html = compile_html;
+
+// Dist
+exports.dist = parallel(folder, compile_scss, compile_html);
+
+// Run this command for dev.
 exports.default = watching;

package.json

@@ -54,8 +54,9 @@
     "browser-sync": "^2.26.3",
     "cssnano": "^4.1.8",
     "gulp": "^4.0.0",
+    "gulp-color": "^0.0.2",
     "gulp-concat": "^2.6.1",
-    "gulp-imagemin": "^5.0.3",
+    "gulp-imagemin": "^3.4.0",
     "gulp-notify": "^3.2.0",
     "gulp-nunjucks": "^4.0.0",
     "gulp-plumber": "^1.2.1",
@@ -68,8 +69,9 @@
     "nunjucks": "^3.1.7"
   },
   "scripts": {
-    "stisla-start" : "yarn install --production=false",
+    "stisla-start": "yarn install --production=false",
-    "stisla-dev" : "yarn install --prod",
+    "stisla-dev": "yarn install --prod",
-    "dev" : "gulp"
+    "dist": "gulp dist",
+    "dev": "gulp"
   }
 }

scss/style.scss

@@ -0,0 +1,117 @@
+/**
+ * Stisla
+ *
+ * Stisla is a clean & modern HTML5 admin template based on Bootstrap 4.
+ * Stisla will make it easier for you to create your own admin interface.
+ *
+ * @package	Stisla
+ * @version	2.2.0
+ * @author 	Muhamad Nauval Azhar
+ * @url 	https://getstisla.com
+ *
+ */
+
+/**
+ * TABLE OF CONTENTS
+ *
+ * 1. Variable
+ * 2. Mixin
+ * 3. Bootstrap Override
+ * 	  3.1 Misc
+ * 	  3.2 Form
+ * 	  3.3 List
+ * 	  3.4 Alert
+ * 	  3.5 Card
+ * 	  3.6 Table
+ * 	  3.7 Tooltip
+ * 	  3.8 Modal
+ * 	  3.9 Nav
+ * 	  3.10 Pagination
+ * 	  3.11 Badge
+ * 	  3.12 Button
+ * 	  3.13 Media
+ * 	  3.14 Breadcrumb
+ * 	  3.15 Accordion
+ * 	  3.16 Popover
+ * 	  3.17 Grid
+ * 	  3.18 Navbar
+ * 	  3.19 Dropdown
+ * 	  3.20 Tab
+ * 	  3.21 Progressbar
+ * 	  3.22 Jumbotron
+ * 	  3.23 Carousel
+ * 4. Theme Style
+ * 	  4.1 Misc
+ * 	  4.2 Section
+ * 	  4.3 Page
+ * 	  4.4 Layout
+ * 	  4.5 Animation
+ * 5. Responsive
+ *
+ */
+
+/* 1. Variable */
+@import "_variable";
+
+/* 2. Mixin */
+@import "_mixin";
+
+/* 3. Bootstrap Override */
+/* 3.1 Misc */
+@import "override/_misc";
+/* 3.2 Form */
+@import "override/_form";
+/* 3.3 List */
+@import "override/_list";
+/* 3.4 Alert */
+@import "override/_alert";
+/* 3.5 Card */
+@import "override/_card";
+/* 3.6 Table */
+@import "override/_table";
+/* 3.7 Tooltip */
+@import "override/_tooltip";
+/* 3.8 Modal */
+@import "override/_modal";
+/* 3.9 Nav */
+@import "override/_nav";
+/* 3.10 Pagination */
+@import "override/_pagination";
+/* 3.11 Badge */
+@import "override/_badge";
+/* 3.12 Button */
+@import "override/_button";
+/* 3.13 Media */
+@import "override/_media";
+/* 3.14 Breadcrumb */
+@import "override/_breadcrumb";
+/* 3.15 Accordion */
+@import "override/_accordion";
+/* 3.16 Popover */
+@import "override/_popover";
+/* 3.17 Grid */
+@import "override/_grid";
+/* 3.18 Navbar */
+@import "override/_navbar";
+/* 3.19 Dropdown */
+@import "override/_dropdown";
+/* 3.20 Dropdown */
+@import "override/_tab";
+/* 3.21 Progress Bar */
+@import "override/_progressbar";
+/* 3.22 Jumbotron */
+@import "override/_jumbotron";
+/* 3.23 Carousel */
+@import "override/_carousel";
+
+/* 4. Theme Style */
+/* 4.1 Misc */
+@import "theme/misc";
+/* 4.2 Section */
+@import "theme/section";
+/* 4.3 Page */
+@import "theme/page";
+/* 4.4 Layout */
+@import "theme/layout";
+/* 4.5 Animation */
+@import "theme/animation";

sources/scss/style.scss

@@ -1,14 +1,14 @@
 /**
  * Stisla
  *
- * Stisla is a clean & modern HTML5 admin template based on Bootstrap 4. 
+ * Stisla is a clean & modern HTML5 admin template based on Bootstrap 4.
  * Stisla will make it easier for you to create your own admin interface.
  *
- * @package	Stisla 
+ * @package	Stisla
- * @version	2.2.0
+ * @version	2.3.0
  * @author 	Muhamad Nauval Azhar
  * @url 	https://getstisla.com
- * 
+ *
  */
 
 /**
@@ -114,4 +114,4 @@
 /* 4.4 Layout */
 @import "theme/layout";
 /* 4.5 Animation */
-@import "theme/animation";
+@import "theme/animation";