MDB 5 Pro plugins installation guide

Manual installation (zip package)

Step 1

Download the package from orders.

Step 2

Unzip the downloaded package and open it in the code editor. You will find 5 folders there:

  • css - containing minified MDB 5 styles.
  • img - containing a picture (favicon).
  • js - containing minified MDB 5 code.
  • plugins - containing minified plugin styles and code.
  • src - containing MDB 5 and plugins source code.

Also, you will find the index.html file with imported MDB 5 and all plugins.

In the plugins folder, you will find the files all.min.js and all.min.css. These files contain the code and styles of all plugins.

Step 3

If you decide to use only a few plugins, we suggest to import only these plugins. To do this you need to make the following changes in the index.html file:

Delete imported plugins css and js files: 

        
            
            <link rel="stylesheet" href="plugins/css/all.min.css" />
            <script type="text/javascript" src="plugins/js/all.min.js"></script>

Add the css and js files imports of the plugin you wish to incorporate, with the Calendar plugin serving as an example. 

        
            
            <link rel="stylesheet" href="plugins/css/calendar.min.css" />
            <script type="text/javascript" src="plugins/js/calendar.min.js"></script>

You can find information about any plugin in the dedicated API section of the documentation for that specific plugin.

Step 4

Explore our documentation (plugins section in the menu on the left). Choose plugin you like, copy it to your project and compose your website. And yes, it's that simple!

MDB 5 - Bootstrap 5 & Material Design NPM Installation

NPM - new project

Prerequisites

Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.

Installation

Note: For this instruction, we will use the Calendar plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.

To install the MDB UI KIT in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation. 

        
            
        npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

Then install the plugins you want to use: 

        
            
        npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/plugins/prd/calendar

Importing JS modules

The Calendar plugin is provided as an example here. You can find information and file names for any plugin in the API section of the documentation dedicated to that particular plugin. 

        
            
        import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js'; // lib
        import Calendar from 'mdb-calendar'; // plugin
        window.mdb = mdb // add lib as a global object
        window.Calendar = Calendar // add plugin as a global object

Importing CSS files

To import MDB stylesheet please use the following syntax: 

        
            
        @import '~mdb-ui-kit/css/mdb.min.css'; // lib
        @import '~mdb-calendar/css/calendar.min.css'; // plugin

Importing SCSS modules

You can also import individual SCSS modules. To do it properly, wec recommend to copy them from the node_modules/mdb-ui-kit/src/scss and node_modules/mdb-calendar/src/scss location directly to your project and import it the same way as CSS files.

Webpack integration

You can significantly speed up the process of creating a new project using our Webpack Starter.

MDB Webpack Starter

NPM - existing project

Prerequisites

Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.

Installation

Note: For this instruction, we will use the Calendar plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.

To install plugin in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation. 

        
            
        npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/plugins/prd/calendar

Importing JS modules

The Calendar plugin is provided as an example here. You can find information and file names for any plugin in the API section of the documentation dedicated to that particular plugin. 

        
            
        import Calendar from 'mdb-calendar';

Importing CSS file

To import the plugin stylesheet please use the following syntax: 

        
            
        @import '~mdb-calendar/css/calendar.min.css';

Importing SCSS modules

You can also import individual SCSS modules. To do it properly, we recommend to copy them from the node_modules/mdb-ui-kit/src/scss and node_modules/mdb-calendar/src/scss location directly to your project and import it the same way as CSS files.