SmartHR - Progressive Web App Template Documentation

1. Introduction

SmartHR offers you the best template created by the latest version of HTML and css with super responsive web design.

A progressive web app basically means you can "Install" the website to your home screen, There is an expectation from users that installed apps will always have a baseline experience if they're offline.

2. Template Installation

FTP Upload:

Step 1: Open up your FTP manager and connect to your hosting

Step 2: Upload the files inside Your Hosting folder.

Local Host:

Step 1: You must run with localhost web server like XAMPP, WampServer, AMPPS, and other eg : localhost:8000

3. Requirements

Working with our SmartHR product, before going to edit all the HTML, CSS and JS files you will need a text editor.

In this case, we recommended the Sublime Text 3 editor or Notepad++ as it allows you to edit the files efficiently and all the editable files are located in "SmartHr->PWA" folder.

Browser Support

SmartHR PWA HTML template is built to work best in the latest desktop and mobile and tablet browsers

  • Chrome
  • FireFox
  • Safari
  • Opera
  • Edge

4. Styles

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/plugins/swiper/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/style.css">

We have used this Css for this template. You can customize the Css files

5. Javascripts

<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/jquery.datepicker2.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/swiper/js/swiper.min.js"></script>
<script src="assets/js/install.js"></script>
<script src="assets/js/script.js"></script>

We have used this javascript for this template. You can customize the script.js

6. File Structure

Extract the zip file you received after purchase and you would find the exact below files and folders:

SmartHR

SmartHR/
  ├── node_modules                       // Node modules
  │   ├── .bin/                          // .Bin module
  │   ├── accepts/                       // Accepts module
  │   ├── rest of modules                // Remaining Node modules
  ├── assets                             // All fonts into this folder  
  |   ├── css/                         	 // All css into this folder
  |   ├── fonts/                         // All fonts into this folder
  |   ├── images/                        // All images into this folder
  |   ├── js/                        	 // All js files are here
  |   ├── plugins/                       // All plugins files are here
  ├── index.html/                        // Main index page
  ├── manifest.json/                     // Install manifest
  ├── rest of the html pages             // Remaining html pages
  ├── server.js/                         // Run the server
  ├── documentation/                     // Documentation files

7. Customization

1. How to Change Site Title

2. How to Change Side Panels Directions and Effects

8. Important Notes

Need a help, How to configure the SmartHR HTML Progressive Web App Template into Android and iOS platform? Get reference on Progressive Web App

9. Credits

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

Plugin Link
Jquery https://jquery.com/
Font Awesome https://fontawesome.com/
Bootstrap4 https://getbootstrap.com/

10. Support

If you have any queries please contact us through email: [email protected]

11. Thank You

Thank you so much for using this template

Dreamguy's Technologies Pvt Ltd,