Document

V 1.0, Prepared by Maxartkiller, Creator of GoTRI-Mobile admin UI template, Drop a words at info@maxartkiller.in

Introduction


GoTRI - Mobile is admin HTML template proudly developed with loving framework bootstrap 4. Basically this time we are thinking about to provide something diffrent than all other traditional monotonous templates. We belive in creative design with most usable structure and placements. We believe user should feel something awesome and wow while using accessing user interfaces. We can about users first and we care about customers.

Here, Guidelines provided and introduces, few repeated content pages may be skipped through this guidelines. For the third parties we recommend to visit official docuemnts for complete guidelines about third parties. We have used Bracket.io html editor during this documentation and code writing. We also used Scout-app : The Sass GUI tool for compilation for scss.

We also created themes with diffrent css you can switch other style theme with saperate css so we can reduce page load while writing and overiting css properties. This template also includes SCSS files which can be easily modified as per you need. We also customized variables properties of bootstrape scss and made it with 12 column grid structure. Grid structure can be changed by change in variables file of bootstrap scss. We have made our template based on 12 column stucture to make it fit with our UI to provide better responsive space in smaller view port sizes.

This is all about this template. Hope you like our template and dont forget to share your experience.

Folder structure
+  css
+  img
+  js 
+  scss
+ 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)
  • scss: Scss source file for the expanding css 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.
  • 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 web application or website creation.

Browsers

GoTRI - Mobile works smoothly with cross browsers. We do care about compatibility.


Our base framework is Bootstrap 4.1.3+ 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 400px 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

GoTRI - Mobile comes with predefined themes for different color schemes.



GoTRI - Mobile comes with predefined css with different shades. You can access our demos and click on menu > color scheme to view colorsare available, also from right setting sidebar colrs them select critera like sidebar bull colors or header and select color to apply it. You just have to switch with different css file. However this template comes with SCSS files so you can customize your own brand colors and compile it into css files. We have default white color template css and other are given color name as suffix.

Default white css file:

<link id="theme" rel="stylesheet" href="css/styleheadersidebar.css" type="text/css">

Dark css file full dark:

<link id="theme" rel="stylesheet" href="css/css/grey.css" type="text/css">

Purple css file header and sidebar colors:

<link id="theme" rel="stylesheet" href="css/purpleheadersidebar.css" type="text/css">

Red with Dark layout css file header and sidebar color:

<link id="theme" rel="stylesheet" href="css/dark-pinkheadersidebar.css" type="text/css">
and so on...
Here in demo whave used main.js which will not switch uin stlye but you can also switch styles by incluing cookie.js and main-with-style-switcher.js file scripts which requires local host server or a server hosting to run cookie. By selecting color schemes in right side panel. You can switch colors.

Scripts

GoTRI - Mobile comes with predefined script for menu 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.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="vendor/bootstrap-4.1.3/bootstrap.min.js"></script>
	  
<!-- Custom script -->
<script src="js/main.js"></script>

More

GoTRI - Mobile 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">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">

    <!-- favicons -->
    <link rel="apple-touch-icon" href="img/favicon-apple.png">
    <link rel="icon" href="img/favicon.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="vendor/bootstrap-4.1.3/css/bootstrap.min.css">

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

    <!-- aniamte CSS -->
    <link rel="stylesheet" href="vendor/animatecss/animate.css">

    <!-- app CSS -->
    <link id="theme" rel="stylesheet" href="css/purplesidebar.css" type="text/css">

    <title>GoTRI</title>
</head>

