Buy Again

## Development Guide

Documentation - v1.8

### Affan - PWA Mobile HTML Template

The Affan is a Static HTML5 Template:
We do not provide any documentation or email support on how to integrate with any CMS (such as WordPress, Joomla, etc.) or frameworks (such as Angular, Vue, React, Laravel etc.).

### Get Help

Thank you for purchased our item(s). If you have any questions that are beyond the scope of this help file, please feel free to email via support page here. Thank you so much!

In some cases, you may have to wait 2 working days to get an email answer. However, we will try to answer you as soon as possible. Replies are sometimes delayed due to multiple emails and time zone variations.

### Files Structure

- Affan
  - dist (compiled distribution files)
  - node_modules (npm dependencies files. It is NOT included in the downloaded file, this folder will be installed automatically when you install npm).
  - src (all source files)
    - html (all .html files into this folder)
    - scss (all .scss files into this folder)
  - static (all static assets)
    - img (all images)
    - js (all static .js files)
    - manifest.json (manifest file for PWA functions)
    - service-worker.js (service worker file for PWA functions)
  - .browerslistrc
  - changelog.txt
  - gulpfile.js
  - license
  - package.json
  - package-lock.json (this file NOT included in the downloaded file, this file will be automatically created when you run gulp)

### Code Editor

There are many code editors for web code editing. You can use whatever you want. We recommend that you use Visual Studio Code . Because - this template is coded using it.

- Brackets
- Sublime Text
- Visual Studio Code Recommended
- Atom
- Notepad++
- Php Storm

### Installation

It has a directory (affan/dist) of compiled files. If you want to edit without source files (plain HTML/CSS/JS files), you do not need to install anything on your machine.

You need to install package files/dependencies for this project if you want to customize it. To do this, you must have node and npm installed on your computer. Installation guide of the node can be found here.

As npm comes bundled with a node, a separate installation of npm is NOT needed. If you have installed them, just go to the root folder and run the following command in your command prompt or terminal.

npm install --legacy-peer-deps

### Run Gulp

Run a command to run Gulp. When you run this command, it also watching at all source and static files. So, you don't need to run another command to watching these.

npm run dev

If you want, just watch the source files. You can run another individual command.

npm run dev watch
Watch Installation Video

### Know the file type

###### Source files:

Source files are files that are processed with template build tools to make the browser readable. E.g. SCSS & row HTML files always source files.

Files location: `affan > "src" folder`

###### Compiled files:

Compiled files are files generated as a result of running a compilation process in the source files. E.g. CSS & standard HTML files always compiled files.

Files location: `affan > "dist" folder`

###### Static files:

Static files are ones that aren’t processed or generated. E.g. Images, Web Icon Fonts and standard HTML are static files.

Files location: `affan > "static" folder`

### Before getting started you must read this

Before getting started with a PWA ready template, you need to know a very simple thing!
PWA (Progressive Web App) mainly works with the "service-worker.js" file. This file cache data in your browser for smoothly viewing this website when you're offline.
What is the problem with that?
When you edited the files & script and save it, your changes won't take effect until clear your browser cache.
How to solve this problem?
Please disconnect "service-worker.js" file, when you are developing your site. Find "service-worker.js" file in `"static" folder > "service-worker.js".` Comment on all codes or remove this file another location.
View Screenshot 1 View Screenshot 2
After the site has finished developing, when you are ready to upload your website to the server, then connect this file again "service-worker.js" to your project.

### SCSS files

Sass stands for Syntactically Awesome Stylesheet. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. It's gives you variables, nesting, partials, modules, mixins, extend/inheritance & operators, etc.

Visit the official website to learn the details.

