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.


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

      

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, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits