We recommend to you edit this template on a local server. If you don't, please remove service worker
assets/js/base.js while editing out of local server. You can add it
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.
All html pages are categorized by type.
- app-.....html : application page
- page-.....html : basic pages
- component-.....html : component
We are using Sass to being more organised on CSS. You can edit Mobilekit with sass files in
You can find the main css file as
Also bootstrap main css file and plugin css files moved to
With power of sass this template is really organised.
sass path :
- 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.
- _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
assets/css/style.css - All sass files compiled to this. This is the only css
file theme using.
Compiling Sass FileAfter you edit sass files, just compile
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.
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
You can easily edit the colors with sass.
- Edit color variables.
- Compile style.scss to
- Find a font in Google Fonts and copy the import url
- Go to font section
- Paste the import url
- Compile the sass files.
Also, you can change the sizes, line-heights and letter spacing.
This template is PWA Ready. Which mean users can add to home screen and use it like an app.
First of all, edit your theme colors and app icons.
You can find all the app icons in
In manifest.json file, you will see
Edit these hex color codes what you like.
After that, edit the metatag color code. You can find it in head tag of
meta name="theme-color" content="#000000"
/manifest.json and edit the infos and names..
||Your app name|
||Your app short name|
||Tells the browser where your application should start when it is launched|
||Defines the set of URLs that the browser considers to be within your app|
||Splash screen background color|
||Sets the color of the tool bar|
You can find service worker as
Do not forget to update cache name (CACHE_NAME) after updating the REQUIRED_FILES.
Example: cache-version-1 to cache-version-2
You can find dozens of practical, detailed, and working examples of service worker usage on ServiceWorker Cookbook.
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.
/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.
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.
This template using Ionicons v5. You can check all the icons on the Ionicons website.
|Owl Carousel 2||https://owlcarousel2.github.io/OwlCarousel2/||MIT|
|jQuery Circle Progress||https://github.com/kottenator/jquery-circle-progress||MIT|
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.