Welcome

Introduction

You don't need any introduction to use this theme. This is HTML, Css, Javascript template designed for mobile devices.

We recommend to you edit this template on a local server.

If you are using Visual Studio Code, this plugin will solve your local server needs.
Live Server for Visual Studio Code

Need Support?

Feel free to contact us for any question in your mind on support tab.

Getting Started

Theme Files

HTML Files
  • index.html - Index
  • xxxxx.html - Other html files.
Css Files
  • assets/css/style.css - Css file (I do not recommend to edit styles on this file. Edit the sass files then compile.)
  • assets/css - Plugins and Bootstrap css files.
Javascript Files
  • assets/js/main.js - Main javascript file.
  • plugins and libs
    • bootstrap.min.js - bootstrap js files
    • jquery.min.js - jquery
    • swiper.min.js - Swiper.js (Carousel)
Sass Files
  • _common.scss - common styles
  • _navbar.scss - bottom navigation related styles
  • _section.scss - all section styles
  • _typrography.scss - typrography related styles
Manifest file
  • /manifest.json - Manifest file for your app
Service Worker
  • /__service-worker.js - Service worker
Getting Started

Includes

Css Files
assets/css/style.css - All sass files compiled to this. This is the only css file theme using.

Javascript Files
You can take a look javascript files bottom on index.html codes

Getting Started

Compiling Sass File

After you edit sass files, just compile style.scss to style.css. No need others.

First time on Sass?

Learn more about sass : Sass official website.

How to compile sass files for beginners?

You can use live sass compiler vscode extension compiling sass files to css files.
Live Sass Compiler

You can check the others apps for compile on applications section. https://sass-lang.com/install

Editing

Colors

You can easily edit colors on this template .
1. Open the assets/styles/_section.scss
2. Edit the HEX code.
3. Compile the sass
  • --body-color - Template body color
  • --text-color - Template text color
  • --card-bg - Card background color
  • --input-box - input background color
  • --primary - primary color
  • --match-bg - match background color
  • --dark-bg - dark background color
  • --border-bg - border color
Editing

Font

1. Find any font in Google Fonts and copy the import url
2. Open the assets/styles/_section.scss
3. Change the import url (line 1) (If you use google font)
4. Change the --font-family value.
5. Compile the sass files.

Do not forget to update font weights if your new font are different from the current weights.

PWA Settings

Getting Started

PWA Ready

This template is PWA Ready. Which mean users can add to home screen and use it like an app.


Edit First

First of all, edit your theme colors and app icons.
You can find all the app icons in assets/img path.

PWA Settings

Manifest.json

Open /__manifest.json and edit the infos and names..

"name" Your app name
"short_name" Your app short name
"start_url" Tells the browser where your application should start when it is launched
"scope" Defines the set of URLs that the browser considers to be within your app
"background_color" Splash screen background color
"theme_color" Sets the color of the tool bar
PWA Settings

Service Worker

You can find service worker as /__service-worker.js.

Do not forget to update version (VERSION) after updating the REQUIRED_FILES or updating your cache.
Example: 2.1 to 2.2


Usage examples

You can find dozens of practical, detailed, and working examples of service worker usage on ServiceWorker Cookbook.

Sources

Images

All images and illustrations are collected from internet and used for demo purpose and not include in the purchase packages.

Sources

Icons

This template mainly use Bootstrap icons You can view all the icons on the bootstrap website.

Sources

Fonts

Ubuntu from Google Fonts.

Sources

Plugins

Plugin Website Licence
Bootstrap 5 https://getbootstrap.com MIT
Swiper https://swiperjs.com// MIT
Bootstap Icons v4 https://icons.getbootstrap.com/ MIT
ServiceWorker Cookbook https://github.com/mozilla/serviceworker-cookbook MIT
Apex Chart https://www.chartjs.org/ MIT
Need Help?

Support

Feel free to contact with us for your feedbacks or questions.