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
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.- Contact us on support tab.