HealthOn Us

Health On Us Dashboard

Petal of flower being ready to blossom


Main navigation
#1

Creative & Multipurpose Admin HTML Template

Let's get started with AdminUX


HealthOnUs is creative and multipurpose template. You can use it for CRM, Business application, Intranet Application, Portal service and Many more. It comes with unlimited possibilities and 10+ predefined styles which you can also mix up and create new style. Do support and spread a word for us.

Template build with Bootstrap version 5.2.0 HTML CSS 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 targeted to create different types of demo pages 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. For the third parties we recommend to visit official documents for complete guidelines about third parties. We have used Visual Studio Code as editor during this documentation and code writing. To compile scss you can use live Sass Compiler for Visual Studio Code extension, its very easy and light weight for scss compilation on realtime auto reload "live server" extension for HTML.

We also created color schemes with different classes, you can switch other style by using different class name like theme-yellow, theme-red, theme-purple and create your own by changing variables color codes in _variable.scss for dark mode _darkmode.scss.

Hope this will bring new horizon and new fresh ideas for trending Fluent design concept. Please do support us and spread a word about us, this will help us to create more beautiful and useful interfaces designs.


Clean and Creative design and pleasant colors scheme to improve productivity and improve application usage for business, application, network and to communicate with real-world's humans.

#

Folder Structure

Folder structure and files guidance for our downloaded files.

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 separate from other files. At the first look all other folders are inside assets folder like css, js, vendors etc. Nested structure are as below and here we have described each folder with its purpose and use.

:HTML
--  assets
----  css
----  img
----  js
----  scss
----  vendor
------  bootstrap-5
------  chart-js-3.3.1
------  chosen_v1.8.7
------  Circle-pack
------  ckeditor5
------  daterangepicker
------  dragula
------  dropzpone5-9-3
------  fooTable
------  fullCalendar
------  highlight
------  jqvMap
------  nouislider
------  Product-tour
------  progressbar-js
------  simplelightbox
------  smartWizard
------  swiperjs-7.3.1
------  tagsinput
------  typeheadjs
--  .html all other pages
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:
      Our main css will be converted/compiled in scss folder but if you wanted to add any other custom CSS, developer css etc. you can use this folder to keep it separate from all template codes.
    • img:
      Images required to add are to be kept in img folder whether its jpg or png. We have kept other 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 kept inside this folder with the variables color codes files.We have kept all variable as simpler as it can be to understand by any of developers and designer. We thought to target each customer and kept in mind a different level of knowledge. If you wanted to change any of the style colors you can edit theme-yellow, theme-red, theme-purple and create your own by changing variables color codes in _variable.scss for dark mode _darkmode.scss.
    • vendor:
      All the third parties are available 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.


#

Colors scheme

Change the theme based on your branding

Your brand color and branding is your identity. Sometime being off-bit and clean also a good choice.

We have different set of predefined style with relative backgrounds and you can pick one of it by changing just class name like theme-yellow, theme-red, theme-purple and create your own by changing variables color codes in _variable.scss for dark mode _darkmode.scss.

We have 10 predefined color schemes as below:

All comes with dark mode.

Here all the preview of personalization page you can just pick style and check preview of pages, elements and components.




Wanted to change colors in themes style:
.theme-blue {
    /* color schemes */
    --AdminUX-theme: #015EC2;
    --AdminUX-theme-rgb: 1, 94, 194;
    --AdminUX-theme-darken: #003f83;
                
    /* gradient bg colors */
    --AdminUX-theme-grad-1: #00c5dd;
    --AdminUX-theme-grad-2: #2253c3;
    --AdminUX-theme-grad-3: #dce4f7;
                
    /* gradient text colors */
    --AdminUX-theme-text-grad-1: #dd0093;
    --AdminUX-theme-text-grad-2: #3f22c3;
}

All other background and text color remain in :root{ } for light mode in _variable.scss or darkmode root color will be in _darkmode.scss under .darkmode{}. Those will be default as standard so we are not recommend to fully modify all it may reflect global level. If you do so, please review all the components carefully. You can default add dark mode by adding class dark-mode on <html> tag


Notes:

When you are applying only one theme-class and wanted to run or apply that only, No other themes or theme class applied dynamically on <body> tag, Remove <script src="assets/js/color-scheme.js"></script> as that will no longer required as it manages cookie class for HTML template previews. For the development theme-styleName can be applied dynamically on <body> tag as user choice based development.


#

Scripts Files & Codes

All the programmatic things needs to be coded.

Templates, Frameworks and Third Parties are main division for our script part.

We have main folder assets and inside all the other files organized by its type to maintain HTML pages separate from other files. At the first look all other folders are inside assets folder like css, js, vendors etc. Nested structure are as below and here we have described each folder with its purpose and use.


Default set of scripts:

All the framework, jquery and dependent scripts should be link first like as we have shown in below code. To fresh start you can use blank.html page also. Here we have added jquery, bootstrap and popper js which is required by bootstrap framework.

