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

Theme Files

HTML Files

All html pages are categorized by type.

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

CSS File

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.
  • _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. (jQuery and Bootstrap)
  • /plugins : Javascript plugins.

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.

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 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.

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.