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 don't, please remove service worker "if block" on assets/js/base.js while editing out of local server. You can add it later.
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
- app-xxxxx.html - App pages.
- component-xxxxx.html - Component pages.
Css Files
- style.css - Css file (I do not recommend to edit styles on this file. Edit the sass files then compile.)
- src/ - Plugins and Bootstrap css files.
Javascript Files
- base.js - Main javascript file.
-
lib
- bootstrap.bundle.min.js - Bootstrap Bundle
-
plugins
- splide.min.js - Splide.js (Carousel)
- apexcharts.min.js - Apex Charts (Chart)
Sass Files
- _body.scss - Body tag and some global settings
- _variables.scss - Colors
- _font.scss - Font settings
- _blocks.scss - Blocks
- _darkmode.scss - Dark mode
- _rtl.scss - RTL
- style.scss - Style Sass and included all sass files.
- _ui.scss - UI Sass included all ui sass files.
-
layout/
- _header.scss - Header
- _bottomMenu.scss - Bottom menu
- _content.scss - Content
- _footer.scss - Footer
- _sidebar.scss - Sidebar / Sidemenu
-
ui/
- All files in sass/ui/ - These files are ui files
Manifest file
- /__manifest.json - Manifest file for your app
Service Worker
- /__service-worker.js - Service worker
Getting Started
Template Settings
There is a section that you can change some theme settings easily atassets/js/base.js.
You can see this section at the top of the base.js file.
PWA
| Key | Description | Value |
| enabled | Enable or disable PWA | true, false |
Dark_Mode
| Key | Description | Value |
| default | Set dark mode as main theme. Dark mode will activate at all events. | true, false |
| local_mode.enable |
Activate dark mode between certain times of the day. You can set start and end times. Defaultly start time is 20 , end time is 7. That means, if local mode is enabled, dark mode will be activated between user's local times 20:00 and 7:00. |
true, false |
| local_mode.start_time | Set local dark mode start time (needs to be in 24 hour format) | 0 to 23 |
| local_mode.end_time | Set local dark mode end time (needs to be in 24 hour format) | 0 to 23 |
| auto_detect.enable | Activate auto detection dark mode. Detects and adapts to the user's preferred theme on their device. | true, false |
RTL
| Key | Description | Value |
| enabled | Enable or disable RTL Mode | true, false |
Animation
| Key | Description | Value |
| goBack | Enable or disable go back page animation. This works with only elements with .goBack class. | true, false |
Test
| Key | Description | Value |
| enable | Enable or disable test mode | true, false |
| word | The word that needs to be typed to activate test mode. Default value is "testmode". You need to type testmode on keyboard to activate it | String |
| alert | Enable or disable alert when test mode is activated | true, false |
| alertMessage | Alert message | String |
Here is a preview of console after you type the word that activate the test mode.
With the test mode, you can quickly preview the status about the template.
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 apps to compile sass files to css files.
One of the best of them is Koala. It is free and open-source.
Koala App
Download the app and compile assets/sass/style.scss to assets/css/style.css. (You can edit the
source map after compile)
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/sass/_variables.scss
2. Edit the HEX code.
3. Compile the sass
- $colorPrimary - Main theme color
- $colorSecondary - Secondary color
- $colorSuccess - Success color
- $colorDanger - Danger color
- $colorWarning - Warning color
- $colorInfo - Info color
Also you can edit dark mode colors on same file.
Editing
Font
1. Find any font in Google Fonts and copy the import url
2. Open the assets/sass/_font.scss
3. Change the import url (line 1) (If you use google font)
4. Change the $fontFamily value.
5. Compile the sass files.
Do not forget to update font weights if your new font are different from the current weights.
Editing
Header
You can view the styles on component-appheader.html.
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/icon path.
Theme Color
In manifest.json file, you will see theme_color and background_color. Edit these hex color codes what you like.After that, edit the metatag color code. You can find it in head tag of html pages. meta name="theme-color" content="#000000"
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.
PWA Settings
Add to Home
With this component, you can show users a warning for add to home screen. There are separate alerts for android and ios.
Open /component-add-to-home.html file, you will see the introductions.
Don't forget to copy the html codes of the warnings you will use and paste them into the page you will use.
These codes only work on mobile phone browsers. If the user has added your application to the phone on their home screen, these codes will not work and the user will not see the warnings.
Sources
Images
All images are from unsplash.com and used for demo purpose and not include in the purchase packages.
All illustrations are from drawkit.io and used for demo purpose and not include in the purchase packages.
Sources
Icons
This template mainly use Ionicons v5
and also supporting the Ionicons v4.
You can view all the icons on the Ionic website.
Sources
Fonts
Sources
Plugins
| Plugin | Website | Licence |
|---|---|---|
| Bootstrap 5 | https://getbootstrap.com | MIT |
| Popper JS | https://popper.js.org/ | MIT |
| Splide | https://splidejs.com/ | MIT |
| Ionicons v4 | https://ionic.io/ionicons/v4 | MIT |
| Ionicons v5 | https://ionic.io/ionicons | MIT |
| ServiceWorker Cookbook | https://github.com/mozilla/serviceworker-cookbook | MIT |
| Apex Chart | https://apexcharts.com/ | MIT |
Need Help?
Support
Feel free to contact with us for your feedbacks or questions.- Contact us on support tab.