Droplet

Droplet v3.0

Bootstrap 5 responsive admin template

documented by Sean Ngu

Updated on: 19/July/2024
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 20.x and npm 10.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">
    © 2024 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/