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 at assets/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.

testmode
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

Bottom Menu

You can view the styles on component-appbottommenu.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

Poppins from Google 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.