logo

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri
  1. Home
  2. Libro Drupal
  3. Articoli vecchi

7.2.1. Creazione di temi basati su Bootstrap. Configurazione di PhpStorm e del compilatore LESS per lavorare con il nostro tema.

17/10/2025, by Ivan

Menu

bootstrap

Nelle lezioni precedenti abbiamo già visto come creare un tema basato su un altro tema stabile. In questo tutorial vedremo come creare un tema basato su Bootstrap, un popolare framework per creare rapidamente layout di pagine.

Suppongo che tu abbia già installato Drupal. Passiamo quindi all’installazione di Bootstrap:

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

A differenza di Drupal 7, in Drupal 8 tutti i temi del sito vengono collocati nella cartella /themes nella directory principale del sito:

Bootstrap

Per creare un tema personalizzato basato su Bootstrap, dobbiamo creare un sotto-tema. La cartella del sotto-tema va copiata direttamente dal tema genitore:

/themes/bootstrap/starterkits/less

less

Copia la cartella less nella directory /themes, accanto al tema Bootstrap, e rinominala con il nome del tuo tema. Nel nostro caso sarà drupalbook. Rinomina anche i file THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme sostituendo THEMENAME con il nome del tema, ad esempio drupalbook.libraries.yml. Il file THEMENAME.starterkit.yml va rinominato in drupalbook.info.yml.

drupalbook

Ora apri il file drupalbook.info.yml e nella sezione libraries rinomina anche i riferimenti a THEMENAME:

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

È consigliabile anche modificare il nome del tema:

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

Rinomina anche i file di configurazione del tema:

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

config

Ora resta da copiare il codice sorgente del framework Bootstrap:

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

Ci interessa la versione Source code di Bootstrap, che contiene i file LESS non ancora compilati:

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

source

Crea una cartella bootstrap nel sotto-tema e copia lì i file di Bootstrap.

bootstrap

Copia esattamente la versione Source code e non quella già compilata con CSS. Ciò serve per poter sovrascrivere le variabili di Bootstrap nei nostri file personalizzati del tema:

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

ovverides

Possiamo anche usare la versione SASS di Bootstrap, ma in quel caso avremmo bisogno del compilatore SASS. Noi useremo invece il LESS CSS Compiler perché è integrato in PhpStorm.

Ora possiamo andare nella pagina Aspetto ed abilitare il nostro tema:

/admin/appearance

Subito dopo, gli stili Bootstrap non saranno ancora applicati: devono essere compilati. Per farlo, useremo il plugin Less Compiler in PhpStorm. Andiamo in File → Settings.

php storm

  • Cerchiamo le impostazioni dei plugin.
  • Andiamo nella pagina Plugins.
  • Cerchiamo “LESS”.
  • Troviamo il plugin LESS CSS Compiler.
  • Installiamolo tramite “Install JetBrains plugin…”

Se non riesci a trovarlo, scaricalo dalla pagina ufficiale:

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

e installalo con “Install plugin from disk…”.

Ora che il plugin è installato, dobbiamo configurarlo. Apriamo le impostazioni di PhpStorm e cerchiamo “LESS”:

less profiles

Clicchiamo sul segno “+” per aggiungere un profilo LESS. Diamogli un nome, ad esempio Bootstrap. Per ogni progetto PhpStorm serve un profilo separato.

less profiles

Nel profilo specifichiamo:

LESS source directory:
C:\OpenServer\domains\drupal8\themes\drupalbook\less

Questo è il percorso alla cartella less del nostro tema, non quella del Bootstrap originale. Il file style.less del nostro tema include già i file di Bootstrap.

Include files by path:
C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less

Colleghiamo solo il file style.less, che è il punto di ingresso alla compilazione di tutti i file LESS del tema. In pratica compiliamo solo questo file, che include automaticamente gli altri.

CSS output directory:
C:\OpenServer\domains\drupal8\themes\drupalbook\css

Poiché compiliamo un solo file style.less, verrà generato un solo style.css. È comodo, ma comporta che l’intero Bootstrap venga ricompilato anche se modifichiamo una sola riga di CSS nel tema.

Compile automatically on save: funzione utile che ricompila il CSS ogni volta che premiamo Ctrl+S o salviamo i file. Consiglio di lasciarla attiva.

Ora possiamo premere Ctrl+S e avviare la compilazione dei file LESS. Possiamo anche eseguire la compilazione manualmente cliccando con il tasto destro su style.less e scegliendo “Compile to CSS”:

compile

La compilazione di solito richiede 5-10 secondi:

compile

Se la compilazione è andata a buon fine, dovresti vedere i nuovi stili applicati:

bootstrap

Ricorda di disattivare l’aggregazione di JavaScript e CSS nel pannello di amministrazione di Drupal:
/admin/config/development/performance

perfomance

Per impostazione predefinita, queste opzioni sono attive.

Ora puoi iniziare la creazione delle pagine; avrai già a disposizione il menu mobile “hamburger” e un layout responsive.

mobile

Per visualizzare il menu mobile, posiziona il blocco del menu nella regione Navigation (Collapsible).

navigation

Nei prossimi tutorial creeremo un layout PSD per il nostro tema basato su Bootstrap.