This tutorial is now available from: https://pinegrow.com/tutorials/how-to-use-material-design-for-bootstrap-mdb-ui-kit-with-pinegrow/
Have questions or comments about this tutorial? Let’s talk about it!
7 Likes
Thank you very very much for MDB!!! It’s magic!!!
Glad you find this tutorial useful! 
Thanks for the nice tutorial!
Only wish they made separate CSS for every module. If you only use one block it cost you 271kb!
With the Pro version it’s even more with JavaScript etc.
I suppose there is no way to get the individual CSS an JavaScript for individual blocks?
Then I prefer the way @BenHanna has made the blocks, with individual CSS blocks that you can copy to your main CSS!
Regards,
David
@AllMediaLab It is possible to customize the mdb-free.scss and remove the parts you don’t want / need.
I haven’t looked at the details, but I guess it is also possible to tweak the JS file.
1 Like
Hi Emmanuel,
Thanks for pointing that out!
Would the compiling be easy in Pinegrow? I see some core SCSS stuff that I’m not sure on how to use that! Is this all needed? That’s still a lot! 133kb before compiling.
// CORE
@import “core/mixins”;
// Your custom variables
@import “custom-variables”;
@import “core/colors”;
@import “core/variables”;
@import “core/global”;
@import “core/helpers”;
@import “core/typography”;
@import “core/masks”;
@import “core/waves”;
Regards,
David
Pinegrow will compile the SASS file and will generate the CSS.
Yes I understand, but the core is so huge that you don’t gain any bandwidth by compiling only the blocks you want. Most blocks are between 2 kB and 4 kB with one exception the forms 16kB.
That’s what I don’t like about these kind of frameworks! The way @BenHanna made the extensions is that you have the individual CSS for each block, that’s much better.
If the MDB was not so bloated I would purchase the Pro version, but considering € 200,- for a framework that is based on a Bootstrap version that has come to it’s end!? 
@AllMediaLab, Thats why what I referenced above remains an important part of workflows, given the abilities present. Time will tell, it doesnt seem to be something they wish to discuss or comment on much.
I think the developers of Pinegrow are open for any discussion! Have a lot of wishes too, but not everything can be done when we want it.
The point is @matjaz himself has now discribed they are working on something(?) as referenced above in his own words. But yes I understand not all things are applicable in app as you know (hopefully that service solution works for you however).
Thanks a bunch @Emmanuel for this excellent tutorial.
I’m a little stuck mid-way. So, once I finish organising my mdb template (named it mdb_pg_template), how do I use it in new/existing projects?
-
To use the above template in a new project, is there a way to do this in PG (or) the only way is to duplicate the mdb template folder in my mac finder & open the replicated folder in PG as new project?
-
To add the above template to an existing project, is it done by clicking on the activate button in the below screenshot? When I did, no resources got added to my index.html page. Would be great if you can extend your tutorial to set the resources for the mdb template project choosing the necessary resources - is it just one css & one js file (or) should it include the sass file as well?
I followed the tutorial, and it works great. Now, I want to upgrade to a newer version of MDB. How best to do the update? Can anyone help with this?
Which version do you want to use? Updating to use MDB 5 means you might run into difficulties as it is a newer version of Bootstrap than PG currently supports.
I currently have 4.18. I want to upgrade to 4.19, and I wish to keep the same folder structure as done in the Pinegrow tutorial. Thank you for responding.
The easiest, if you want everything the same (using SCSS) with the new version, would probably be to just follow the tutorial again, but with the newer version downloaded.