logo

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

Types de blocs supplémentaires (EBT) – types de blocs stylisés et personnalisables : diaporamas, onglets, cartes, accordéons et bien d’autres. Paramètres intégrés pour l’arrière-plan, la boîte DOM, les plugins JavaScript. Découvrez dès aujourd’hui le futur de la création de mises en page.

Démo des modules EBT Télécharger les modules EBT

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes

Types de paragraphes supplémentaires (EPT) – ensemble de modules basé sur les paragraphes analogiques.

Démo des modules EPT Télécharger les modules EPT

Défilement

7.2.1. Création de thèmes basés sur Bootstrap. Configuration de PhpStorm et LESS Compiler pour travailler avec notre thème.

07/07/2025, by Ivan

bootstrap

Dans les leçons précédentes, nous avons vu comment créer un thème basé sur un autre thème Stable. Dans ce tutoriel, nous allons montrer comment créer un thème basé sur Bootstrap, un framework populaire pour créer rapidement des mises en page.

Je suppose que Drupal est déjà installé. Passons à l’installation de Bootstrap :

https://www.drupal.org/project/bootstrap

Contrairement à Drupal 7, dans Drupal 8, tous les thèmes du site se trouvent dans le dossier /themes à la racine du site :

Bootstrap

Pour créer votre propre thème basé sur Bootstrap, vous devez créer un sous-thème. Le dossier du sous-thème doit être copié depuis le thème parent :

/themes/bootstrap/starterkits/less

less

Copiez le dossier less dans le dossier /themes, à côté du thème parent Bootstrap, et renommez-le avec le nom de votre thème, ici drupalbook. Renommez aussi les fichiers THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme en remplaçant THEMENAME par le nom de votre thème, par exemple drupalbook.libraries.yml. Seul THEMENAME.starterkit.yml devient drupalbook.info.yml.

drupalbook

Dans le fichier drupalbook.info.yml, modifiez également la section libraries :

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

Il est aussi conseillé de renommer le nom du thème :

name: 'Bootstrap Drupalbook Sub-Theme (LESS)'

Renommez également les fichiers de configuration du thème :

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

config

Copiez ensuite le code source de Bootstrap :

http://getbootstrap.com/getting-started/#download

Nous nous intéressons à la version Source, composée de fichiers LESS non compilés :

https://getbootstrap.com/docs/4.3/getting-started/download/

source

Créez un dossier bootstrap dans votre sous-thème et copiez-y les fichiers Bootstrap.

bootstrap

Copiez bien la version Source, pas la version Bootstrap avec CSS compilé. Cela permet de surcharger les variables Bootstrap dans des fichiers spécifiques à Drupal :

/less/overrides.less
/less/variable-overrides.less

overrides

Vous pouvez aussi utiliser la version SASS, mais cela nécessite un compilateur SASS. Nous utilisons ici le compilateur LESS intégré à PhpStorm.

Allez sur la page Apparence et activez votre thème :

/admin/appearance

Vous n’aurez pas immédiatement les styles Bootstrap compilés, il faut les compiler. Pour cela, utilisez le plugin LESS Compiler de PhpStorm. Ouvrez les paramètres PhpStorm : Fichier -> Paramètres.

phpstorm

  • Dans les paramètres, cherchez la section Plugins
  • Ouvrez la page Plugins
  • Cherchez « LESS »
  • Trouvez le plugin « LESS CSS Compiler »
  • Installez-le via « Install JetBrains plugin ... »

Si le plugin n’est pas trouvé, téléchargez-le ici :

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

Puis installez-le via « Install plugin from disk ... »

Après installation, configurez-le. Dans PhpStorm, cherchez « LESS » dans les paramètres :

less profiles

Cliquez sur « + » pour ajouter un profil LESS, nommez-le par exemple « Bootstrap ». Chaque projet PhpStorm aura son propre profil.

less profiles

Dans les réglages du profil, spécifiez :

  • Répertoire source LESS : C:\OpenServer\domains\drupal8\themes\drupalbook\less (le dossier LESS de votre thème, pas celui de Bootstrap)
  • Fichiers inclus : C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less (point d’entrée de la compilation)
  • Répertoire de sortie CSS : C:\OpenServer\domains\drupal8\themes\drupalbook\css

La compilation automatique à la sauvegarde est pratique, activez-la.

Maintenant, en sauvegardant (Ctrl + S), les fichiers LESS se compilent automatiquement. Vous pouvez aussi lancer la compilation manuellement via un clic droit sur style.less puis « Compile to CSS » :

compilation

La compilation prend généralement 5-10 secondes :

compilation

Une fois compilé, vos nouveaux styles apparaissent :

bootstrap

N’oubliez pas de désactiver l’agrégation CSS et JS dans l’administration Drupal :
/admin/config/development/performance

performance

Par défaut, elles sont activées.

Vous pouvez maintenant commencer la mise en page. Vous disposez déjà d’un menu hamburger mobile intégré et d’un design responsive.

mobile

Pour cela, placez le bloc menu dans la région Navigation (Collapsible).

navigation

Dans les prochains tutoriels, nous créerons une maquette PSD pour notre thème Bootstrap.