Utiliser Twitter Bootstrap en 2020

Utiliser Twitter Bootstrap en 2020

Bootstrap que vous connaissez à coup sûr est une collection d'outils utiles à la création du design de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. en d'autre termes c'est un Framework CSS + des extensions Javascript

Boostrap + Webpack = 💓

Webpack est un module bundler JavaScript opensource. Il s'agit d'un module bundler principalement pour JavaScript, mais il peut transformer des ressources frontend comme HTML, CSS et images si les loaders correspondants sont inclus. Webpack prend des modules avec des dépendances et génère des actifs statiques représentant ces modules

Webpack Bundle, source grafikart.fr

webpack tente d'alléger un peu la charge du développeur en posant une question audacieuse : et s'il y avait une partie du processus de développement qui gérait les dépendances par elle-même ? Et si nous pouvions simplement écrire du code de manière à ce que le processus de construction se gère de lui-même, en se basant uniquement sur ce qui est nécessaire à la fin ?

Si vous faites partie de la communauté du web depuis quelques années, vous connaissez déjà la méthode préférée pour résoudre un problème : construire avec JavaScript. C'est pourquoi webpack tente de faciliter le processus de construction en faisant passer les dépendances par JavaScript. Mais le véritable pouvoir de sa conception ne réside pas simplement dans la partie de gestion du code ; c'est que cette couche de gestion est constituée à 100% de JavaScript valide (avec les fonctionnalités de Node). webpack vous donne la possibilité d'écrire du JavaScript valide qui a une meilleure idée du système dans son ensemble. En d'autres termes : vous n'écrivez pas de code pour webpack. Vous écrivez du code pour votre projet. Et le webpack suit (avec une certaine configuration, bien sûr).

Comment utiliser bootstrap ?

il y a plusieurs façons d'utiliser bootstrap :

  • Télécharger les fichiers : une méthode que je déconseille car vous aurez du poids en plus sur votre CSS et vous chargerez toutes les extensions Javascript même celles que vous n'utiliserez pas (ce problème peut être résolu, si vous télécharger les fichiers source : sass, less, ...; Au lieu de des fichiers dist). mais malgré ça, les mises à jour de bootstrap vous donnerons encore plus de travail (vous serez obliger de refaire le processus de téléchargement, extraction et copier-coller le nouveau code à chaque nouvelle mise à jour du framework)

  • CDN : La première raison d'utiliser un CDN est d'améliorer l'expérience de l'utilisateur en termes de vitesse, et comme nous le savons, la vitesse est importante ! Un CDN mondial permettrait aux utilisateurs d'un point d'origine européen de télécharger du contenu statique à partir d'une source plus proche (mais dans ce cas aussi vous chargerez tout bootstrap !)

  • Utiliser Npm : Ma méthode préférée, celle-ci vous permettra non seulement de télécharger et de mettre à jour rapidement bootstrap mais aussi d'inclure uniquement les composant dont vous avez besoin

Installation via Npm

$ npm install bootstrap

require('bootstrap') chargera tous les plugins jQuery de Bootstrap sur l'objet jQuery. Le module bootstrap lui-même n'exporte rien. Vous pouvez charger manuellement les plugins jQuery de Bootstrap individuellement en chargeant les fichiers /js/*.js sous le répertoire de premier niveau du paquet.

Le fichier package.json de Bootstrap contient des métadonnées supplémentaires sous les clés suivantes :

  • sass - chemin d'accès au fichier source Sass principal de Bootstrap
  • style - chemin vers le CSS non minifié de Bootstrap qui a été précompilé en utilisant les paramètres par défaut (pas de personnalisation)

👉🏾 Plus d'information sur la documentation

Utilisation

Importez le JavaScript de Bootstrap en ajoutant cette ligne au point d'entrée de votre application (généralement index.js ou app.js) :

import 'boostrap'

Vous pouvez également importer des plugins individuellement, selon vos besoins :

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Le bootstrap dépend de jQuery et Popper, qui sont spécifiés dans la propriété peerDependencies ; cela signifie que vous devrez vous assurer de les ajouter tous les deux à votre paquet.json en utilisant

npm install --save jquery popper.js.

Pour profiter pleinement du potentiel de Bootstrap et l'adapter à vos besoins, utilisez les fichiers sources dans le cadre du processus de création de votre projet.

Tout d'abord, créez votre propre _custom.scss et utilisez-le pour remplacer les variables personnalisées intégrées. Ensuite, utilisez votre fichier Sass principal pour importer vos variables personnalisées, suivi de Bootstrap :

@import "custom";
@import "~bootstrap/scss/bootstrap";

Pour la compilation de Bootstrap, assurez-vous d'installer et d'utiliser les loaders nécessaires : sass-loader, postcss-loader avec Autoprefixer. Avec une configuration minimale, la configuration de votre webpack devrait inclure cette règle ou une règle similaire :

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...
...
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
...

👉🏾 Plus d'information sur la documentation