<!-- 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/dist/js/bootstrap.bundle.js"></script>
Templates scripts:

Templates structure, elements, menu and view sizes are required at global level which will be needed for all pages and contents. We have grouped these type of scripts as template scripts. Here main js is templates specific while other colors-scheme js is. For the development theme-styleName can be applied dynamically on <body> tag as user choice based development.

<!-- Customized jquery file  -->
<script src="assets/js/main.js"></script>
<script src="assets/js/color-scheme.js"></script>
Third parties scripts:

We have added third party's scripts with comment line you can add as many as per your requirement. Whichever is not required, you can remove it. Just check if any of page level script code or file doesn't have any dependencies. You you remove script files related function from page level code should be removed. Also we have used most of the third parties with MIT licenses but we also recommend to check license and usage from particular third party websites and refer related documents to update function's options. 

<!-- date range picker -->
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
                
<!-- chosen script -->
<script src="assets/vendor/chosen_v1.8.7/chosen.jquery.min.js"></script>
                
<!-- Chart js script -->
<script src="assets/vendor/chart-js-3.3.1/chart.min.js"></script>
                
<!-- Progress circle js script -->
<script src="assets/vendor/progressbar-js/progressbar.min.js"></script>
                
<!-- swiper js script -->
<script src="assets/vendor/swiper-7.3.1/swiper-bundle.min.js"></script>
Page level & on-page set of scripts:

Page level components specific or any third party functions are all placed in page level section. If its small script its placed directly in page else it will be in js file separately created to arrange code well.

<!-- page level script here -->
<script src="assets/js/header-title.js"></script>
<script src="assets/js/project-projects.js"></script>

You can edit and update page level js and codes as per your requirement and options provided by third parties in case of any third party used.


#

Page HTML Structure

It's very important part to understand page level structure while UI integration in further development.

In generically we have header footer, footer company, main content and side menu as main division of page structure.

Additionally we have modal boxes and chat window, chat list, notification list as out side of main content in parallel of sidebar structure to give access it globally from header. The html, head tag and body tags structure remain as main page layout. Inside body there are multiple section divided for header, footer, sidebar, chat list, notification list, chat boxes etc. those can be separate views. Main tag is routing content part.

<!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="">
    <meta name="author" content="">
    <meta name="generator" content="">
    <title>HealthOnUs - Admin, Dashboard, Web Application HTML template, UI kit, UI templates</title>
                
    <!-- manifest meta -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="manifest" href="manifest.json" />
                
    <!-- 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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
                
    <!-- bootstrap icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
                
    <!-- chosen css -->
    <link rel="stylesheet" href="assets/vendor/chosen_v1.8.7/chosen.min.css">
                
    <!-- date range picker -->
    <link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">
                
    <!-- swiper carousel css -->
    <link rel="stylesheet" href="assets/vendor/swiper-7.3.1/swiper-bundle.min.css">
                
    <!-- style css for this template -->
    <link href="assets/scss/style.css" rel="stylesheet">
</head>
                
