Description
How-to use Material Design for Bootstrap (MDB) UI Kit with Pinegrow
Material Design for Bootstrap is a popular and highly customized version of Bootstrap 4 with 500+ material UI elements, 600+ material icons, 77+ CSS animations, 9+ useful plugins, SASS source files, templates, tutorials and many more. As you will discover in this tutorial, it is the perfect candidate to start a web project with Pinegrow.
Material Design for Bootstrap (MDB) is available for jQuery, Angular , React and Vue however, in this tutorial we will focus only on the jQuery version.
Material Design for Bootstrap is free for personal and commercial use and if you want to go any further, you can consider purchasing the PRO version which contain even more goodies, scripts and components.
The process we are going to detail is valid for both the FREE and PRO versions. It is up to you to choose the version that will best suit your projects and/or your budget.
Disclaimer
The following is a series of methods, tips and tricks to best organize your web project using MDB FREE and Pinegrow Web Editor.
Of course, if you are an advanced user, you may decide to do things differently.
Pinegrow has no affiliate relationship with MDBootstrap.com.
Getting the free version of the MDB framework
To download the free version of the MDB Framework, go to the MDB Website.
Select the DOWNLOAD ZIP button.
You can use the MDB framework as is, directly in Pinegrow, however, we recommend to proceed to a few changes so your project will be well organized. Showing how to do that is the main purpose of this tutorial.
By default, the MDB framework uses minified versions of the CSS files. Because we believe minification is one the very last step of the development phase, we will use the un-minified version of the CSS which we will associate to its SASS source file that Pinegrow will compile on the fly when we make changes.
Start Pinegrow.
From the Pinegrow dashboard view > Select Open Project.
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_002-scaled.jpg” /></a></figure><p>Navigate to the location where you extracted the previously downloaded archive. Click on the MDB folder and click <strong>Select</strong>.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_003-scaled.jpg” /></a></figure><p>From the <strong>Project tab</strong>, select (open) <strong>index.html</strong>.</p><figure class=)
 index.html” width=”2560″ height=”1600″ data-lazy-srcset=”/wp-content/uploads/mdb_tut_004-scaled.jpg 2560w, /wp-content/uploads/mdb_tut_004-645×403.jpg 645w, /wp-content/uploads/mdb_tut_004-845×528.jpg 845w, /wp-content/uploads/mdb_tut_004-768×480.jpg 768w, /wp-content/uploads/mdb_tut_004-1536×960.jpg 1536w, /wp-content/uploads/mdb_tut_004-2048×1280.jpg 2048w, /wp-content/uploads/mdb_tut_004-1440×900.jpg 1440w” data-lazy-sizes=”(max-width: 2560px) 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_004-scaled.jpg” /></figure><p>From the <strong>Style tab</strong>, click on the <strong>Stylesheets manager</strong> button.</p><p>The, select <strong>Add & Manage</strong>.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_005-scaled.jpg” /></a></figure><p>Find the line with <strong>mdb.min.css </strong>and click on <strong>Detach from index.html</strong>.</p><p>Then click on <strong>unload</strong>. The corresponding line will disappear.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_006-scaled.jpg” /></a></figure><p>Now, from the Add or load a stylesheet section, <strong>select open file</strong>.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_007-scaled.jpg” /></a></figure><p>Click on the file selector icon.</p><p>From the CSS folder, select <strong>mdb.css</strong> which is the un-minified version of the custom MDB stylesheet.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_008-scaled.jpg” /></a></figure><p>Then, click the blue <strong>Add</strong> button.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_009-scaled.jpg” /></figure><blockquote class=)
