Documentation
OneUIUX Creative & Unique Mobile Templates
Introduction
Bootstrap 4.4.1 framework based HTML responsive template with wide range of pre-designed HTML widgets, blocks and styles.
OneUIUX is based on bootstrap framework 4.4.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.
-OneUIUX-mobile
-assets
+ css
+ img
+ js
+ scss
+ vendors
- components
...
...
...
.compontents Mobile pages
...
...
...
- businessevent
- financialadvisor
- .... Other Mobile demo folders
- HTML: Main project source file for HTML template are in this folder
- assets: All the assets images js and vendor third parties are available 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.
- compontents: All predesigned component HTMLs like logins, features, icons are placed in this folder.
- other Mobile demo folders: Demo Mobile template folders are here with name as demo on 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 Mobile creation. Fresh page consider blank.html with minimal available page content. Copy the assets folder and demo folder to quick start your project.
Style
OneUIUX comes with predefined themes for different color schemes.
OneUIUX 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="../assets/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 funationalities 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. Here specific demo has specific css and js demo specific in demo folder.
Page specific
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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="OneUIUX HTML website template by Maxartkiller">
<meta name="author" content="Maxartkiller">
<title>OneUIUX HTML website template by Maxartkiller</title>
<!-- Favicons -->
<link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="mask-icon" href="assets/img/favicons/safari-pinned-tab.svg" color="#ffffff">
<link rel="icon" href="assets/img/favicons/favicon.ico">
<!-- Elegant font icons -->
<link href="assets/vendor/elegant_font/HTMLCSS/style.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/style-purple.css" rel="stylesheet" id="style">
</head>
<body class="ui-rounded">
<!-- Page laoder -->
<div class="container-fluid pageloader">
<div class="row h-100">
<div class="col-12 align-self-start text-center">
</div>
<div class="col-12 align-self-center text-center">
<div class="loader-logo">
<div class="logo">1<span>UX</span><span>UI</span>
<div class="loader-roller">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<h4 class="logo-text"><span>OneUIUX</span><small>Mobile HTML</small></h4>
</div>
</div>
<div class="col-12 align-self-end text-center">
<p class="my-5">Please wait<br><small class="text-mute">A world of great designs is loading...</small></p>
</div>
</div>
</div>
<!-- Page laoder ends -->
<!-- Fixed navbar -->
<header class="header fixed-top">
<nav class="navbar">
<div>
<button class="menu-btn btn btn-link btn-44">
<span class="icon material-icons">menu</span>
</button>
</div>
<div>
<a class="navbar-brand" href="index.html">
<div class="logo">1<span>UX</span><span>UI</span></div>
<h4 class="logo-text"><span>OneUIUX</span><small>Mobile HTML</small></h4>
</a>
</div>
<div>
<form class="form-inline search">
<input class="form-control w-100" type="text" placeholder="Search..." aria-label="Search">
<button class="btn btn-link btn-44" type="submit"><span class="icon_search"></span></button>
</form>
<button class="btn btn-link search-btn" type="button"><span class="icon_search"></span></button>
<a href="profile.html" class=""><span class="avatar avatar-30"><img src="../assets/img/user1.png" alt=""></span></a>
</div>
</nav>
</header>
<!-- Fixed navbar ends -->
<!-- Begin page content -->
<main class="flex-shrink-0 main-container">
<!-- page content goes here -->
<div class="container my-5 text-center">
<h2 class="f-80 font-weight-bold">Blank</h2>
<h2 class="font-weight-medium">OneUIUX Creative & Unique website Templates</h2>
</div>
</main>
<!-- End of page content -->
<!-- Footer -->
<footer class="footer mt-auto py-3">
<div class="container section-100">
<h1>One<span>UI</span><span>UX</span></h1>
<p class="text-mute mt-4">Multipurpose multipages Mobile HTML template with large number of components and ready to use elements sections. This template build with Bootstrap 4, HTML, CSS, SCSS styling and JQuery.</p>
</div>
<hr class="mt-0">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-md-auto text-center">
<a href="https://www.facebook.com/maxartkiller/" target="_blank" class="btn btn-link px-2"><span class="social_facebook"></span></a>
<a href="https://twitter.com/maxartkiller" class="btn btn-link px-2" target="_blank"><span class="social_twitter"></span></a>
<a href="https://www.linkedin.com/company/maxartkiller" class="btn btn-link px-2" target="_blank"><span class="social_linkedin"></span></a>
<a href="https://www.instagram.com/maxartkiller/" class="btn btn-link px-2" target="_blank"><span class="social_instagram"></span></a>
<a href="https://dribbble.com/maxartkiller" class="btn btn-link px-2" target="_blank"><span class="social_dribbble"></span></a>
</div>
</div>
<hr>
<p class="text-center">For the humans by the human, <span class="text-mute">Hand Crafted by <a href="https://maxartkiller.com/" target="_blank">Maxartkiller</a> with </span><span class="text-danger">❤</span></p>
</div>
</footer>
<!-- Footer 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-4.4.1/js/bootstrap.min.js"></script>
<!-- cookie css -->
<script src="assets/vendor/cookie/jquery.cookie.js"></script>
<!-- Customized jquery file -->
<script src="assets/js/main.js"></script>
<script src="assets/js/color-scheme-demo.js"></script>
</body>
</html>
Thank you!
We thank all third parties and plugins frameworks
Image credits to : https://unsplash.com
Image credits to : https://pixabay.com/