Updated on: 12/April/2025
By: Sean Ngu

If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question via Wrapbootstrap. Thanks so much!

### A) Installation - top

When you only need to include Droplet compiled CSS or JS, below is the required core css and javascript.

    <!-- Core CSS -->
    <link href="assets/css/vendor.min.css" rel="stylesheet">
    <link href="assets/css/app.min.css" rel="stylesheet">

    <!-- Core JS -->
    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/app.min.js"></script>

OR

If you wish to configure the scss files settings, follow the following step to install `gulp` in your operating system.
You may refer to their official documentation for how to setup the development environment.
Setup Guide

    cd /your-path-url/template_html/
    npm install
    gulp

    // generate plugins command
    gulp plugins

Make sure that you are running at least node `22.x` and `npm 11.x.x` by running `node -v` and `npm -v` in a terminal/console window. Older versions produce errors, but newer versions are fine.

### B) File Structure - top

File structure overview for Droplet

    template_html/
    ├── dist/             // generated html / css / js files
    ├── gulpfile.js       // gulp settings
    ├── package.json      // npm package installed
    └── src/
        ├── html/         // html source files
        ├── img/          // image source files
        ├── js/           // javascript source files
        └── scss/         // studio scss files

### C) HTML Structure - top

Below is the general page structure and the required core css / js files for Droplet Admin Template. The css / js files can be found via `/dist/assets/` folder.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Droplet</title>
      <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
            name="viewport">

      <!-- core-css -->
      <link href="assets/css/vendor.min.css" rel="stylesheet">
      <link href="assets/css/app.min.css" rel="stylesheet">
    </head>
    <body>
      <div id="app" class="app">
        <!-- app-header -->
        <header id="header" class="app-header">... </header>

        <!-- app-sidebar -->
        <sidebar id="sidebar" class="app-sidebar">... </sidebar>
        <button class="app-sidebar-mobile-backdrop"
          data-toggle-target=".app"
          data-toggle-class="app-sidebar-mobile-toggled"></button>

        <!-- app-content -->
        <div id="content" class="app-content">...</div>

        <!-- btn-scroll-top -->
        <a href="#" data-toggle="scroll-to-top" class="btn-scroll-top fade">
          <i class="fa fa-arrow-up"></i>
        </a>
      </div>

      <!-- BEGIN core-js -->
      <script src="assets/js/vendor.min.js"></script>
      <script src="assets/js/app.min.js"></script>
    </body>
    </html>

### D) CSS - top

All the css files used in Droplet has been compiled into two files `app.min.css` and `vendor.min.css` by using gulp. If you are not using gulp, copy over the folder `/dist/assets/css` and `/dist/assets/webfonts` into your application assets folder.

`vendor.min.css`

1. FontAwesome
2. Bootstrap Icons
3. jQuery UI
4. Animate.css
5. Pace Loader
6. Perfect Scrollbar

`app.min.css`

1. Bootstrap
2. Droplet Core CSS

    <!-- core-css -->
    <link href="assets/css/vendor.min.css" rel="stylesheet">
    <link href="assets/css/app.min.css" rel="stylesheet">

    <!-- OR without vendor.min.css -->
    <link href="assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet">
    <link href="assets/plugins/animate.css/animate.min.css" rel="stylesheet">
    <link href="assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet">
    <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
    <link href="assets/css/app.min.css" rel="stylesheet">

    <!-- core-css required folder -->
    /dist/assets/css
    /dist/assets/webfonts

### E) Javascript - top

This theme compiles 6 javascript library into two files `app.min.js` and `vendor.min.js` by using gulp. If you are not using gulp, copy over the folder `/dist/assets/js` into your application assets folder.

`vendor.min.js`

1. Pace Loader
2. jQuery
3. jQuery UI
4. Bootstrap
5. Perfect Scrollbar
6. JavaScript Cookie

`app.min.js`

1. Droplet Core Javascript

    <!-- core-js -->
    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/app.min.js"></script>

    <!-- OR without vendor.min.js -->
    <script src="assets/plugins/pace-js/pace.min.js"></script>
    <script src="assets/plugins/jquery/dist/jquery.min.js"></script>
    <script src="assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
    <script src="assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
    <script src="assets/plugins/js-cookie/dist/js.cookie.min.js"></script>
    <script src="assets/js/app.min.js"></script>

    <!-- core-js required folder -->
    /dist/assets/js

### F) Page Options - top

Sidebar collapsed:

    <div id="app" class="app app-sidebar-collapsed">
      ...
    </div>

Full height:

    <div id="app" class="app app-content-full-height">
      ...
      <div id="content" class="app-content" data-scrollbar="true" data-height="100%"
           data-skip-mobile="true">
         ...
      </div>
    </div>

Full width:

    <div id="app" class="app app-content-full-width">
      ...
    </div>

Fixed footer:

    <div id="app" class="app app-footer-fixed">
      ...
      <div id="footer" class="app-footer">
        © 2025 seanTheme All Right Reserved
      </div>
    </div>

