Skip to content

mdbootstrap/mdb-starter-parcel

Repository files navigation

MDB Logo

MDB 5 Parcel Starter

Parcel boilerplate for Bootstrap 5 & Material Design 2.0 UI Kit

>> Support MDB 5 with a STAR

>> MDB 5 Demo

Downloads License YouTube Video Views


⚠️ 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:

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. The default import method is ES module import. his type of import requires using the initMDB method for all components that rely on the auto initiation used on the page.

import { Ripple, initMDB } from 'mdb-ui-kit/js/mdb.es.min.js'; // Import needed modules
window.Ripple = Ripple;
initMDB({ Ripple }) // Initialize imported modules to enable data-attribute init

Alternatively, you can import using UMD format. MDB in UMD format will work without adding more elements, but will lack treeshaking.

import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js'; // lib
import { Input } from 'mdb-ui-kit/js/mdb.umd.min.js'; // module
import { Input as CustomInput } from 'mdb-ui-kit/js/mdb.umd.min.js'; // 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';



About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published