Topic: How to customize your MDB package
demzl25 priority asked 6 years ago
Hi, would like to know
- How to use and compile sass in MDB project
- How to compile js modules
- How to customize your MDB package and create your own package only with the components you really need
Bartłomiej Malanowski staff answered 6 years ago
As you have noticed - our Gulp tutorial isn't ready yet, but I'll try to help you with the customization of your package. Please take a look at your Gulp package. In gulpfile.js you'll find the tasks that you need. Now let's say we don't want to use Material Select. Material Select is made by two files: scss and js. To remove it you need to make few steps:
1. Remove scss
1.1. Navigate to scss directory and open "mdb.scss" file. Locate and uncomment/remove the line that says: "@import "pro/material-select";"
1.2. In your console type
gulp css-compile
to turn the scss code to native CSS
1.3. Type gulp css-minify
to "refresh" your mdb.min.css file
2. Remove js
1.1. Go to js directory and open a file named "modules.js"
1.2. Locate './js/dist/material-select.js',
and remove it
1.3. Run gulp js-build
to build custom mdb.js file without Material Select
1.4. Minify the file using gulp js-minify
Bonus
Our gulp package includes one "bonus" task that you can use to compile your ES6 modules to JavaScript that will be understandable to your browser. For example, we'll change the offset of scrolling navbar
Please go to js/src/scrolling-navbar.js and change the constant "OFFSET_TOP" to any value you want. Then recompile your modules using npm run js-compile-plugins
. Now in the js/dist/scrolling-navbar.js, you should see that your component has changed. Now you can re-build your mdb.js file. Just reminding:
1. gulp js-build
2. gulp js-minify
I hope this helps
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Bartłomiej Malanowski staff commented 6 years ago
Do you have an access to our gulp package?demzl25 priority commented 6 years ago
Yes i haveBartłomiej Malanowski staff commented 6 years ago
Here you can find our gulp tutorial: https://mdbootstrap.com/bootstrap-gulp-tutorial/demzl25 priority commented 6 years ago
I have installed and everything is running but i need only a few things from mdb package. At the end of tutorial say "That's it! In the next lesson you will learn: How to use and compile sass in MDB, How to compile js modules, How to customize your MDB package and create your own package only with the components you really need" But this tutorial isn't ready and i really need this tutorial to start with my project!