Documentation

Introduction

Miri UI Kit is a responsive HTML template kit that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Miri UI Kit and provide a consistent look throughout the template.

Before you start working with the ui kit, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme please contact us via Bootstrapdash support form.

Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:

Note: The root folder denoted further in this documentation refers to the 'src' folder inside the downloaded folder


Customization

You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have node and npm installed in your computer.

Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed.

If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).

This will install the dev dependencies in the local node_modules folder in your root directory.

Then you will need to install Gulp. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.

This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

Components


Basic UI Elements

Basic Buttons
Pill
Outlined
Outlined with solid white bg
Sizes
Bootstrap Tabs
Rouned pills
With ion and text
Vertical Tabs

Just add the class flex-column to the nav pills for vetical tabs. Use column grids to arrage tab pills and tab panes horizontally.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium accusamus incidunt suscipit! In eum possimus excepturi odio tenetur eos debitis ullam culpa deserunt natus error ipsum, libero numquam animi laudantium?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi, excepturi. A ratione mollitia tenetur? Alias qui quisquam nam aliquid officiis at, pariatur veniam asperiores dignissimos, adipisci saepe a enim eligendi.
Bootstrap Pagination
Bootstrap Badges
Danger Info Primary Success Warning Labels
Pill Badges
Danger Info Primary Success Warning Labels
Bootstrap Progressbar
Rounded Progressbar
Bootstrap Alerrts

Media

Images
demo
Image
demo
Circle
demo
Raised
demo
Circle Raised
Usage

Add jQuery, popper.js and bootstrap.js script files in <body>.

To create a carousel, add the following code:


Forms

Square Inputs
Pilled Inputs
Check boxes
Radio
Range
Toggle Buttons

Icons

Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.

Usage

To use Material Design Icons in your application, include the following files in <head>.

To generate an icon, add the following code:

Navigation

Credits

We have used the following plugins in Purple admin