Custom MDB UI Kit

// scss-docs-start theme-color-variables
$primary: #1b1b1b !default;
$secondary: #fbbf24 !default;
$success: #14a44d !default;
$danger: #b3261e !default;
$warning: #e4a11b !default;
$info: #54b4d3 !default;
$light: #fbfbfb !default;
$dark: #332d2d !default;
// scss-docs-end theme-color-variables

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$danger: $red !default;
$warning: $yellow !default;
$info: $cyan !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;

$gray-50: #fbfbfb;
$gray-900: #332d2d;

$theme-colors: (
    'primary': #1b1b1b,
    'secondary': #fbbf24,
    'success': #14a44d,
    'info': #54b4d3,
    'warning': #e4a11b,
    'danger': #b3261e,
    'light': $gray-50,
    'dark': $gray-900,
) !default;

Items to make sure to change

a:not(
        .sidenav-link,
        .btn,
        .dropdown-item,
        .nav-link,
        .navbar-brand,
        .page-link,
        .carousel-control-prev,
        .carousel-control-next
    ) {
    color: lighten($primary, 20%);

    &:hover {
        color: lighten($primary, 15%);
    }
}

Variable Files to Check

From-Node_Modules\mdb-ui-kit\src\mdb\scss\bootstrap\_variables-dark.scss

From-Node_Modules\mdb-ui-kit\src\mdb\scss\bootstrap\_variables.scss

From-Node_Modules\mdb-ui-kit\src\plugins\table-editor\scss\_variables.scss

npm uninstall --save-dev
npm install -S
npm audit fix
npm install --save-dev
npm i -D @babel/core

README.md

src\scss\index.scss

From-Node_Modules\mdb-ui-kit\src\mdb\scss\mdb.dark.scss

From-Node_Modules\mdb-ui-kit\src\mdb\scss\mdb.dark.free.scss

src\scss\nerden\custom.scss

src\scss\nerden\_variables.scss

src\scss\nerden\_color.scss

From-Node_Modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix\_variables.scss

Installation

npm install

Pro Essential installation

npm install git+https://oauth2:3xQjwuioRAr6F7dAPok_@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential

Pro Advanced installation

npm install git+https://oauth2:3xQjwuioRAr6F7dAPok_@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced#6.4.2

Dev Server

npm start

Build

npm run build

Features

Bundling via webpack
ES6+ Support via babel
SASS Support via sass-loader
Linting via eslint-loader
Unit Testing via jest
Code Formatting via prettier

Files structure

.
├── src
│   ├── img/
│   ├── js/
│   ├── scss/
│   ├── mdb/
│   └── index.html
├── webpack
│   ├── webpack.common.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── mdb/
│       ├── webpack.common.mdb.js
│       ├── webpack.config.mdb.dev.js
│       └── webpack.config.mdb.prod.js
└── dist/

MDB UI KIT

Importing JS modules

You can import the entire library or just individual modules:

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
import { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name

Importing CSS file

To import MDB stylesheet please use the following syntax:

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

CUSTOM VERSION OF MDB UI KIT

It is possible to prepare a custom version of MDB UI KIT. It can be useful when the project uses only several modules of our library and you want to reduce the size of the compiled files. To achieve this, follow the steps:

npm install

Pro-Essential installation

npm install git+https://oauth2:3xQjwuioRAr6F7dAPok_@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential

Pro-Advanced installation

npm install git+https://oauth2:3xQjwuioRAr6F7dAPok_@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced#6.4.2

npm run getMDBsrc

Importing JS components

Copy the content from mdb/js/mdb.free.js or mdb/js/mdb.pro.js to src/js/index.js file. Pick only the components you need and update path to the mdb dir. Here’s an example:

import Carousel from '../../mdb/js/free/carousel';

export { Carousel };

Pro Advanced paths

For the Pro Advanced package the /mdb folder will contain two sub-folders: /mdb and /plugins, so for our needs the paths to the scss and js files will have to contain duplicated mdb/ text. Here’s an example for a carousel component:
import Carousel from '../../mdb/mdb/js/free/carousel';

Some components may require additional dependencies to be installed. Webpack should report this after starting a devServer.

Importing SCSS files

Same as with js files, copy the content from mdb/scss/mdb.free.scss or mdb/scss/mdb.pro.scss to src/scss/index.scss. Remove the lines with the import of modules that you will not use and update the paths to point the mdb dir.

Keep in mind that many scss files are related to each other. For example, a modal will need files for buttons, ripple, modal, close and transitions to work properly. We recommend that you only delete the files described by comments BOOTSTRAP COMPONENTS and MDB COMPONENTS.

Example path for carousel file:

@import '../../mdb/scss/free/carousel';

Pro Advanced path

@import '../../mdb/mdb/scss/free/carousel';

Configuration

Webpack config for MDB development is located in /webpack/mdb/ directory and index.html file is placed in /src/mdb/ directory.

Dev-Server

npm run startMDB

Run Build

npm run buildMDB

CUSTOM THEME

Webpack Starter allows pro users to prepare a personalized theme for all UI KIT components.

Install

npm install

Pro Essential installation 2

npm install git+https://oauth2:3xQjwuioRAr6F7dAPok_@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential

Pro-Advanced installation 2

npm install git+https://oauth2:3xQjwuioRAr6F7dAPok_@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced#6.4.2

SCSS config

Creating a new theme requires that you define primary and secondary colors for your application. We prepared functions and mixins that will help you to create a ready to use theme using these colors. Here’s an example code:

@import '~mdb-ui-kit/src/scss/mdb.pro.scss';

$my-theme-primary: #1b1b1b; // theme primary color, change this value to customize theme
$my-theme-secondary: #ffc72c; // theme secondary color, change this value to customize theme

$my-theme: mdb-light-theme(
    $my-theme-primary,
    $my-theme-secondary
); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);