Introduction

Thanks for your purchase.😊

You don't need any introduction to use this theme. This is HTML, CSS, Javascript UI Kit template designed for mobile devices. Feel free to convert it for WordPress or a backend project.

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.
base.js file may not work properly if you won't delete it.

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

What can i do with this template?

  • Create a mobile version of your website
  • Use with Cordova / Phonegap to create mobile apps for iOS & Androids
  • Make mobile apps with Webview
  • Use in your PWA projects
  • Do whatever you like.

GETTING STARTED

Template Files

HTML Files

All html pages are categorized by type.

  • app-.....html : application page
  • page-.....html : basic pages
  • component-.....html : components

CSS Files

We are using Sass to being more organised on CSS. You can edit Mobilekit with sass files in assets/sass. You can find the main css file as assets/css/style.css.
Also bootstrap main css file and plugin css files moved to assets/css/inc with version 2.1.

Sass Files

With power of sass this template is really organised. sass path : assets/sass

  • style.scss : Main sass file.
  • _body.scss : Global body settings
  • _theme-settings.scss : Theme settings. Change colors, fonts and other variables.
  • _darkmode.scss : Dark mode edits.
  • _rtl.scss : RTL edits.
  • _ui-framework.scss : Our mobile based ui kit framework imports
  • framework/ : Every ui kit framework sass files.
  • section/ : Layout sections of template
    • _header.scss : App Headers
    • _bottomMenu.scss : App Bottom Menu
    • _content.scss : App content
    • _footer.scss : App footer
    • _sidebar.scss Sidebar / Sidenav

Javascript Files

Path : assets/js

  • base.js : base javascript file for all features.
  • /lib : Javascript libraries.
  • /plugins : Javascript plugins.

GETTING STARTED

Template Settings

There is a section that you can change some theme settings easily on 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. true, false
night_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 night mode is enabled, dark mode will be activated between user's local times 20:00 and 7:00. 		true, false
night_mode.start_time Set night mode start time (needs to set in 24 hour format) 0 to 23
night_mode.end_time Set night mode end time (needs to set 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

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 the developer console after you type the word that activate the test mode.
Type testmode on keyboard when testmode is enabled. 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 of html page.

GETTING STARTED

Compiling Sass File

After you edit sass files, just compile assets/sass/style.scss to assets/css/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 at applications section. https://sass-lang.com/install

Editing

Colors

You can easily edit the colors with sass.

  • Open asset/sass/_theme-settings.scss
  • Edit color variables.
  • Compile style.scss to assets/css/style.css
Descriptions is available next to variable.

Editing

Font

  1. Find a font in Google Fonts and copy the import url
  2. Open the asset/sass/_theme-settings.scss
  3. Go to font section
  4. Paste the import url
  5. Change the $fontFamily value.
  6. Compile the sass files.
Do not forget to update font weights if your new font are different from the current weights.

Also, you can change the sizes, line-heights and letter spacing.

Editing

Dark Mode

How to set dark mode as default theme?

Open the assets/js/base.js. You will see the Mobilekit object at the top of the file.
Set Dark_Mode.default as true.
Now dark mode is your default theme.

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.

Disable PWA

You can disable and enable PWA feature.
Open assets/js/base.js. You will see the Mobilekit object at the top of the file.
Set PWA.enable as true or false.

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 cache name (CACHE_NAME) after updating the REQUIRED_FILES.
Example: cache-version-1 to cache-version-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 Screen

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.

CREDITS

Images

Images

All images are from unsplash.com and used for demo purpose and not include in the purchase packages.


Illustration

All illustrations are from drawkit.io and used for demo purpose and not include in the purchase packages.

CREDITS

Icons

This template using Ionicons v5. You can check all the icons on the Ionicons website.

Also we support Bootstrap Icons.

CREDITS

Fonts

Inter on Google Fonts

Need Help?

Support

Contact with us for your feedbacks or questions.

How can you contact to us?
  • You can contact us from the support tab of the template.
  • Fell free to ask anything about our template.