https://github.com/mdbootstrap/mdb-starter-vite

https://github.com/mdbootstrap/mdb-starter-vite

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/mdbootstrap/mdb-starter-vite
• Owner: mdbootstrap
• Created: 2022-09-12T14:23:03.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-04T11:19:12.000Z (10 months ago)
• Last Synced: 2024-07-14T09:03:25.932Z (2 months ago)
• Language: HTML
• Size: 9.77 KB
• Stars: 5
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• jimsghstars - mdbootstrap/mdb-starter-vite - (HTML)

README

        
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png)

# MDB 5 Vite Starter

### Vite boilerplate for Bootstrap 5 & Material Design 2.0 UI Kit

**[>> Support MDB 5 with a STAR](https://github.com/mdbootstrap/mdb-ui-kit/)**

**[>> MDB 5 Demo](https://mdbootstrap.com/docs/standard/#demo)**

 







___

> :warning: The use of this Starter is at your own risk and assumes basic knowledge of Vite, 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 [Vite](https://github.com/vitejs/vite) v3.1.0

* ES6+ Support via [babel-cli](https://github.com/babel/babel) v7.18.10

* SASS Support via [sass](https://github.com/sass/dart-sass) v1.54.8

* Linting via [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) v3.2.0

* Unit Testing via [jest](https://github.com/facebook/jest) v29.0.1

* Code Formatting via [prettier](https://github.com/prettier/prettier) v2.7.1

### Files structure:

```

my-project/

├── src/

│   ├── js/

│   ├── scss/

│   └── index.html

└── vite.config.js

```





___

# 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'; // 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';

```