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!
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 StarterNPM - 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.