<body class="d-flex flex-column h-100">
                
    <!-- page loader -->
        <div class="container-fluid h-100 position-fixed loader-wrap bg-blur">
            <div class="row justify-content-center h-100">
                <div class="col-auto align-self-center text-center">
                    <div class="doors animated mb-4">
                        <div class="left-door"></div>
                        <div class="right-door"></div>
                    </div>
                    <h5 class="mb-0">Thanks for the patience</h5>
                    <p class="text-secondary small">Amazing things coming from the <span class="text-dark">AdminUX</span></p>
                    <div class="spinner-border text-primary mt-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    <!-- page loader ends -->
                
    <!-- Header -->
    <header class="header">
        <!-- Fixed navbar -->
        <nav class="navbar fixed-top">
            <div class="container-fluid">
                <div class="sidebar-width">
                    <button class="btn btn-link btn-square menu-btn" type="button">
                        <i class="bi bi-list fs-4"></i>
                    </button>
                    <a class="navbar-brand ms-2" href="index.html">
                        <div class="row">
                            <div class="col-auto"><img src="assets/img/favicon48.png" class="mx-100" alt="" /></div>
                            <div class="col ps-0 align-self-center d-none d-sm-block">
                                <h5 class="fw-normal text-dark mb-0">AdminUX</h5>
                                <p class="small text-secondary">Admin App UI</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </nav>
    </header>
    <!-- Header ends -->
                
    <!-- Sidebar -->
    <div class="sidebar-wrap sidebar-pushcontent">
        <!-- sidebar-pushcontent, sidebar-overlay, sidebar-fullscreen  are classes to switch UI here-->
        <div class="sidebar">
            <div class="container">
             Sidebar
            </div>
        </div>
    </div>
    <!-- Sidebar ends -->
                
    <!-- Begin page content -->
    <main class="main mainheight">
        <div class="container-fluid mb-4">
            <div class="row align-items-center page-title">
                <div class="col-12 col-md mb-2 mb-sm-0">
                    <h5 class="mb-0">Blank page</h5>
                    <p class="text-secondary">Quick start new HTML page</p>
                </div>
            </div>
            <div class="row">
                <nav aria-label="breadcrumb" class="breadcrumb-theme">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">AdminUX</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                    </ol>
                </nav>
            </div>
        </div>
                
        <div class="container">
            <h1>Blank page</h1>
            <p class="lead">Start from here</p>
            <p>Is always be great. Add custom page level js at bottom. Here header-title.js added to all dashboard pages where page header and titles added</p>
        </div>
                
        <!-- Footer -->
        <div class="container-fluid footer-page mt-4 py-5">
            Footer     
        </div>
    </main>
                
    <!-- footer -->
    <footer class="footer mt-auto">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-md col-lg py-2">
                    <span class="text-secondary small">Copyright @2022, Creatively designed by <a href="https://HealthOnUs.com" target="_blank">HealthOnUs</a> on Earth ❤️</span>
                </div>
                <div class="col-12 col-md-auto col-lg-auto align-self-center">
                    <ul class="nav small">
                        <li class="nav-item"><a class="nav-link" href="">Help</a></li>
                        <li class="nav-item">|</li>
                        <li class="nav-item"><a class="nav-link" href="">Terms of Use</a></li>
                        <li class="nav-item">|</li>
                        <li class="nav-item"><a class="nav-link" href="">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer ends -->
                
    <!-- Rightbar -->
    <div class="rightbar-wrap">
        <div class="rightbar">
                    
        <!-- chat window -->
        <div class="chatwindow d-none" id="chatwindow">               
        </div>
        <!-- chat window ends -->
                    
        <!-- notifications window -->
        <div class="notificationwindow d-none h-100 overflow-y-auto" id="notificationwindow">
        </div>
        <!-- notifications window ends -->
                    
        </div>
    </div>
     <!-- Rightbar ends -->
                
    <!-- dropdown for support  -->
    <div class="chatboxes w-auto align-right bottom-0 mb-2">
                
        <!-- dropdown for support  -->
        <div class="dropup">
            <div class="dd-arrow-none dropdown-toggle" data-bs-display="static" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="supportdd" role="button">
                <span class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle">
                    <span class="visually-hidden">New alerts</span>
                </span>
                <figure class="avatar avatar-40 coverimg rounded-circle shadow bg-primary">
                    <img src="assets/img/favicon72.png" alt="">
                </figure>
            </div>
            <div class="dropdown-menu dropdown-menu-end w-300 p-0">
                <!-- chat box here  -->                                                    
            </div>
            <button class="chat-close btn btn-danger text-white"><i class="bi bi-x"></i></button>
        </div>
    </div>
    <!-- chat window 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/dist/js/bootstrap.bundle.js"></script>
                
    <!-- Customized jquery file  -->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/color-scheme.js"></script>
                
    <!-- PWA app service registration and works -->
    <script src="assets/js/pwa-services.js"></script>
                
    <!-- date range picker -->
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
                
    <!-- chosen script -->
    <script src="assets/vendor/chosen_v1.8.7/chosen.jquery.min.js"></script>
                
    <!-- Chart js script -->
    <script src="assets/vendor/chart-js-3.3.1/chart.min.js"></script>
                
    <!-- Progress circle js script -->
    <script src="assets/vendor/progressbar-js/progressbar.min.js"></script>
                
    <!-- swiper js script -->
    <script src="assets/vendor/swiper-7.3.1/swiper-bundle.min.js"></script>
                
    <!-- page level script here -->
    <script src="assets/js/header-title.js"></script>
                
</body>
                
</html>

In page structure where... the pages codes are switched is inside the element main <!-- Begin page content --> and the next line is <main class="main mainheight">. You can create routing inside main tag elements for dynamic age namings and configure page level details.


#

Icons recommendations

As technologies grows icons become more space saving visual labeling

Templates preview and pages uses Bootstrap icons v1.8.1.

We all know icons becomes more space saving and visual indication for the many of device centric design. User day by day becomes more and more self learner. So icons we use should be more realistic to the topics we are representing. If you use more relevant icon, use will understand it just by visuals no need to read its label. Here for wide range of audience we recommend to icons and label also. You can use of refer any of the library for web fonts and add it in place of bootstrap icons. Read all icons label/cheetsheet for available icons at Bootstrap icons. 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

Icons usage, Below code will represent icon as : :

<i class"bi bi-house-door"><i>


Notes:

We recommend not to use multiple web fonts as it also increase load time and may impact on Performance. For few unique icons you can create svg and add into project but do not use multiple types font icons library.


#

Thank You

We loved to see you here!

HealthOnUs UI UX HTML templates will grow with your support

If you have any query or questions regarding this template or need help, you can always reach us at info@HealthOnUs.com. We will try our best to solve your problem and support you. You connect with us on our social media accounts to stay tuned with us.

We thank for all images used to Pixabay.com. Movie, Brand Logo, Currency Logo or Products images are just for demo purpose nothing will be booked or purchase from this website, application, dashboard demo.