Read carefully and Say OK to the useful Tip provided by Pinegrow. This is an invitation to ATTACH the mdb.css to your index.html file.
Click on Attach to index.html.
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_010-scaled.jpg” /></a></figure><p>Now, it’s time to <strong>select the SASS source</strong> for this CSS so you have to select the <strong>Use SCSS/LESS file</strong> link.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_011-scaled.jpg” /></a></figure><p>Click on the File selector icon.</p><p>From the SCSS folder, select <strong>mdb-free.scss</strong> and click on <strong>Open</strong>.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_012-scaled.jpg” /></a></figure><p>Then, click on the <strong>Use</strong> button.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_013-scaled.jpg” /></a></figure><p>Immediately after, you will see the new content in the Stylesheets manager. All the include files associated to the main SASS file will be visible.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_014-scaled.jpg” /></a></figure><p>Click on <strong>Close</strong> .</p><p>Now, from the tree panel, uncollapse the <strong>head</strong> of the document.</p><p>Locate the <strong>css/mdb.css</strong> element, and <strong>move it BEFORE</strong> the css/style.css element.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_015-scaled.jpg” /></a></figure><p>Save your document.</p><p>Close the stylesheets viewer.</p><p>From the tree, you can now safely <strong>remove the default DIV element</strong> from the index.html file so you will have an empty index document to start your webdesign project.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_016-scaled.jpg” /></a></figure><blockquote class=)
Save your project. Optionally, you can create a copy so that you can start your future projects with this modified version.
Working with Pinegrow and MDB
Within Pinegrow Web Editor, Material Design for Bootstrap can be used in two ways which can be combined depending on your needs.
Method 1 – Using Pinegrow Bootstrap components and tools
You can use Bootstrap 4 components available from the Pinegrow library in the same way you would when working with any other Bootstrap 4 project.
This lets you to build your site with ease. The standard Bootstrap 4 components will be automatically styled with the MDB styles.
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_016a-scaled.jpg” /></a></figure><p>For example, let’s add a standard Bootstrap 4 Jumbotron from the Pinegrow library.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_017-scaled.jpg” /></a></figure><blockquote class=)
Read more about how to use Pinegrow to build websites.
Method 2 – Copy code from MDB website
Another method is to follow the documentation available from the MDB website and use the available code snippets by copy/pasting them via the super useful Insert code option in Pinegrow.
You will be able to easily import the sample code as needed and eventually create your own components that you will even have the opportunity to reuse in other future projects thanks to Pinegrow smart components feature.
Again, let’s try with a custom Jumbotron component.
Go to https://mdbootstrap.com/docs/jquery/components/jumbotron/
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_018-scaled.jpg” /></a></figure><p>From the browser, <strong>copy the code snippet</strong> from the first example by clicking on the <strong>COPY CODE</strong> button. You can also select the code with the mouse and use <strong>CTRL+C</strong> on Windows or <strong>CMD+C </strong>on Mac.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_019-scaled.jpg” /></a></figure><p>Then, from Pinegrow, switch to library tab, locate the <strong>INSERT CODE</strong> component and paste the code using <strong>CTRL+V</strong> on Windows or <strong>CMD+V</strong> on Mac.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_020-scaled.jpg” /></a></figure><p>You now have a <em>virtual</em> component with the custom Jumbotron that you just have to drag and drop to the page or to the tree.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_021-scaled.jpg” /></a></figure><p>The beautiful customized Jumbotron from the MDB documentation is now added to your document!</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_022-scaled.jpg” /></a></figure><p>Note: If you move your mouse over the component in the library, you will see a <strong>simplified</strong> preview of the component.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_023-scaled.jpg” /></a></figure><blockquote class=)
Pro TIP This way of copy / pasting code snippets with Insert Code is not reserved to MDB code snippets. You can copy / use snippets from any origin.
Customizing the MDB framework using SASS and Pinegrow
This is one of the most important feature with MDB, you have full access to the SASS source files (see the first part of this tutorial) so you can fully customize the components styles and colors.
Here is an interesting read about using SASS in a web project: 7 benefits of using SASS over conventional CSS
To proceed, you will have to edit the code of one of the many SASS includes files available from the STYLESHEETS preview.
The customization options are extremely numerous and it is not the purpose of this tutorial to detail them all but as an example, here is how to change the background color for the PRIMARY elements (buttons and so on).
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_024-scaled.jpg” /></a></figure><p>Click to open and edit the <strong>_colors.scss</strong> file, then search for <strong>$primary-color</strong> then change it according to your likings.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_025-scaled.jpg” /></a></figure><p>If you have an element using this value visible on screen, the change will be visible immediately.</p><figure class=)
 100vw, 2560px” data-lazy-src=”/wp-content/uploads/mdb_tut_026-scaled.jpg” /></a></figure><p>Of course, this part is a bit more complex as you will have to know “where” and “what” to search”, but with the help of the <a href=)
A tip: Use the Active tab of the Style panel to see what SASS variables affect the styling of the selected element. Right-click on the variable and select “Edit variable” to change its value.
Discuss this tutorial
Have questions or comments about this tutorial? Let’s talk about it on our forum.
Get in touch
Would you like to see a particular topic featured in the next tutorial? Let us know in the forum or by email!
Reviews
There are no reviews yet.