Publié le : 05/07/2021
MDBootstrap customisation et optimisation de site web
Avant de pouvoir de suivre ce tutoriel sur l’optimisation d’un site web avec MDBootstrap, vous devez avoir Gulp installé. Si ce n’est pas encore le cas, veuillez voir l’article ci-dessous :
Créer un site web avec MDBootstrap 4 et Gulp
MDBootstrap contient plusieurs composants. Tous ne sont pas nécessaires pour chaque projet. C’est pourquoi, il est recommandé de personnaliser le package. En effet, en faisant cela, le package ne contiendra que les composants nécessaires au projet.
Dans cet article, nous allons montrer comment compiler ces propres package. Mais il y a un moyen plus facile pour minimiser la taille des packages : en utilisant MDB Lite.
Compilation des fichiers Sass pour l’optimisation de site web MDBootstrap
Pour compiler les fichiers Sass, il faut procéder comme suit :
- Ouvrir le répertoire
scss/mdb-free.scss. Ce fichier contient tous les listes des composants Sass de la version free de MDBootstrap. - Faire les modifications que vous voulez. La compilation est facile car il suffit d’ajouter ou de supprimer/commenter une ligne. Chaque ligne représente un composant du package de MDBootstrap.
Après avoir sauvé le fichier la compilation se fait et on obtient les fichiers mdb-free.css et mdb-free.min.css qui se trouve dans le répertoire dist/css/.
La vidéo ci-dessous représente ces étapes. Et nous voyons que la taille de mdb-free.css et mdb-free.min.css ont diminué.
Les dépendances Sass
Dans MDBootstrap, plusieurs composants ont besoin d’autres composants pour fonctionner normalement. C’est pour cela qu’il existe une carte de dépendance.
Il est toutefois nécessaire de garder à l’esprit que :
- Tous les composants requiert les fichiers
core. Ainsi, si vous décidez de supprimer un de ces fichiers, votre site peut ne pas fonctionner. - Mais aussi, si vous supprimez un des composants Free ou Pro, il faut s’assurer qu’il ne fait pas partie d’un autre composant.
- Enfin, si on supprime une dépendance des composants Free ou Pro, il se peut aussi que votre site ne fonctionne pas.
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
Compilation des fichiers Javascript
La compilation des fichiers Javascript est pareil que celui des fichiers Sass vu précédemment.
- Ouvrir le répertoire
js/; - Modifier le fichier
module.jsà l’intérieur.
Dans ce fichier, nous avons les composants Javascript du package MDBootstrap. Et ainsi, pour désactiver un composant, vous pouvez décommenter/supprimer une ligne. Et une fois que c’est fait, procéder à l’enregistrement du fichier.
Enfin, après l’enregistrement des fichiers, les fichiers mdb.js et mdb.min.js sont générés. Et ces fichiers se trouvent dans le répertoire dist/js. C’est ce que montre la vidéo ci-dessous.
Les dépendances Javascript
Avant de passer à la suppression des composants MDBootstrap, il est nécessaire de voir les dépendances de ces composants. La carte des dépendances ci-dessous vous donne la liste des dépendances.
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
La version MDBootstrap Lite pour l’optimisation de site web
Les packages MDBootstrap contient les fichiers mdb.lite.css et mdb.lite.js (ainsi que leur version minifier). Ces fichiers contiennent les versions slim de MDBootstrap.
Prenons un exemple d’éléments enlever dans la version slim. Nous avons dans la version standard de MDBootstrap 74 animations CSS. Par contre, dans la version Lite, nous en avons quelques unes.
De ce fait, l’utilisation de MDBootstrap Lite se fait en remplaçant mdb.min.css par mdb.lite.min.css et mdb.min.js par mdb.lite.min.js dans les codes HTML.
