Bootstrap customize tutorial

code injection

Note: This tutorial requires an installed gulp package. If you didn't follow the previous lesson - please do it before you start this one.

Gulp tutorial


MDBootstrap contains a lot of components.

Not all of them are necessary for every project - that's why it's very good practice to customize the package so that it contains only the components we need for any particular project.

In this tutorial, you will learn how to create such a customized package.


Note: In this lesson, you will learn how to compile your own, custom package.

Compilation gives you the biggest control over the package, however, there is a simpler way to minimalize the weight of the package.

If you want to learn this simpler way - read about the usage of MDB Lite


Step 1 - launching the project

1. Open the MDB Gulp project in your code editor.

2. Type gulp mdb-go command to your terminal to launch gulp.

It should open a new window in your browser.

Step 2 - compiling Sass files

1. Open \MDB Gulp Free\scss\mdb.scss file in your code editor.

This file contains the list of all the Sass components in the MDBootstrap package.

The compilation is super easy - just remove or comment the component you don't need and save the file.

2. For example - let's say you don't need all the 74 animations available in MDBootstrap, maybe because basic animations are enough for you. Remove the line @import "free/animations-extended"; from the list in the mdb.scss file and save it.

After saving the file MDBootstrap Gulp package then automatically compiles new mdb.css and mdb.min.css files.

If you open these files (within the \dist\css\ directory) you will notice they don't contain extended animations. Thanks to that your package takes up less storage space.

Step 3 - Sass dependencies

Some of the components require other components to work properly. That's why we have created a map of the dependencies.

Please note:

  1. All the components require core files. If you decide to remove any of the core files you risk a conflict.

  2. If you remove any of the Free or Pro components - be sure it's not a dependency of any other component.

  3. If you remove the dependency of any the Free or Pro components - please be aware that's possible it may not work 100% properly.



      Legend:

      '-->' means 'required'

      All free and pro files require files from 'core' catalog

      'none' means 'this component doesn't require anything except core files'

      A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

      All PRO components require 'pro/_variables.scss' file

      scss/
      |
      |-- core/
      |   |
      |   |-- bootstrap/
      |   |	|-- _functions.scss
      |   |	|-- _variables.scss
      |   |
      |   |-- _colors.scss
      |   |-- _global.scss
      |   |-- _helpers.scss
      |   |-- _masks.scss
      |   |-- _mixins.scss
      |   |-- _typography.scss
      |   |-- _variables.scss
      |   |-- _waves.scss
      |
      |-- free/
      |   |-- _animations-basic.scss --> none
      |   |-- _animations-extended.scss --> _animations-basic.scss
      |   |-- _buttons.scss --> none
      |   |-- _cards.scss --> none <_buttons.scss>
      |   |-- _dropdowns.scss --> none <_buttons.scss>
      |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
      |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
      |   |-- _pagination.scss --> none
      |   |-- _badges.scss --> none
      |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
      |   |-- _carousels.scss --> <_buttons.scss>
      |   |-- _forms.scss --> none
      |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
      |   |-- _footers.scss none <_buttons.scss> (PRO: )
      |   |-- _list-group.scss --> none
      |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
      |   |-- _depreciated.scss
      |
      |-- pro/
      |   |
      |   |-- picker/
      |   |   |-- _default.scss --> none
      |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
      |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
      |   |
      |   |-- sections/
      |   |   |-- _templates.scss --> _sidenav.scss
      |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
      |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
      |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
      |   |   |-- _magazine.scss --> _badges.scss
      |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
      |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
      |   |
      |   |-- _variables.scss
      |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
      |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
      |   |-- _tabs.scss --> _cards.scss
      |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
      |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
      |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
      |   |-- _scrollspy.scss --> none
      |   |-- _lightbox.scss --> none
      |   |-- _chips.scss --> none
      |   |-- _msc.scss --> none
      |   |-- _forms.scss --> none
      |   |-- _radio.scss --> none
      |   |-- _checkbox.scss --> none
      |   |-- _material-select.scss --> none
      |   |-- _switch.scss --> none
      |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
      |   |-- _range.scss --> none
      |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
      |   |-- _autocomplete.scss --> free/_forms.scss
      |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
      |   |-- _parallax.scss --> none
      |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
      |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
      |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
      |   |-- _steppers.scss --> free/_buttons.scss
      |   |-- _blog.scss --> none
      |   |-- _toasts.scss --> free/_buttons.scss
      |   |-- _animations.scss --> none
      |   |-- _charts.scss --> none
      |   |-- _progress.scss --> none
      |   |-- _scrollbar.scss --> none
      |   |-- _skins.scss --> none
      |   |-- _depreciated.scss
      |
      `-- _custom-skin.scss
      `-- _custom-styles.scss
      `-- _custom-variables.scss
      `-- mdb.scss

    

