Documentation
Finwallapp Creative & Unique Mobile Templates
Introduction
Bootstrap 4.5.2 framework based HTML responsive template with wide range of pre-designed HTML widgets, blocks and styles.
Finwallapp is based on bootstrap framework 4.5.2 and we provide wide range of customized, unique creative and flexible components. We also growing component library with widgets and other third party customizations. We also target to create many other demo application for our customer so they can easily get ready html pages code that can be satisfy requirements.
Here, Guidelines provided is for understanding of basic structure framework and about template. We have mentioned all the criteria which are unique and for easy to understand. We welcomes if anything missed or required more clarifications. For the third parties we recommend to visit official documents for complete guidelines about third parties. We have used Bracket.io html editor during this documentation and code writing.
We also created color themes with different css you can switch other style theme with class name appends on HTML tag.
-HTML
+ css
+ img
+ js
+ scss
+ vendors
- All pages
- HTML: Main project source file for HTML template are in this folder
- css: Template css are placed at this folder
-
img: All images used in templates for display purpose are stored here (Does not included third party plugin's image in this folder)
- scss: scss with color variables and predefined styles
- js: Template js files kept in this folder
- vendors: We have try to include many ofthe thrid party with our template to show how it looks like with our template theme. Mostly we have used MIT licence and free commercial use licences but further We strongly recommand to check licence once if your business domain, content are allow you to use thrid party.
- Pages: HTML template pages include with all demo pages and component.
All the assets are placed in folder are as per our requirements for demo and template. You can start with fresh copy and can add items as per your need in the mobile application or mobile website creation. Fresh page consider blank.html with minimal available page content. Copy the assets folder and demo folder to quick start your project.
Style
Finwallapp comes with predefined themes for different color schemes.
Finwallapp comes with predefined css with different shades. You can access our demos and click on pallet icon at bottom right corner. Select color you like this color demo pallet require local host or hosting files somewhere. Also predefined css can be replaced in CSS in HTML head tag by just replacing stlysheet name.
Default white css file:
<link href="css/style-dark-blue.css" rel="stylesheet" id="style">Other styles are:
style-amber.css
style-black.css
style-gray.css
style-maroon.css
style-blue.css
style-purple.css
style-red.css
style-skyblue.css
style-teal.css
style-dark-blue.css
style-dark-brown.css
style-dark-gray.css
style-dark-green.css
style-dark-pink.css
style-dark-purple.css
We have also used color style picker you can utilize it for preview color scheme. If you are not using anymore style picker we recommend to remove code of stylepicker from page as class name with right sidebar and also remove 'color-scheme-demo.js' from page to reduce page load time. Make sure here to set style on reload we have used cookie js file to store variable for selected styles.
Scripts
We have added scripts template functionality and style functionality.
Here we are dividing three saperate custom js section.
Template level
All the script which are required into the template functionalities at global level are defined into the main.js into js folder
Color style
All the script which are required for color change and cookie variable storage are defined into the color-scheme-demo.js into js folder.
Page specific
All script page specific are in app.js and also with switch case statement of jquery with data-page attribute assinged to each page with script. All the script which are required for page specific elements are kept on page before enging of body tag.
Hope this helps to differentiate and well utilization of scripts while creative template
Code Structure
We have clean code with minimum comments and useful comments.
Here is minimal code sample to use for start new Mobile or app.
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="">
<title>Finwallapp - Mobile HTML template</title>
<!-- manifest meta -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Favicons -->
<link rel="apple-touch-icon" href="img/favicon180.png" sizes="180x180">
<link rel="icon" href="img/favicon32.png" sizes="32x32" type="image/png">
<link rel="icon" href="img/favicon16.png" sizes="16x16" type="image/png">
<!-- Material icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<!-- swiper CSS -->
<link href="vendor/swiper/css/swiper.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet" id="style">
</head>
<body class="body-scroll d-flex flex-column h-100 menu-overlay">
<!-- screen loader -->
<div class="container-fluid h-100 loader-display">
<div class="row h-100">
<div class="align-self-center col">
<div class="logo-loading">
<div class="icon icon-100 mb-4 rounded-circle">
<img src="img/favicon144.png" alt="" class="w-100">
</div>
<h4 class="text-default">Finanace</h4>
<p class="text-secondary">Mobile HTML template</p>
<div class="loader-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Begin page content -->
<main class="flex-shrink-0 main">
<!-- Fixed navbar -->
<header class="header">
<div class="row">
<div class="col-auto px-0">
<button class="menu-btn btn btn-40 btn-link back-btn" type="button">
<span class="material-icons">keyboard_arrow_left</span>
</button>
</div>
<div class="text-left col align-self-center">
<a class="navbar-brand" href="#">
<h5 class="mb-0">Blank</h5>
</a>
</div>
<div class="ml-auto col-auto">
<a href="profile.html" class="avatar avatar-30 shadow-sm rounded-circle ml-2">
<figure class="m-0 background">
<img src="img/user1.png" alt="">
</figure>
</a>
</div>
</div>
</header>
<!-- page content start -->
<div class="main-container">
<div class="container mb-4">
</div>
</div>
</main>
<!-- Required jquery and libraries -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- cookie js -->
<script src="js/jquery.cookie.js"></script>
<!-- Swiper slider js-->
<script src="vendor/swiper/js/swiper.min.js"></script>
<!-- Customized jquery file -->
<script src="js/main.js"></script>
<script src="js/color-scheme-demo.js"></script>
<!-- page level custom script -->
<script>
"use strict"
$(window).on('load', function() {
});
</script>
</body>
</html>PWA progressive web app
There are multiple files we have added and linked to install app from HTML. Progressive web app solution.
manifest.json
This file includes basic app desciption and icons details with different resolution. This should link to HTML head tag we have addded into home page index.html only.
<link rel="manifest" href="manifest.json" />Code structure and details are as below you can modify it as per desire. For icons give path full or if you are using as root add "/filemame.extenstion",.
{
"name": "Finwallapp",
"short_name": "Finwallapp",
"start_url": "landing.html",
"display": "fullscreen",
"background_color": "#efefef",
"theme_color": "#1d28ad",
"orientation": "portrait-primary",
"icons": [
{
"src": "img/favicon72.png",
"type": "image/png", "sizes": "72x72"
},
{
"src": "img/favicon96.png",
"type": "image/png", "sizes": "96x96"
},
{
"src": "img/favicon128.png",
"type": "image/png","sizes": "128x128"
},
{
"src": "img/favicon144.png",
"type": "image/png", "sizes": "144x144"
},
{
"src": "img/favicon152.png",
"type": "image/png", "sizes": "152x152"
},
{
"src": "img/favicon192.png",
"type": "image/png", "sizes": "192x192"
},
{
"src": "img/favicon384.png",
"type": "image/png", "sizes": "384x384"
},
{
"src": "img/favicon512.png",
"type": "image/png", "sizes": "512x512"
}
]
}serviceWorker.js
Services worker js should be into root which can access all the files. Here give file path which you wanted to cache into app. Cached files are only visible offline. Also check file extension and name closely. Here is code to cache files and adding.
var static = "fimobi-v1";
var cacheassets = [
"landing.html",
"login.html",
"signup.html",
"index.html",
"analytics.html",
"wallet.html",
"shop.html",
"profile.html",
"css/style.css",
"js/jquery-3.3.1.min.js",
"js/popper.min.js",
"vendor/bootstrap/js/bootstrap.min.js",
"js/jquery.cookie.js",
"vendor/swiper/js/swiper.min.js",
"vendor/nouislider/nouislider.min.js",
"js/main.js",
"js/color-scheme-demo.js",
"img/user1.png",
"img/user2.png",
"img/user3.png",
"img/user4.png",
"img/image1.jpg",
"img/image2.jpg",
"img/image3.jpg",
"img/image4.jpg",
"img/image5.jpg",
"img/image6.jpg",
"img/image7.jpg",
"img/image8.jpg",
"img/image9.jpg",
"img/image10.jpg",
"img/about.png",
"img/refer.png",
"img/QR.png",
"img/install-app.png",
];
self.addEventListener("install", function (event) {
event.waitUntil(
caches.open(static).then(function (cache) {
cache.addAll(cacheassets);
}).then(function () {
return self.skipWaiting();
})
);
});
self.addEventListener("activate", function (event) {
});
self.addEventListener("fetch", function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request)
})
);
});
pwa-services.js
We have to register service worker somewhere in js file so we have created pwa services js file and added into HTML. This also includes events to show modal popup to install app and once click on install a prompt to install box appear.
<script src="js/pwa-services.js"></script>Here is code used to prompt install and registering service worker into our pages.
'use strict'
/* PWA services worker register */
if ("serviceWorker" in navigator) {
window.addEventListener("load", function (event) {
navigator.serviceWorker
//.register("/website/Finwallapp/serviceWorker.js", {
.register("../serviceWorker.js", {
scope: './'
})
.then(reg => console.log("service worker registered"))
.catch(err => console.log("service worker not registered"));
});
}
/* PWA add to home button */
var btnAdd = document.getElementById('addtohome')
var defferedPrompt;
window.addEventListener("beforeinstallprompt", function (event) {
event.preventDefault();
defferedPrompt = event;
btnAdd.addEventListener("click", function (event) {
defferedPrompt.prompt();
defferedPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
defferedPrompt = null;
});
});
});
window.addEventListener("appinstalled", function (event) {
//app.logEvent("a2hs", "Installed");
document.getElementById('addtodevice').style.display = 'none';
});
if (window.matchMedia('(display-mode: fullscreen)').matches) {
$('#addtodevice').fadeOut()
} else {
$('#addtodevice').fadeIn()
}Home page you can find add to home screen and install button it works same from above and gives gullscreen experience into your devices to access app.
Thank you!
We thank all third parties and plugins frameworks
Image credits to : https://unsplash.com