Il ne suffit pas que l'architecture de notre page web soit bien conçue - l'apparence est également importante ! Drupal vient à notre secours lorsqu'il s'agit de créer des sites web rapidement. Pouvons-nous compter sur une aide similaire pour créer un look moderne ? Nous vous dirons un peu plus sur l'extensive bibliothèque appelée Bootstrap, qui offre une large gamme de composants prêts à l'emploi.
Bootstrap
L'année était 2011, lorsqu'un groupe de programmeurs de Twitter, dirigé par Mark Otto et Jacob Thornton, a présenté au monde un outil extraordinaire qui devait, à l'avenir, révolutionner le processus de création d'une interface graphique – non seulement pour les sites web mais aussi pour les applications. Ils l'ont nommé Bootstrap et ont décidé de le publier sous l'une des licences open source les plus libérales - la MIT. Actuellement, la dernière version de Bootstrap est 5.1.
Source : Bootstrap
Bootstrap est une bibliothèque de feuilles de style en cascade (CSS), qui utilise des solutions HTML et JavaScript prêtes à l'emploi. Il fournit des styles prédéfinis pour les éléments couramment utilisés sur les pages web, tels que les textes, les titres, les boutons, les navigations, les tableaux, les liens, et plus encore. Il garantit également que les éléments ont une belle apparence dans la version mobile. Tout cela est basé sur une structure de grille composée de 12 colonnes maximum. Ce qui rend Bootstrap si populaire, outre l'avantage évident d'avoir des centaines de classes prédéfinies – nous n'avons pas à nous soucier des espacements et à nous battre avec la composition de nos divs – c'est sa documentation. Impossible de s'y perdre. En termes de sujets, elle couvre le support de stylisation et ses variantes pour tous les éléments.
Drupal et Bootstrap - meilleurs amis
La communauté Drupal n'a pas ignoré un outil si largement utilisé et a créé deux thèmes permettant d'intégrer la bibliothèque Bootstrap avec Drupal.
Thème Bootstrap
Le thème de base qui vous permet d'utiliser la puissance de Bootstrap dans Drupal peut être téléchargé depuis la page Drupal.org. Il convient de mentionner, cependant, qu'il supporte actuellement la version 3 de la bibliothèque, mais est compatible avec toutes les versions de Drupal à partir de la 7.
L'installation du thème peut être effectuée via la ligne de commande dans composer :
require 'drupal/bootstrap:^3.23'
ou le panneau d'administration sous le chemin /admin/theme/install.
L'étape suivante consiste à activer le thème dans la section Apparence du panneau d'administration ou en utilisant la commande drush.
theme:enable bootstrap
(si nous voulons simplement activer le thème)
config-set system.theme default bootstrap
(si nous voulons activer le thème et le définir comme défaut)
Ce thème prêt à l'emploi offre de nombreuses options pour la configuration globale des composants individuels qui composent notre page – à la fois statiques (formulaires, tableaux, conteneurs) et dynamiques (fenêtres modales et pop-ups). Il suffit de plonger plus profondément dans les paramètres sous /admin/appearance/settings/bootstrap. Nous pouvons déjà constater une différence significative dans l'apparence de notre page.
Ci-dessous, vous trouverez la comparaison de ma page d'accueil de test. Si vous utilisez le thème Bartik, vous aurez l'impression que soudainement les composants de la page sont mélangés et que l'ensemble semble "cassé", mais ne vous inquiétez pas. Dans la plupart des cas, il suffit de légèrement ajuster le style des éléments existants. Allez à Structure -> Disposition des blocs et attribuez les régions correctes aux blocs. Ici, je présente l'apparence du thème Bartik après qu'il ait été ajusté en conséquence.
Thème Barrio
Le processus d'installation et d'activation du thème Barrio est le même qu'auparavant. La principale différence entre Barrio et Bootstrap est la version de la bibliothèque qu'ils utilisent. Pour Barrio, c'est Bootstrap 4 ou même 5 (pour ceux qui souhaitent tester la version 5.0.2 de Bootstrap). La commande pour télécharger Barrio via Composer ressemble à ceci :
require drupal/bootstrap_barrio
Ce que nous obtenons dans les deux cas, ce sont plus de modèles prêts à l'emploi qui nécessitent une configuration et un style supplémentaires selon nos besoins, plutôt qu'une solution entièrement stylée. Ils doivent être traités comme les thèmes de base dont nous hériterons dans notre sous-thème. Cela est également important en termes de mises à jour futures.
Créer son propre thème
Créer notre propre thème, qui sera basé sur la bibliothèque Bootstrap version 3, 4 ou 5, peut être réalisé de deux manières :
- en utilisant le kit de démarrage disponible pour les deux thèmes – sous themes/Bootstrap/starterkits et themes/bootstrap_barrio/subtheme (l'option la plus rapide et la plus simple).
- en utilisant le kit de démarrage disponible avec les deux thèmes, mais sans utiliser le CDN (Content Delivery Network) (option avancée, nécessite un préprocesseur CSS, par exemple SASS, pour compiler les styles, et la bibliothèque Bootstrap doit être téléchargée localement).
La première option ne nécessite que de copier un ensemble de fichiers prêts à l'emploi dans un nouveau dossier du chemin des thèmes et de renommer les fichiers de THEMENAME ou bootstrap_barrio_subtheme au nom machine de notre thème. Vous devriez également vérifier les fichiers .theme, info.yml, schema.yml, color/color.inc et js/global.js et apporter des modifications similaires à l'intérieur de ceux-ci. Grâce au CDN, la bibliothèque Bootstrap n'a pas besoin d'être téléchargée localement.
À partir de maintenant, nous pouvons commencer à travailler sur l'apparence de notre page, définir la typographie ou le schéma de couleurs. Dans les paramètres du thème, vous trouverez de nombreuses options pour modifier la configuration originale sans avoir à modifier les fichiers css ou sass. Cependant, dans la plupart des cas, cela s'avère insuffisant et il est nécessaire d'écraser des fichiers et de créer des modèles au format .twig.
Droopler – un modèle Bootstrap haut de gamme
En tant que distribution gratuite de Drupal, Droopler a été créé avec l'idée de création de sites web rapide et globale à l'esprit. Par conséquent, il contient un ensemble de composants et fonctionnalités prêts à l'emploi que la plupart des pages utilisent et – grâce à sa structure modulaire – dispose d'un préprocesseur SCSS hautement configurable. Pour effectuer le reste de nos activités, vous pouvez installer Droopler de la manière décrite sur la page liée.
Bootstrap est une partie intégrante de Droopler. Le thème Droopler utilise Barrio – mais contrairement à Barrio, il propose un thème prêt à l'emploi avec des styles, pas seulement un modèle. Dans le dossier scss, nous pouvons trouver des fichiers de style prêts pour tous les composants (principalement les types de paragraphes disponibles, les formulaires, etc.) et les éléments de la structure de la page (headers, footer, etc.).
Sous-thème Droopler – comment l'utiliser ?
Le thème Droopler a également un kit de démarrage pour créer votre propre sous-thème nommé STARTERKIT_CSS et STARTERKIT_SCSS, où nous pouvons facilement modifier les variables prédéfinies. Voyons à quoi cela ressemble lorsque vous souhaitez utiliser SCSS :
Le fichier style.css combine l'ensemble du code SCSS du droopler_theme principal et de notre thème (fichiers situés dans scss/config). Print.scss combine également l'ensemble du code SCSS pour l'impression des deux thèmes. Dans le sous-dossier libraries, nous pouvons placer nos fichiers SCSS supplémentaires, que nous devons ensuite ajouter via @import dans le fichier style.scss. Lors de leur ajout, il est utile de conserver la division en composants et mise en page – comme dans le thème de base.
Vous pouvez apporter toutes les modifications aux paramètres de la bibliothèque Bootstrap elle-même ou du thème de base droopler_bootstrap dans les fichiers de configuration :
- _base_theme_overrides.scss
- _bootstrap_overrides.scss.
Dans le cas des deux fichiers, nous avons à notre disposition un guide rapide couvrant les options de modification de variables disponibles sous forme de commentaire étendu. Il suffit de décommenter la variable sélectionnée et de la remplacer par notre valeur. La liste complète des variables utilisées dans Bootstrap que nous pouvons remplacer se trouve dans le fichier _variables.scss de la bibliothèque. Comme il est téléchargé automatiquement en définissant le dépôt dans le fichier package.json du thème droopler_theme, il se trouve dans le dossier node_modules/bootstrap.
Supposons que nous voulions changer la couleur de la bordure du sous-menu qui apparaît sous la variable $dropdown-border-color dans Bootstrap. Dans le fichier base_theme_overrides , nous définissons une nouvelle couleur, par exemple $color-example-1. Ensuite, dans le fichier bootstrap_overrides, nous décommentons la ligne 34, où la valeur de la couleur de la bordure est définie. Nous la remplaçons par notre nouvelle variable créée à cet endroit.
Vous devez exécuter le compilateur pour que les changements deviennent visibles. Dans le cas de Droopler, les développeurs s'en sont également occupés. Il y a un fichier gulpfile.js prêt à l'emploi dans le package du thème. Il suffit de exécuter la commande gulp watch dans le répertoire du thème (droopler_theme et droopler_subtheme), afin que tous les changements que nous apportons aux fichiers scss, js ou autres fichiers sources soient inclus et compilés automatiquement. L'effet ? Découvrons-le !
Notre bordure est maintenant rose. Nous pouvons faire de même pour toutes les variables.
Résumé
Bootstrap est un outil puissant reliant les designers graphiques et les développeurs. D'une part, il permet aux designers de se familiariser avec l'architecture du site web et la terminologie spécialisée (par exemple, une barre latérale de 2 colonnes de large au lieu d'une fenêtre étroite collée au bord de la page), d'autre part, il fait gagner du temps aux développeurs qui n'ont qu'à utiliser la bonne classe pour transformer un lien ordinaire en bouton.
Intégrer Drupal avec Bootstrap peut sembler relativement compliqué, mais rappelez-vous que les thèmes Bootstrap et Barrio disponibles ne sont que des modèles, et qu'en fin de compte, nous devrons toujours attribuer les classes appropriées pour tous les types de liens que nous utilisons. Dans Droopler, cette partie est déjà prise en charge – nous n'avons qu'à changer la disposition des blocs ou modifier les modèles Twig existants. Nous pouvons créer et mettre en œuvre un nouveau schéma de couleurs en quelques instants en éditant un seul fichier – l'effet est garanti.
