GoMobileUX Document
Mobile UI/UX HTML Template
Introduction
GoMobileUX 2.0 is HTML template with lots of possibility to create mobile website and mobile application.
Template build with Bootstrap version 5.0.x mobile first HTML/js framework. 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, also added comment lines in code structure to differentiate modules from each other. For the third parties we recommend to visit official documents for complete guidelines about third parties. We have used Visual Studio Code and Bracket.io html editor during this documentation and code writing. To compile scss you can use scout-app.io, its very easy and light weight for scss compilation with many export options.
We also created color schemes with different style.css you can switch other style by using different stylesheets and create your own by changing variables color code. in _variable.scss.
# Quick Start
To quick start you can take pages and start editing project.
Our template is so easy to userstand by any HTML developer of programmer. However there are many other things to know about the project structure and other components like third parties. We have also tried to kept everything understable and easy to modify which helps developer and customer to make it robust elastic product. Can also save time on UI customization.
Icons
We have used bootstrap icons and laoded directly to the page ia cdn network. You can add it by copy paste code as beolow in head tag of HTML page.
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" >
Stylesheet
We have used bootstrap icons and laoded directly to the page ia cdn network. You can add it by copy paste code as beolow in head tag of HTML page.
<!-- style css for this template -->
<link href="assets/css/style.css" rel="stylesheet" id="style">
JS and JQuery
There are many interaction are made with jquery and javascript for template purpuse and for third parties. Also there are dependencies for template framework also to use certain library. We have added all gernerally using predefined third parties and library in advance and other we use as on go page level attached js/jquery. Here, below are preseted default script files linked on page as minimum required files.
<!-- Required jquery and libraries -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/vendor/bootstrap-5/js/bootstrap.bundle.min.js"></script>
<!-- cookie js -->
<script src="assets/js/jquery.cookie.js"></script>
<!-- Customized jquery file -->
<script src="assets/js/main.js"></script>
<script src="assets/js/color-scheme.js"></script>
<!-- page level custom script -->
<script src="assets/js/app.js"></script>
# Folders
Clean code requires clean arrangement of folders which helps files to remain organized.
We have main folder assets and inside all the other files organized by its type to maintain HTML pages saperate from other files. At the first look all other folders are inside assets folder like css, js, vendors etc. Nested strcutre are as below and here we have described each folder with its purpose and use.
:Document
-- document.html
:HTML
-- assets
---- css
---- img
---- js
---- scss
---- vendor
------ bootstrap-5
------ chart-js-3.3.1
------ nouislider
------ progressbar-js
------ sparklines
------ swiperjs-6.6.2
-- .html all other pages
:XD-Source
-- GoMobileUX_V2.xd
:Framework 7
-- css
-- img
-- js
-- scss
-- vendor
-- index.html
:Angular12
-- src
-- package and configs
Document
Document folder contains document file which you are currently reading.
HTML
HTML folder have all the HTML files which you have seen in preview and dependent files with organized folder structure.
-
assets
All the files required in HTML like css, js, images etc. are kept inside assets folder
- css: All exported or compiled css files are to be kept inside this css folder.
- img: Images required to add are to be kept in img folder whether its jpg or png. We have kept othr logo and icons files in img folder.
- js: Script files to run framework apart from third parties are kept inside this js folder. you can find app.js and main.js in this t change events and page level event by jquery.
- scss: All basic scss files are kepts inside this folder with the variables color codes files.if you wanted to change any of the style colors you can edt or similarly create
style-[your color name here].scssand respective to_variable-[your color name here].scssfile also you need to update this variable file name inside te new created filestyle-[your color name here].scss. - vendor: All the third parties are avaialble here in this folder. We have named such third party used in this template to give idea here how to place and organize third party when working with this template. This thing is recommended not mandatory, you can create your own folder also.
-
HTML pages
All other html pages rest inside the HTML folder with assets folder parallel.
Framework 7 core
We have created template with framework 7 core mobile framework with similar designs. Here we ahve presented documentation about html pages. There are similar file placement done as per html template folder structure. For framewok 7 working and elements you can find full documentation about framework at https://framework7.io/docs/ official framework website.
XD-Source
We have designed few sample screens in xd and placed with the bundle if it helps developer or designer to screen any similar changes and screens from scratch. There may be some changes made during updating or creating html based on framework structure which are neccesory.
# Browsers and Devices
Support major browsers as per Framework support provided. If there are any bug to specific latest browser will update code as much as possibly.
Framework supports the latest, stable releases of all major browsers and platforms. Browser support which is now required things all the major browser supports css3 and HTML5, so there are decreased chances to of framework elemnts not supporting.Third parties: As we mentioned earlier, you ahve to double check on their official website for browser and deveices support.
>= 0.5%
last 2 major versions not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
# Preview
Best look code at preview section whether our preview page or directly open html page into your device.
We have already showcase our preview teplate page. However, you can double click on html page to directly open into browser. Here while you open page directly some features like cookie are not working. Cookie requires server to be perform task. Thats why to see color changes and save cookie into browser for great user experiecnce, you have to host or localhost html pages and start previewing without any dificulties or issues. Here you can take a look of simple HTML in below example.
# Page Code
Quick start you html with page code and also with blank.html page
We have devided page into multiple components like header, sidebar, footer, footer informative and content. Different elements represents different purpose thats why we have index page with static fixed footer at bottom while other pages are informative without static footer. You can always personalize pages as per your need and start customizing currenlty created page. We recommended create copy of page and start editing. Please see below page code from blank HTML:
<!doctype html>
<html lang="en" class="dark-mode">
<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>GoMobileUX V2.0 - Mobile HTML template</title>
<!-- manifest meta -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Favicons -->
<link rel="apple-touch-icon" href="assets/img/favicon180.png" sizes="180x180">
<link rel="icon" href="assets/img/favicon32.png" sizes="32x32" type="image/png">
<link rel="icon" href="assets/img/favicon16.png" sizes="16x16" type="image/png">
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<!-- style css for this template -->
<link href="assets/css/style.css" rel="stylesheet" id="style">
</head>
<body class="body-scroll" data-page="blank">
<!-- loader section -->
<div class="container-fluid loader-wrap">
<div class="row h-100">
<div class="col-10 col-md-6 col-lg-5 col-xl-3 mx-auto text-center align-self-center">
<div class="loader-cube-wrap mx-auto">
<div class="loader-cube1 loader-cube"></div>
<div class="loader-cube2 loader-cube"></div>
<div class="loader-cube4 loader-cube"></div>
<div class="loader-cube3 loader-cube"></div>
</div>
<p>Let's Create Difference<br><strong>Please wait...</strong></p>
</div>
</div>
</div>
<!-- loader section ends -->
<!-- Sidebar main menu -->
<div class="sidebar-wrap sidebar-overlay">
<!-- Add pushcontent or fullmenu instead overlay -->
<div class="closemenu text-opac">Close Menu</div>
<div class="sidebar">
<div class="row mt-4 mb-3">
<div class="col-auto">
<figure class="avatar avatar-60 rounded mx-auto my-1">
<img src="assets/img/user2.jpg" alt="">
</figure>
</div>
<div class="col align-self-center ps-0">
<h6 class="mb-0">Selvy Smith</h6>
<p class="text-opac">Australia, UK</p>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="stats.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-house-door"></i></div>
<div class="col">Dashboard</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
aria-expanded="false">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-shop"></i></div>
<div class="col">Shop</div>
<div class="arrow"><i class="bi bi-plus plus"></i> <i class="bi bi-dash minus"></i>
</div>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-link" href="home.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-bag"></i></div>
<div class="col">Shop home</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="product.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-binoculars"></i></div>
<div class="col">Product</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="cart.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-basket3"></i></div>
<div class="col">Cart</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="payment.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-credit-card"></i></div>
<div class="col">Payment</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="my-orders.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-box-seam"></i></div>
<div class="col">My Orders</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="chat.html" tabindex="-1" >
<div class="avatar avatar-40 rounded icon"><i class="bi bi-chat-text"></i></div>
<div class="col">Messages</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="notifications.html" tabindex="-1" >
<div class="avatar avatar-40 rounded icon"><i class="bi bi-bell"></i></div>
<div class="col">Notification</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="settings.html" tabindex="-1" >
<div class="avatar avatar-40 rounded icon"><i class="bi bi-gear"></i></div>
<div class="col">Settings</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages.html" tabindex="-1" >
<div class="avatar avatar-40 rounded icon"><i class="bi bi-file-earmark-text"></i></div>
<div class="col">Pages <span class="badge bg-info fw-light">new</span></div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signin.html" tabindex="-1" >
<div class="avatar avatar-40 rounded icon"><i class="bi bi-box-arrow-right"></i></div>
<div class="col">Logout</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Sidebar main menu ends -->
<!-- Begin page -->
<main class="h-100 has-header">
<!-- Header -->
<header class="container-fluid header">
<div class="row">
<div class="col-auto align-self-center">
<button type="button" class="btn btn-link menu-btn text-color-theme">
<i class="bi bi-list size-24"></i>
</button>
</div>
<div class="col text-center">
<div class="logo-small">
<img src="assets/img/logo.png" alt="" class="img">
<h6>GO<br><small>MobileUX</small></h6>
</div>
</div>
<div class="col-auto align-self-center">
<a href="profile.html" class="link text-color-theme">
<i class="bi bi-person-circle size-22"></i>
</a>
</div>
</div>
</header>
<!-- Header ends -->
<!-- main page content -->
<div class="main-container container">
</div>
<!-- main page content ends -->
</main>
<!-- Page ends-->
<!-- Required jquery and libraries -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/vendor/bootstrap-5/js/bootstrap.bundle.min.js"></script>
<!-- cookie js -->
<script src="assets/js/jquery.cookie.js"></script>
<!-- Customized jquery file -->
<script src="assets/js/main.js"></script>
<script src="assets/js/color-scheme.js"></script>
<!-- page level custom script -->
<script src="assets/js/app.js"></script>
</body>
</html>Blank page preview
Elements
Creating creative useful application with a best elements like header, footer and sidebar.
Typically we have mostly used area like as header, sidebar, footer and content. We have two types of footer and three types of sidebar. Content can be used as customized way as your need. There are unlimilted posibility of content placement as your desires, You just need to copy and paste pre defined elemnts.
# Header
Fixed top header
We have added three column static fixed header at top of the page. Here in left column you can define events for navigation like menu and back button. Last column can be used for notifications, profile or settnigs page navigation. Centered olumn can have multiple usage like either you user as search box or can be used as page title. Header is very simpler code and easy to update.
<!-- Header -->
<header class="container-fluid header">
<div class="row">
<div class="col-auto align-self-center">
<button type="button" class="btn btn-link menu-btn text-color-theme">
<i class="bi bi-list size-24"></i>
</button>
</div>
<div class="col text-center">
<div class="logo-small">
<img src="assets/img/logo.png" alt="" class="img">
<h6>GO<br><small>MobileUX</small></h6>
</div>
</div>
<div class="col-auto align-self-center">
<a href="profile.html" class="link text-color-theme">
<i class="bi bi-person-circle size-22"></i>
</a>
</div>
</div>
</header>
<!-- Header ends --># Footer
Best design and user centric placement.
There are two footer we have used one is fixed position at bottom and other is textul content fluid footer. Both have different purpose in application. Fixed footer at bottom with icons are easy to switch between app pages. Also the second footer is used to add copyright text and social links.
<!-- Footer -->
<footer class="footer">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="home.html">
<span>
<i class="nav-icon bi bi-house"></i>
<span class="nav-text">Home</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="stats.html">
<span>
<i class="nav-icon bi bi-bar-chart-line"></i>
<span class="nav-text">Stats</span>
</span>
</a>
</li>
<li class="nav-item center-item">
<a class="nav-link" href="cart.html">
<span>
<i class="nav-icon bi bi-bag"></i>
<span class="nav-text">Cart</span>
<span class="countercart">3</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="style.html">
<span>
<i class="nav-icon bi bi-palette"></i>
<span class="nav-text">Style</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="settings.html">
<span>
<i class="nav-icon bi bi-gear"></i>
<span class="nav-text">Settings</span>
</span>
</a>
</li>
</ul>
</div>
</footer>
<!-- Footer ends--># Sidebar
Three style one code change by just applying one class.
Our flexible and creative development makes it possible to change sidebar view just bt changing the class name at one place. This will automatically owns its style as per class name. We have three types of sidebar Popover/Overlay, Push Content and Fullscreen. Each can be changed by adding or keeping class name respectively sidebar-overlay, sidebar-pushcontent, sidebar-fullmenu.
<!-- Sidebar main menu -->
<div class="sidebar-wrap sidebar-overlay">
<!-- Add pushcontent or fullmenu instead overlay -->
<div class="closemenu text-opac">Close Menu</div>
<div class="sidebar">
<div class="row mt-4 mb-3">
<div class="col-auto">
<figure class="avatar avatar-60 rounded mx-auto my-1">
<img src="assets/img/user2.jpg" alt="">
</figure>
</div>
<div class="col align-self-center ps-0">
<h6 class="mb-0">Selvy Smith</h6>
<p class="text-opac">Australia, UK</p>
</div>
</div>
<div class="row">
<div class="col-12">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="stats.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-house-door"></i></div>
<div class="col">Dashboard</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
aria-expanded="false">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-shop"></i></div>
<div class="col">Shop</div>
<div class="arrow"><i class="bi bi-plus plus"></i> <i class="bi bi-dash minus"></i>
</div>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-link active" href="home.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-bag"></i></div>
<div class="col">Shop home</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="product.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-binoculars"></i></div>
<div class="col">Product</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="cart.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-basket3"></i></div>
<div class="col">Cart</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="payment.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-credit-card"></i></div>
<div class="col">Payment</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
<li><a class="dropdown-item nav-link" href="my-orders.html">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-box-seam"></i></div>
<div class="col">My Orders</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="chat.html" tabindex="-1">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-chat-text"></i></div>
<div class="col">Messages</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="notifications.html" tabindex="-1">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-bell"></i></div>
<div class="col">Notification</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="settings.html" tabindex="-1">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-gear"></i></div>
<div class="col">Settings</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages.html" tabindex="-1">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-file-earmark-text"></i></div>
<div class="col">Pages <span class="badge bg-info fw-light">new</span></div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signin.html" tabindex="-1">
<div class="avatar avatar-40 rounded icon"><i class="bi bi-box-arrow-right"></i></div>
<div class="col">Logout</div>
<div class="arrow"><i class="bi bi-arrow-right"></i></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Sidebar main menu ends --># Content
Playground for the content.
You can place each page content inside this div shown below. You can use grid structure as well as other HTML elements for page content.
<!-- main page content -->
<div class="main-container container">
</div>
<!-- main page content ends -->Color Schemes
Define your brand and let customer identify you as leader
We believe branding is everything to create long term impact on customer or user's mind. By keeping this in mind we have added customizable scssvariable file where you can add your colors and codes. We have also predefined style which can be used directly by adding into head tag of HTML. We have added colorscheme along with dark mode also. So you can switch eaither darkmode or light mode with desired color scheme in both mode. This gives more flexibility to adopt trending darkmode layout.
# Colors
Colors you desire, customize in variable code and compile into new css.
You can create new style or user existing predefined css by just placing into head tag. Also you can create new and give your desired name and add into color switcher. In the demo we have added style switcher with can be work properly while you host pages or locally host pages. Place default style into head shown as below:
<!-- style css for this template -->
<link href="assets/css/style-red.css" rel="stylesheet" id="style"># Layout Mode
Dark mode is trending item now a days adopt it with hasselfree.
No worries about lot of work for darkmode. Template comes with the darkmode inbuilt and you can switch dark mode default by adding just class name to first parent of page.
<html lang="en" class="dark-mode">