Pace Loading Bar at Top

    <body class="pace-top">
      ...
    </body>

Boxed Layout

    <body class="pace-top">
      <div id="app" class="app app-boxed-layout">
        ...
      </div>
    </body>

### G) Theme Color - top

Add the theme to the `<body>` tag in order to change the theme color.

#### Available Theme Options

    <body class="theme-red">...</body>
    <body class="theme-pink">...</body>
    <body class="theme-orange">...</body>
    <body class="theme-yellow">...</body>
    <body class="theme-lime">...</body>
    <body class="theme-green">...</body>
    <body class="theme-teal">...</body>
    <body class="theme-cyan">...</body>
    <body class="theme-blue">...</body>
    <body class="theme-purple">...</body>
    <body class="theme-indigo">...</body>
    <body class="theme-black">...</body>
    <body class="theme-gray-100">...</body>
    <body class="theme-gray-200">...</body>
    <body class="theme-gray-300">...</body>
    <body class="theme-gray-400">...</body>
    <body class="theme-gray-500">...</body>
    <body class="theme-gray-600">...</body>
    <body class="theme-gray-700">...</body>
    <body class="theme-gray-800">...</body>
    <body class="theme-gray-900">...</body>

### H) Dark Mode - top

To apply the dark mode to the entire page, you can add the `data-bs-theme="dark"` attribute to the HTML tag. This attribute will change the background and text colors of the entire page to dark mode.

#### Here's an example:

    <!DOCTYPE html>
    <html lang="en" data-bs-theme="dark">
    <head>
      <meta charset="UTF-8">
      <title>Dark Mode Example</title>
    </head>
    <body>
      <!-- your page content here -->
    </body>
    </html>

With this example, the `data-bs-theme="dark"` attribute is added to the html tag. This will apply the dark mode to the entire page.

OR

If you want to apply dark mode to a single component only, you can add the `data-bs-theme="dark"` attribute to that component.

    <div class="card" data-bs-theme="dark">
      <div class="card-body">
        <!-- your component content here -->
      </div>
    </div>

### J) RTL Mode - top

To enable RTL mode, follow these steps:

1. Navigate to the `/src/_variables.scss` file in your code editor.
2. Find the `$enable-rtl` variable and change its value to true:

       $enable-rtl: true;

   This will enable RTL mode for your application.
3. Save the changes to the file.
4. Open your terminal or command prompt and navigate to the root directory of your project.
5. Run the following command to regenerate the `app.min.css` file:

       gulp css

   This will regenerate the app.min.css file with the changes you made to the `$enable-rtl` variable.

### I) SCSS Configuration - top

Global Variables

The `/src/_variables.scss` file contains the variables that control the styles of your application.

To edit these variables, navigate to the `/src/_variables.scss` file in your code editor and modify the values of the variables to suit your needs.

    <!-- global variable -->
    /src/_variables.scss

Dark Mode Variables

The `/src/_variables-dark.scss` file contains the variables that control the styles for dark mode. These variables are used in conjunction with the variables in the `/src/_variables.scss` file to provide different values for light and dark modes.

    <!-- dark mode variable -->
    /src/_variables-dark.scss

### J) References - top

I've used the following images, icons or other files as listed.

jQuery Plugins

1. animate.css: https://daneden.github.io/animate.css/
2. ApexCharts: https://apexcharts.com/
3. jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/
4. Bootstrap: http://getbootstrap.com/
5. Bootstrap Icons: https://icons.getbootstrap.com/
6. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
7. Bootstrap Daterangepicker: http://www.daterangepicker.com/
8. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
9. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
10. Bootstrap Table: https://bootstrap-table.com/
11. Chart.js: https://chartjs.org
12. DataTables: https://datatables.net/
13. FontAwesome: https://fontawesome.com/
14. Fullcalendar: https://fullcalendar.io/
15. Iconify: https://icon-sets.iconify.design/
16. jQuery: https://jquery.com/
17. jQuery UI: https://jqueryui.com/
18. jQuery Typeahead: http://www.runningcoder.org/jquerytypeahead/
19. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
20. Javascript Cookie: https://github.com/js-cookie/js-cookie
21. jszip: https://github.com/Stuk/jszip
22. jVectormap: http://jvectormap.com/
23. Lity: https://sorgalla.com/lity/
24. Tag-It: http://aehlke.github.io/tag-it/
25. Selectpicker: https://picker.uhlir.dev/
26. Spectrum: https://seballot.github.io/spectrum/
27. kbw-countdown: https://github.com/kbwood/countdown
28. moment: http://momentjs.com/
29. Pace: https://github.com/HubSpot/pace
30. pdfmake: https://github.com/bpampuch/pdfmake
31. Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
32. PhotoSwipe: https://photoswipe.com/
33. PicMo: https://picmojs.com/
34. Popper.js: https://popper.js.org/
35. Summernote: https://github.com/summernote/summernote

Photos

1. Unsplash: https://unsplash.com/
2. Freepik: https://freepik.com/