SCSS Files Layout
File | Description
--- | ---
style.scss | Core stylesheet
_fonts.scss | Font family name
_responsive.scss | Responsive breakpoint
_preloader.scss | Preloader css
_bootstrap-color-reset.scss | Bootstrap colors reset css
_shortcode.scss | Template shortcode css
_miscellaneous.scss | Template miscellaneous css
_animation.scss | Animation css
_register.scss | Register page css
_header.scss | Header css
_sidenav.scss | Sidenav left & right css
_footer.scss | Footer css
_btn.scss | Template button css
_badge.scss | Template badge css
_breadcrumb.scss | Breadcrumb css
_alerts.scss | Alert css
_divider.scss | Template divider css
_coming-soon.scss | Coming soon page css
_card.scss | All card css
_chats.scss | Chats page css
_carousel.scss | Bootstrap carousel & Owl carousel css
_countdown.scss | Countdown css
_counterup.scss | Counter Up css
_form.scss | All form input css
_hero-block.scss | Hero block page css
_image-gallery.scss | Image gallery css
_list-group.scss | List group card css
_loader.scss | All preloader css
_modal.scss | Modal css
_notification.scss | Notifications page css
_pagination.scss | All pagination css
_partner.scss | Business partner css
_price-table.scss | Price table css
_progress.scss | Progress bar css
_rating.scss | Client rating css
_scrollspy.scss | Scrollspy css
_testimonial.scss | Testimonial css
_timeline.scss | Timeline page css
_toast.scss | Toast css
_tabs.scss | Tabs css
_blog.scss | All blog pages css
_cart.scss | Cart page css
_invoice.scss | Invoice page css
_language.scss | Language page css
_product.scss | Product page css
_service.scss | Service page css
_team.scss | Team page css
_user-profile.scss | User profile page css
_demo.scss | Demo page css
_rtl.scss | RTL mode css
_dark.scss | Dark mode css

### How to edit the Title & Favicon?

Open the mail file (affan) in your code editor. Then open `home.html` file & customize as your desire.

File location: `affan > src > html > pages > home.html`

##### Customize with Complied Files

Open any `*.html` file & customize as your desire.

File location: `affan > dist > *.html`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### How to edit the Brand Logo?

Open the mail file (affan) in your code editor. Then open `home.html` file & customize as your desire.

File location: `affan > src > html > pages > home.html`

##### Customize with Complied Files

Open any `*.html` file & customize as your desire.

File location: `affan > dist > *.html`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### How to edit the Side Navbar?

Open the mail file (affan) in your code editor. Then open `home.html` file & customize as your desire.

File location: `affan > src > html > pages > home.html`

##### Customize with Complied Files

Open any `*.html` file & customize as your desire.

File location: `affan > dist > *.html`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### How to edit the Footer Nav?

Open the mail file (affan) in your code editor. Then open `home.html` file & customize as your desire.

File location: `affan > src > html > pages > home.html`

##### Customize with Complied Files

Open any `*.html` file & customize as your desire.

File location: `affan > dist > *.html`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### How to edit the template Colors?

Open the mail file (affan) in your code editor. Then open `_reboot.scss` file & customize as your desire.

File location: `affan > src > scss > _reboot.scss`

##### Customize with Complied Files

Open `style.css` file & customize as your desire.

File location: `affan > dist > style.css`

### Progressive Web Apps (PWA)

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Remember: PWA will work if you have a server that serves HTPPS.

##### Change the Name, Start URL, Theme Color, Catagories, Description & Icons:

Open `manifest.json` file & customize as your desire.

File location: `affan > static > manifest.json`

###### Customize with Complied Files

Open `manifest.json` file & customize as your desire.

File location: `affan > dist > manifest.json`

### Dark Mode

Dark mode are becoming very popular nowadays. So we have given dark mode in this template. If you want, you can use it as toggle switch mode or by default. Or, you can delete this.

If you want to use it in default mode, use the following code in the `<html>` tag.

`data-theme="dark"`

If not, delete the Dark code and toggle switch code from the template.

`affan > src > scss > _dark.scss`

### Right to Left (RTL) Mode

The languages of many countries of the world are written in RTL mode. So RTL mode has been given in it. If you want, you can use it as toggle switch mode or by default. Or, you can delete this.

If you want to use it in default mode, use the following code in the `<html>` tag.

`view-mode="rtl"`

If not, delete the RTL code and toggle switch code from the template.

`affan > src > scss > _rtl.scss`

### Customize with Complied Files

Working with compiled files is very easy. You don't need any build tools or local setup to edit the template. A folder (affan/dist) is already provided with the template. Open this folder and edit it as your desired.

###### Recompiling will overwrite your all changes!

When you will customize with compile files, please do not run the template build tools. If you run the template build tools again, all your changes will be overwritten.

### Third Party Plugins Activation

Name | Plugins Activation Code
--- | ---
Tiny Slider |
    tns({
        container: ".tiny-slider-one", // Slider container name
        items: 1, // The number of slides to be shown at once.
        slideBy: "page",
        autoplay: true,
        autoplayButtonOutput: false,
        autoplayTimeout: 5000,
        speed: 1000,
        mouseDrag: true,
        controlsText: [(''), ('')],
        responsive: { // Responsive mode
            480: {
                items: 7
            },
            576: {
                items: 7
            },
            768: {
                items: 8
            },
            992: {
                items: 10
            },
            1200: {
                items: 10
            }
        }
    });