<body class="fixed-header sidebar-right-close">
    <!-- page loader -->
    <div class="loader justify-content-center pink-gradient">
        <div class="align-self-center text-center">
            <div class="logo-img-loader">
                <img src="img/loader-hole.png" alt="" class="logo-image">
                <img src="img/loader-bg.png" alt="" class="logo-bg-image">
            </div>
            <h2 class="mt-3 font-weight-light">GoTRI</h2>
            <p class="mt-2 text-white">Awesome things getting ready...</p>
        </div>
    </div>
    <!-- page loader ends  -->

    <div class="wrapper">
        <!-- main header -->
        <header class="main-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-auto pl-0">
                        <button class="btn pink-gradient btn-icon" id="left-menu"><i class="material-icons">widgets</i></button>
                        <a href="index.html" class="logo"><img src="img/logo-icon.png" alt=""><span class="text-hide-xs"><b>Go</b>PRO</span></a>
                        <form class="search-header">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search...">
                                <div class="input-group-append">
                                    <button class="btn " type="button"><i class="material-icons">search</i></button>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="col text-center p-xs-0">
                        <ul class="time-day">
                            <li class="text-right">
                                <p class="header-color-primary"><span class="header-color-secondary">November</span><small>2018</small></p>
                                <h2>7</h2>
                            </li>
                            <li class="text-left">
                                <h2>36<span class="header-color-secondary font-weight-light"><sup>o</sup>C</span></h2>
                                <p class="header-color-primary text-hide-lg"><span class="header-color-secondary">London</span><small>11:24 am</small></p>
                            </li>
                        </ul>

                    </div>
                    <div class="col-auto pr-0">
                        <button class="btn btn-search btn-icon header-color-secondary" type="button"><i class="material-icons">search</i></button>

                        <div class="dropdown d-inline-block">
                            <a class="btn header-color-secondary btn-icon dropdown-toggle caret-none" href="#" role="button" id="dropdownmessage2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <figure class="avatar avatar-24 vm d-inline-block border"><img src="img/india.png" alt=""></figure>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="dropdownmessage2">
                                <div class="dropdown-item">
                                    <figure class="avatar avatar-24 mr-2 vm d-inline-block"><img src="img/india.png" alt=""></figure> India
                                </div>
                                <div class="dropdown-item">
                                    <figure class="avatar avatar-24 mr-2 vm d-inline-block"><img src="img/canada.png" alt=""></figure> Canada
                                </div>
                                <div class="dropdown-item">
                                    <figure class="avatar avatar-24 mr-2 vm d-inline-block"><img src="img/unitedstates.png" alt=""></figure> United States
                                </div>
                                <div class="dropdown-item">
                                    <figure class="avatar avatar-24 mr-2 vm d-inline-block"><img src="img/uk.png" alt=""></figure> United Kingdom
                                </div>
                                <div class="dropdown-item">
                                    <figure class="avatar avatar-24 mr-2 vm d-inline-block"><img src="img/china.png" alt=""></figure> China
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>
        </header>
        <!-- main header ends -->

        <!-- sidebar left -->
        <div class="sidebar sidebar-left">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a href="javascript:void(0);" class="nav-link dropdwown-toggle"><i class="material-icons icon">insert_chart_outlined</i> <span>Dashboard</span><i class="material-icons icon arrow">expand_more</i></a>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="index.html" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>Production</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="ecommerce.html" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>eCommerce</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="networking.html" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>Networking</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="finance.html" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>Finance</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="social.html" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>Social</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="todo.html" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>ToDo</span></a>
                        </li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="javascript:void(0);" class="nav-link dropdwown-toggle"><i class="material-icons icon">domain</i> <span>Level 1</span><i class="material-icons icon arrow">expand_more</i></a>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="javascript:void(0);" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>Level 2</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="javascript:void(0);" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>Level 2</span></a>
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a href="javascript:void(0);" class="nav-link pink-gradient-active"><i class="material-icons icon"></i> <span>Level 3</span></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- sidebar left ends -->

        <!-- sidebar right -->
        <div class="sidebar sidebar-right">
            <button type="button" class="btn close-sidebar"><i class="material-icons">settings</i></button>
            <div class="row mx-0 pt-2">
                <div class="col-12">
                    <p class="sidebar-color-primary page-sub-title-small">
                        <span class="icon-circle mr-2">
                            <i class="material-icons">settings</i>
                        </span>Visual Style Setting</p>
                    <p class="sidebar-color-secondary">We provide wide range of color scheme to change from</p>
                    <div class="row">
                        <ul class="list-group border-top border-bottom list-group-flush w-100">
                            <li class="list-group-item">
                                <span class="vm">Boxed Layout</span>
                                <input type="checkbox" id="boxlayout" class="switch switch-sm">
                                <label for="boxlayout" class="pink-gradient float-right"></label>
                            </li>
                            <li class="list-group-item">
                                <span class="vm">Full Container</span>
                                <input type="checkbox" id="full-width2" class="switch switch-sm">
                                <label for="full-width2" class="pink-gradient float-right"></label>
                                <p class="sidebar-color-secondary mt-2 mb-0"><small>Container will be full width in big screen</small></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- sidebar right ends -->

      

        <!-- content page title -->
        <div class="container-fluid bg-light-opac">
            <div class="row">
                <div class="container my-3 main-container">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="content-color-primary page-title">Blank</h2>
                            <p class="content-color-secondary page-sub-title">Creative, amazing, awesome and unique</p>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-rounded pink-gradient text-uppercase pr-3"><i class="material-icons">add</i> <span class="text-hide-xs">Create</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- content page title ends -->

        <!-- content page -->
        <div class="container mt-4 main-container">
            Content here
        </div>
        <!-- content page ends -->

    </div>
    <footer class="border-top">
        <div class="row">
            <div class="col-12 col-sm-6">This template is designed by <b>maxartkiller</b> with <span class="text-danger">❤</span></div>
            <div class="col-12 col-sm-6 text-right"><a href="" class="content-color-secondary">Privacy Policy</a> | <a href="" class="content-color-secondary">Terms of use</a></div>
        </div>
    </footer>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="vendor/bootstrap-4.1.3/js/bootstrap.min.js"></script>

    <!-- Application main common jquery file -->
    <script src="js/main.js"></script>

    <!-- page specific script -->
</body>

</html>

Thanks for taking interest and purchase our template.