MDB 5 Parcel Starter
Parcel boilerplate for Bootstrap 5 & Material Design 2.0 UI Kit
⚠️ The use of this Starter is at your own risk and assumes basic knowledge of Parcel, JavaScript and CSS preprocessors. We recommend creating custom versions of MDB UI KIT and themes only for advanced developers.
Installation
npm install
A free version of MDB UI Kit is already included as a dependency, to upgrade it to PRO version install the package you own with the command below.
Pro Essential installation
npm install git+https://oauth2:[email protected]/mdb/standard/mdb-ui-kit-pro-essential
Pro Advanced installation
npm install git+https://oauth2:[email protected]/mdb/standard/mdb-ui-kit-pro-advanced
Dev Server
npm run start
Build
npm run build
Features:
- Bundling via Parcel v2.7.0
- SASS Support via @parcel/transformer-sass v2.7.0
- Linting via @parcel/validator-eslint v2.7.0
- Unit Testing via jest v29.0.1
- Code Formatting via prettier v2.7.1
Files structure:
my-project/
└── src/
│
├── js/
│ └── main.js
├── scss/
│ └── styles.scss
│
├── .parcelrc
│
└── index.html
MDB UI KIT - Importing of MDB files
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/src/mdb/js/free/input'; // module
import { Input as CustomInput } from 'mdb-ui-kit/src/mdb/js/free/input'; // module with custom name
Importing CSS file
To import MDB stylesheet please use the following syntax:
@import '../../node_modules/mdb-ui-kit/css/mdb.min.css';