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 want to use. Eg Calendar plugin: 


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

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 2.0

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


        import * as mdb from 'mdb-ui-kit'; // 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, 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 in the same way as CSS files.

Webpack integration

You can significantly speed up the process of creating a new project based on Webpack using our 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


        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 in the same way as CSS files.