Step 4 compiling JavaScript files

Compiling JavaScript files is very similar to the compilation of Sass files.

1. Open \MDB Gulp Free\js\modules.js file in your code editor.

This file contains the list of all the JavaScript components of the MDBootstrap package.

You now do the same as with Sass files - just remove or comment the components you don't need and save the file.

After saving the file, the MDBootstrap gulp package then compiles new mdb.js and mdb.js.css files.

If you open these files (within the \dist\js\ directory) you will notice they don't contain any of the removed components.

Step 5 - JavaScript dependencies

Before removing any component have a look at the map of dependencies of JavaScript modules in MDBootstrap:



        Legend:

        '-->' means 'required'

        All files require jQuery and bootstrap.js

        js/
        ├── dist/
        │   ├── buttons.js
        │   ├── cards.js
        │   ├── character-counter.js
        │   ├── chips.js
        │   ├── collapsible.js --> vendor/velocity.js
        │   ├── dropdown.js --> Popper.js, jquery.easing.js
        │   ├── file-input.js
        │   ├── forms-free.js
        │   ├── material-select.js --> dropdown.js
        │   ├── mdb-autocomplete.js
        │   ├── preloading.js
        │   ├── range-input.js --> vendor/velocity.js
        │   ├── scrolling-navbar.js
        │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
        │   └── smooth-scroll.js
        ├── _intro-mdb-pro.js
        ├── modules.js
        ├── src/
        │   ├── buttons.js
        │   ├── cards.js
        │   ├── character-counter.js
        │   ├── chips.js
        │   ├── collapsible.js --> vendor/velocity.js
        │   ├── dropdown.js --> Popper.js, jquery.easing.js
        │   ├── file-input.js
        │   ├── forms-free.js
        │   ├── material-select.js --> dropdown.js
        │   ├── mdb-autocomplete.js
        │   ├── preloading.js
        │   ├── range-input.js --> vendor/velocity.js
        │   ├── scrolling-navbar.js
        │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
        │   └── smooth-scroll.js
        └── vendor/
            ├── addons/
            │   ├── datatables.js
            │   └── datatables.min.js
            ├── chart.js
            ├── enhanced-modals.js
            ├── hammer.js
            ├── jarallax.js
            ├── jarallax-video.js --> vendor/jarallax.js
            ├── jquery.easing.js
            ├── jquery.easypiechart.js
            ├── jquery.hammer.js --> vendor/hammer.js
            ├── jquery.sticky.js
            ├── lightbox.js
            ├── picker-date.js --> vendor/picker.js
            ├── picker.js
            ├── picker-time.js --> vendor/picker.js
            ├── scrollbar.js
            ├── scrolling-navbar.js
            ├── toastr.js
            ├── velocity.js
            ├── waves.js
            └── wow.js

      

Additional step - using MDB Lite version

Every MDB package contains mdb.lite.css and mdb-lite.js files (and also minified versions: mdb.lite.min.css and mdb-lite.min.js .

These files contain a slim version of MDB.

For example - in the regular version of MDB you can find 74 CSS animations (what requires a lot of code).

In MDB Lite version you will find only a few basic animations. Thanks to that MDB Lite is much lighter than regular MDB version.

Using MDB Lite is simple. In the index.html file, you have to replace links to regular MDB files with the links to MDB Lite.

Replace mdb.min.css with mdb.lite.min.css


<!-- Material Design Bootstrap -->
<link href="css/mdb.lite.min.css" rel="stylesheet">
      

Replace mdb.min.js with mdb.lite.js.css


<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.lite.min.js"></script>
      

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.
Sign up to follow your progress and get additional benefits