Countdown |
    new countdown({
        target: '#countdown1', // Container name
        dayWord: ' Days',
        hourWord: ' Hours',
        minWord: ' Mins',
        secWord: ' Secs'
    });
ion Range Slider |
    ionRangeSlider(ionRangeSlider1, {options});
Data Table |
    new DataTable(your_container_name, {
        perPage: 10,
        perPageSelect: [10, 20, 30, 40, 50],
        searchable: true,
        sortable: true,
        fixedHeight: false,
        prevText: '',
        nextText: '',
        labels: {
            placeholder: "Search",
            perPage: "{select}",
            noRows: "No data!",
            info: "{start} to {end} entries",
        }
    });

### Credits

- Framework
- Bootstrap
- Fonts & Icons
- Bootstrap Icons
- Google Fonts
- Images
- Unsplash
- Freepik
- Plugins
- Counter Up
- Range Slider
- Countdown
- Password Meter
- Tiny Slider
- Slide Toggle
- Venobox
- Table & Charts
- Data Table
- Apex Charts
- Maps
- Google Maps

### Changelog(s)

###### Version 1.8.0

- Updated: Design Quality
- Updated: Updated all development dependencies
- Dropped: Bootstrap Icons
- Added: Tabler Icons

###### Version 1.7.0

- Updated: Bootstrap v5.2.3 > Bootstrap v5.3.3
- Updated: Bootstrap Icons v1.10.2 > Bootstrap Icons v1.11.3
- Updated: Apexcharts v3.36.3 > Apexcharts v3.49.1
- Updated: Some Elements Design
- Updated: Updated all development dependencies
- Updated: Some Elements Design

###### Version 1.6.0

- Updated: Bootstrap v5.2.0 > Bootstrap v5.2.3
- Updated: Bootstrap Icons v1.9.1 > Bootstrap Icons v1.10.2
- Updated: Apexcharts v3.35.3 > Apexcharts v3.36.3
- Updated: baguettebox.js has been dropped. Instead, we used 'venobox' js plugin.

###### Version 1.5.0

- Updated: Design Quality
- Updated: PUG has been dropped. Now, we used plain HTML5 code in the template. So that everyone can easily edit or customize.
- Updated: Bootstrap v5.1.3 > Bootstrap v5.2.0
- Updated: Bootstrap Icons v1.8.1 > Bootstrap Icons v1.9.1
- Updated: Apexcharts v3.33.2 > Apexcharts v3.35.3

###### Version 1.4.1

- Updated: Apexcharts v3.19.3 > Apexcharts v3.33.2
- Updated: Bootstrap Icons v1.5.0 > Bootstrap Icons v1.8.1
- Updated: Imagesloaded v4.1.4 > Imagesloaded v5.0.0
- Updated: Tiny Slider v2.9.3 > Tiny Slider v2.9.4

###### Version 1.4.0

- Updated: Bootstrap v5.1.0 > Bootstrap v5.1.3
- Improved: Code Quality
- New Added: Isotope layout in the Image Gallery page (Premium Plugin)

###### Version 1.3.0

- New Added: The whole code is written with Vanilla JavaScript. From now, there is no need for jQuery dependency.
- New Added: Filter Menu on Elements Page
- New Added: Offcanvas Navbar
- New Added: Horizontal Scroll Menu
- New Added: Notification Button
- New Added: Login Page via Social Media
- New Added: Large Checkbox
- New Added: Toggle Password Visibility
- New Added: Comparison Table
- Updated: Bootstrap v5.0.1 > Bootstrap v5.1.0
- Improved: Design & Code Quality
- Removed: Font Awesome Icons

###### Version 1.2.1

- Updated: Documentation

###### Version 1.2.0

- Improved: Design Quality
- Improved: Code Quality
- Updated: Bootstrap v5.0.0-beta2 > Bootstrap v5.0.1
- Updated: Owl Carousel 2.2.1 > Owl Carousel 2.3.4
- Updated: Font Family - Public Sans to Poppins
- Removed: Clipboard js Plugin
- New Added: The static folder in the package (this folder contains all the static files).

###### Version 1.1.0

- New Added: 3 chat page & 1 tab page
- Improved: Dark & RTL mode
- Improved: Design quality
- Improved: Code quality
- Updated: Bootstrap v5.0.0-beta1 > Bootstrap v5.0.0-beta2
- Updated: Commissioner Google Fonts > Public Sans Google Fonts

###### Version 1.0.0

- Initial Realease