Built with Material Design for Bootstrap 5 (💗 by its creators) and Font Awesome 6 Pro.
Brand-new designs for Coursework, Publication, and Academic Service sections, plus a photo slider page.
 |
|---|
| Coursework Section |
 |
|---|
| Publication Section |
 |
|---|
| Service Section |
This template underwent thorough tree shaking and achieved an impressive speed score, even with the inclusion of a large-sized WebP file.
 |
|---|
| Google Lighthouse Screenshot |
If no customization is required, just download index.html and main.js from the distribution folder, then modify the content in index.html. Ensure both files are placed in the same folder. Webpack is only necessary for additional customization. For the photo slider, download photos.html and photos.js.
Please follow the color scheme for MDBootstrap when changing or adding colors.
npm install
A free version of MDB UI Kit and a paid version of Font Awesome are already included as a dependencies, in package.json. Upgrade to paid or downgrade to free as you like.
npm run start
npm run build
- Bundling via Webpack 5.74.0
- ES6+ Support via babel-cli v7.18.10
- SASS Support via sass-loader v13.0.2
- Linting via eslint-webpack-plugin v3.2.0
- Unit Testing via jest v29.0.1
- Code Formatting via prettier v2.7.1
mdbootstrap-academic/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ └── scss/
├── webpack.config.js
└── package.json
In this project, I imported Collapse, Tooltip, Ripple, Carousel. You can
remove Tooltip and
Carousel if you are not using these UI components.
You can import the entire library (not recommended):
import * as mdb from 'mdb-ui-kit'; // lib
or just individual modules:
import { Input } from 'mdb-ui-kit'; // module
import { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name
You can modify my imports in main.scss, as recommended by MDB's guide.
Alternatively, you can import the entire MDB stylesheet:
@import '~mdb-ui-kit/css/mdb.min.css';