Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: How to customize your MDB package

demzl25 priority asked 6 years ago


Hi, would like to know

  1. How to use and compile sass in MDB project
  2. How to compile js modules
  3. How to customize your MDB package and create your own package only with the components you really need

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 have

Bartł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!


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

demzl25 priority commented 6 years ago

Thanks that is very helpful!


Please insert min. 20 characters.

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