Medjestic HTML Template

1. Introduction

Thank you for purchasing Medjestic, a bootstrap 4 Medical Dashboard template that is built with everyone in mind. Package Include 45+ html5 pages that can help you customize how your Medical Dashboard will look, and you can adjust its design based on your needs. It has a clean, unique, and out of the box design that will make you want to work on your dashboard. With over a 1000 elements and components, not even the sky is the limit with Medjestic. With user-friendly features developed to allow admins to easily achieve the design they are looking for, with no previous experience required and all located in an easy-to-find menu.

2. Getting Started

2.1. File Structured

When you recieve your copy of Medjestic, you will Notice the following file stucture:

• app
  • assets
  • pages
  • partials
  • vendors
  • index.html
• docs

2.2 Managing Your Assets

Some pages have specific scripts and stylesheets. You can find the scripts for each page in either the head or right above the closing body tags

We decided not to bundle all plugins into 1 big script because this provides some overhead of uneccessary script being loaded into a page, and defeats Medjestic's purpose to be as lightweight as possible.

If a page has a page specific script attached to it, you can find the scripts in the app/assets/js folder, and each page will have a script similar to its name. For example datatables.html will have datatables.js which holds the script for the dummy data.

3. Configuration

3.1 Side Bars

All the pages in the pages folder are labeled in a logical manner for you to be able to navigate as easy as possible, and find the element you need the fastest way possible.

The partials folder contains the required code for:

• Right sidebar
• Left sidebar
• Quick bar
• Header
• Settings

The vendors folder contains all the iconic fonts that we have provided within Medjestic

3.2 Classes

We bundled Medjestic with multiple options:

Adding Sidebars:

You can add infinite amount of sidebars toggled with different button clicks, all you have to do is give a button or a tags data-target="#{id of your sidebar}", data-toggle="slideRight" or data-toggle="slideLeft" and a class of .nav-toggler

Hiding the Right sidebar by default:

Remove class .ms-aside-left-open from body tag

Hiding the Quickbar by default:

Remove class .ms-has-quickbar from body tag

Changing to dark theme:

Remove class .ms-primary-theme and add class .ms-dark-theme to body tag

3.2 Keyboard Shortcuts

We added the following shortcuts for quick accessibility:

• Alt + 1 (Open quickbar tab one)
• Alt + 2 (Open quickbar tab two)
• Alt + 3 (Open quickbar tab three)
• Alt + 4 (Open quickbar tab four)
• Alt + 5 (Open quickbar tab five)
• Alt + 6 (Open quickbar tab six)
• Alt + Q (Enable Quick bar configure mode)
• ESC Close quickbar

4. Available States

States are accessible in multiple ways, we have background color states, font text color states, gradient background color states, button states, alert states, badge states, and card states

States are:

• primary
• secondary
• success
• danger
• warning
• info
• dark
• light

and they are accessible through

• Background color: bg-{state}
• Background gradient color: bg-gradient-{state}
• Font Text color: ms-text-{state}
• Badges: badge-{state}
• Alerts: alert-{state}
• Buttons: btn-{state}
• Button gradient: btn-gradient-{state}
• Cards: card-{state}
• Card Gradient: card-gradient-{state}

5. Components

5.1. Basic UI

All Basic UI Elements follow bootstrap 4.x standards

5.1. Advanced UI

Draggables

Making an element draggable is as easy as pie. All you have to do is add class .ms-draggable to draggable elements and .ms-sortable to the parent of thos elements to make them sortable

Modals

In the modal page, every modal can be found right after it's assigned button, find the modal page in app/pages/advanced-ui/modals.html

Tour

For the tour page, we are using driver.js, and the same script can be found in app/assets/js/tour.js

6. Changing Google Maps API

To change the Google Maps API that comes with Medjestic, navigate to app/pages/maps/google-maps.html and scroll to the very bottom. The first page specific script containts the API after KEY=, and get your API key from here

7. Resources & Credits

Feedback and Suggestion for our products

Your feedback and support are so important to us and allow us to keep developing awesome templates. If you like our work, please support us by rating it. If you’re about to rate it less than 5 stars, please let us know the reason first, and we will do our best to improve the template. Thanks so much!

Source & Credits

• Shutterctock
• Pexels
• Google Roboto Font
• Bootstrap Framework
• jQuery.js
• jQuery-ui.js
• jQuery-countdown.js
• jQuery Steps.js
• Datatables.js
• Driver.js
• Animate.css
• charts.js
• morris-chart.js
• moment.js
• perfect-scrollbar.js
• popper.js
• Slick.js
• Sweetalert.js
• toastr.js
• datamaps.js
• slick.js