Introduction

MedicApp is a Medical & Hospital HTML admin template, which is based on the jQuery and Bootstrap 5+.

It is really appropriate template for Doctors, Dentists, Hospitals, Health clinics, Surgeons and medical organization. It is purpose oriented design, responsive layout with special features such as wonderful clinic dashboards, appointment manager and appointment forms, doctors list and doctor profile, departments management, patients list and patient profile, payments manager and many more. But this template can be used for all type of web applications like custom admin panel, project management system, admin dashboard, application backend, CMS or CRM.

Technologies
  • Bootstrap 5+
  • Sass
  • CSS3 animations
  • Npm
  • Gulp
  • Google fonts
Core features
  • Light/dark navbar colors
  • Vertical/horizontal navbar
  • 5 different layouts
  • Data tables
  • Fully Responsive layout
  • Light/dark sidebar
  • Light/dark topbar
  • Easy to customize
  • And many more…
Medicine features
  • Clinic dashboards
  • Appointments management
  • Add/edit appointment
  • Doctors management
  • Add/edit doctor
  • Doctor profile
  • Departments management
  • Patients management
  • Add/edit patient
  • Payments management
  • Add/edit payment
  • Authorization process
  • Invoices management
  • Events timeline

Getting started

MedicApp uses Gulp for its CSS and HTML build system, it's optional, you can use this theme without Gulp tools, we included all the dependencies in this project.

First way:

Use html files from /dist or /dist-horizontal and css files from /assets/css, but this files generated automatically by Gulp.

Second way(recommended):

Use html files from /dev/html and scss files from /dev/sass

  1. Install Node.js and npm, which we use to manage our dependencies.
  2. Run npm install to install dependencies
  3. Run npm run dev start watching changes in scss/html files
  4. Open index.html or any other .html file in /dist or /dist-horizontal to see the result.
Note: any commands we tell you to run must be ran from the project's root folder.

First you must have Node.js and npm installed in your computer.


Customization

SCSS variables:

MedicApp uses main and accent color palettes, you can generate own palette on this service. File with palette variable and other .scss variables you can find /dev/sass/_variables.scss.

Styles for UI components (button, input, badge, icon...) located /dev/sass/components.

Styles for layout (navbar, menu, logo...) located /dev/sass/layout.

Styles for pages (Sign in, Sign up...) located /dev/sass/pages.

Typography styles located /dev/sass/_typography.scss.

Addition styles located /dev/sass/_helpers.scss.

Layout:

You can use Vertical or Horizontal, Fullwidth or Boxed and Public (Sign in, Sign up, Page 404...) layouts.

Add class .vertical-layout to body if you need Vertical layout or add class .horizontal-layout if you need Horizontal layout.

Add class .boxed to body if you need Boxed layout, in default, layout will be Fullwidth.

Navbar style:

Every navbar (topnavbar or leftnavbar) can be light or dark, in default it's light if add class .dark, it will be dark.


Components

MedicApp uses Bootstrap and its components.