Fimobile

Document

Getting started

Introduction Browsers Theming Scripts More Framework7

Introduction

Bootstrap 4.3.1 framework based HTML responsive template with wide range of pre-designed HTML widgets, blocks and styles.

Fimobile is based on bootstrap framework 4.3.1 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.

Folder structure

+  css
+  img
+  js 
+ vendors
...
...
...
website pages
...
...
...

css: Template css are placed at this folder
img: All images used in tempaltes for display purpose are stored here (Does not included third party plugin's image in this folder)
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.
website pages: We have unique and creative designs for some of common pages used in websites are into this folder.

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.

Browsers

Fimobile works smoothly with cross browsers. We do care about compatibility.

Our base framework is Bootstrap 4.3.1 which uses many of css3 properties and are compatible with latest modern browsers. Framework uses flex properties for grid structure and we also continued with that only to use of latest technology and design concepts. You can check it out framework guideline regarding compatible browser are at click here.

We have tested template with new latest browsers Chrome, IE 11, MS Edge, Mozilla Firefox. Our template is also responsive and minimum 320px width support some of the contents are depend on length and counts so consider while implementing if you are planning for minimum device support.

This is also HTML css and js template which can help you to support in other technology like Angular, vue js, .net, php developments. Which renders HTML into browsers. Some of technology which uses the HTML template for devices like phone gap can also be used with this template to create hybrid mobile app.
You can check out our demos. We are still growing and provide more application demos with new features and facility.

Internet Explorer 10+ is supported; IE9 and older will be not supported. You can check % of browsers are used word wide with version to get idea about how important it is. Make sure that some CSS3 properties and HTML5 elements are not fully supported in IE10 and this may require prefixed css.

Colors Templating

Fimobile comes with predefined themes for different color schemes.

Fimobile comes with predefined css with different shades. You can access our demos and click on menu > color scheme to view colors are available. You just have to switch with different css classes on html tag file.

Default white css:

<html lang="en" class="blue-theme">

class="pink-theme"
class="brown-theme"
class="red-theme"
class="green-theme"
class="purple-theme"
etc.

Dark theme css file along with above class add theme-dark:

<html lang="en" class="blue-theme theme-dark">

Icons

We have used icons from material icons and can be found at : https://material.io/tools/icons/

Use code as below mentioned where "text-danger" is just color class for red color :

<i class="material-icons text-danger" >favorite<i>

Scripts

Fimobile comes with predefined script formenu close and template color schemes.

For jQuery and framework js files, you can find it at bottom of the page code. First all three files are added and later our custom css added. You can add any other css from third party in between of these two group framework js and custom js. However custom js comes with code which we requires in template for all features. you can define your js as per your need.

We have added comments at start of each script for functionalities we have used.

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="vendor/bootstrap-4.3.1/js/bootstrap.min.js"></script>
	  
<!-- template custom js -->
<script src="js/main.js"></script>

Fimobile is crafted with uniqueness and modern touch

For begining page you can start with the default page code for template.

<!doctype html>
<html lang="en" class="blue-theme">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="Maxartkiller">

    <title>Home · Fimobile </title>

    <!-- Material design icons CSS -->
    <link rel="stylesheet" href="vendor/materializeicon/material-icons.css">

    <!-- Roboto fonts CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap-4.3.1/css/bootstrap.min.css" 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">
</head>

<body>
    <!-- Loader -->
    <div class="row no-gutters vh-100 loader-screen">
        <div class="col align-self-center text-white text-center">
            <img src="img/logo.png" alt="logo">
            <h1 class="mt-3"><span class="font-weight-light ">Fi</span>Book</h1>
            <p class="text-mute text-uppercase small">Mobile Template</p>
            <div class="laoderhorizontal">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <!-- Loader ends -->

    <!-- sidebar -->
    <div class="sidebar">        
        <div class="my-5">           
            <div class="row">
                <div class="col-auto">
                    <figure class="avatar avatar-60 border-0"><img src="img/user1.png" alt=""></figure>
                </div>
                <div class="col pl-0 align-self-center">
                    <h5 class="mb-1">Ammy Jahnson</h5>
                    <p class="text-mute small">Work, London, UK</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">                
                <div class="list-group main-menu">
                    <a href="index.html" class="list-group-item list-group-item-action active"><i class="material-icons icons-raised">home</i>Home</a>
                    <a href="notification.html" class="list-group-item list-group-item-action"><i class="material-icons icons-raised">notifications</i>Notification <span class="badge badge-dark text-white">2</span></a>
                    <a href="alltransactions.html" class="list-group-item list-group-item-action"><i class="material-icons icons-raised">find_in_page</i>History</a>
                    <a href="controls.html" class="list-group-item list-group-item-action"><i class="material-icons icons-raised">view_quilt<span class="new-notification"></span></i>Pages Controls</a>
                    <a href="setting.html" class="list-group-item list-group-item-action"><i class="material-icons icons-raised">important_devices</i>Settings</a>
                    <a href="login.html" class="list-group-item list-group-item-action"><i class="material-icons icons-raised bg-danger">power_settings_new</i>Logout</a>
                </div>
            </div>
        </div>        
    </div>
    <a href="javascript:void(0)" class="closesidemenu"><i class="material-icons icons-raised bg-dark ">close</i></a>
    <!-- sidebar ends -->

    <div class="wrapper">

        <!-- header -->
        <div class="header">
            <div class="row no-gutters">
                <div class="col-auto">
                    <button class="btn  btn-link text-dark menu-btn"><img src="img/menu.png" alt=""><span class="new-notification"></span></button>
                </div>
                <div class="col text-center"><img src="img/logo-header.png" alt="" class="header-logo"></div>
                <div class="col-auto">
                    <a href="notification.html" class="btn  btn-link text-dark position-relative"><i class="material-icons">notifications_none</i><span class="counts">9+</span></a>
                </div>
            </div>
        </div>
        <!-- header ends -->

        <div class="container">
            <!-- page content here -->

            <!-- page content ends -->
        </div>

        <!-- footer-->
        <div class="footer">
            <div class="no-gutters">
                <div class="col-auto mx-auto">
                    <div class="row no-gutters justify-content-center">
                        <div class="col-auto">
                            <a href="index.html" class="btn btn-link-default active">
                                <i class="material-icons">home</i>
                            </a>
                        </div>
                        <div class="col-auto">
                            <a href="statistics.html" class="btn btn-link-default">
                                <i class="material-icons">insert_chart_outline</i>
                            </a>
                        </div>
                        <div class="col-auto">
                            <a href="wallet.html" class="btn btn-link-default">
                                <i class="material-icons">account_balance_wallet</i>
                            </a>
                        </div>
                        <div class="col-auto">
                            <a href="transactions.html" class="btn btn-link-default">
                                <i class="material-icons">widgets</i>
                            </a>
                        </div>
                        <div class="col-auto">
                            <a href="profile.html" class="btn btn-link-default">
                                <i class="material-icons">account_circle</i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer ends-->
        
    </div>

    <!-- jquery, popper and bootstrap js -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="vendor/bootstrap-4.3.1/js/bootstrap.min.js"></script>

    <!-- swiper js -->
    <script src="vendor/swiper/js/swiper.min.js"></script>

    <!-- template custom js -->
    <script src="js/main.js"></script>

    <!-- page level script -->
    <script>
        $(window).on('load', function() {

        });

    </script>

</body>
</html>

Framework7 official documentation can be found at here. Framework 7 also comes with many color schemes and other layout dark and light.

You can change style default by adding classes to HTML tag :

<html lang="en" class="color-theme-blue theme-dark">

Here you need to add theme-dark or theme-light for color layout type selection. If none defined only light color layout selected.

Also to preview framwork7 layout you need to localhost or server host. As its used ajax page routing stystem.

Thanks for taking interest and purchase our template.