Personalizzare Bootstrap 5 usando SASS
Bootstrap è il framework di front-end più utilizzato al mondo. Esso consente a chiunque di realizzare pagine web responsive con pochissimo sforzo e risultati perfetti. Bootstrap è molto intuitivo, qualsiasi utente, anche alle prime armi, riesce ad importare nel proprio progetto la libreria ed iniziarla ad utilizzare.
Tuttavia le pagine web realizzate con Bootstrap prevedono delle impostazioni
standard. Lo sviluppatore può modificare il layout standard in due modi
differenti; il primo prevede la creazione di appositi file .css che
estendano le classi css di Bootstrap sovrascrivendo le impostazioni
standard, la seconda prevede la gestione delle variabili offerte dal framework
al fine di creare un file bootstrap.css con le impostazioni desiderate.
In questo articolo vedrai come personalizzare Bootstrap, utilizzando il
secondo approccio, attraverso SASS. Questo approccio rappresenta il miglior
modo per avere un bootstrap.css personalizzato senza dover ricorrere a
personalizzazioni successive.
Installazione
Per poter creare il proprio file bootstrap.css personalizzato avrai
bisogno del comando SASS e dei sorgenti del progetto Bootstrap.
SASS
Il modo più semplice per installare SASS è utilizzare la riga di comando ed il
gestore dei pacchetti npm.
Per installare SASS eseguiamo:
npm install -g sass
Il precedente comando, qualora lo esegui per installarlo sulla tua
distribuzione, potrebbe aver bisogno di privilegi di sudo. Nel caso tu
debba eseguire il comando con tali privilegi eseguiremo:
sudo npm install -g sass
Se il tuo utente non ha privilegi di sudo, leggi l'articolo come aggiungere
utenti al gruppo sudo
Una volta eseguita l'installazione, verifica che il comando sia presente digitando:
sass --version
L'output restituisce la versione del comando installata. Bootstrap5 suggerisce di installare la versione di SASS denominata Dart Sass.
Bootstrap 5
Per poter personalizzare Bootstrap, è necessario scaricare i sorgenti del progetto.
Scaricati i sorgenti decomprimi l'archivio come segue:
unzip NOME_ARCHIVIO
A questo punto avrai la cartella dei sorgenti di Bootstrap5. Nella cartella è
presente una cartella scss nella quale sono contenuti i file del framework.
Per convertire i file scss in un file css usiamo il seguente comando:
cd ROOT_CARTELLA_SORGENTI_BOOTSTRAP
sass scss/bootstrap.scss /tmp/bootstrap.css
Il precedente comando crea il file bootstrap.css all'interno della
cartella /tmp. Ovviamente il path che ospita l'output del comando,
potrai sceglierlo liberamente dove vorrai.
Il file prodotto tuttavia non prevede alcuna personalizzazione poiché hai
compilato la versione standard liberamente scaricabile dal sito. Puoi notare,
infatti, che il file scss/bootstrap.css ha al suo interno tutti
riferimenti ai file presenti nella cartella scss che implementano la
sintassi del bootstrap.
Principi da conoscere
Sei pronto per cominciare a personalizzare e compilare il tuo file di Bootstrap5. Prima di iniziare, è importante sottolineare dei principi che dovrai seguire per effettuare una corretta compilazione.
Non editare alcun file di bootstrap contenuto nella cartella dei sorgenti. Come ogni dipendenza da librerie esterne, la cartella dei file sorgenti cambia nel tempo col passare delle versioni di Bootstrap. Se modifichi file nella libreria non potrai aggiornarla in seguito, poiché i file conterranno i tuoi aggiornamenti.
Il file
bootstrap.scsscontiene tutti i riferimenti a file.scssda compilare. Questo file è il principale che controlla quali componenti installare.Il file
_variables.scsscontiene la definizione di tutte le variabili usate da Bootstrap5. Aprendo il file, potrai notare che ogni variabile presenta la stringa!defaultalla fine, che rappresenta la possibilità di modificare il valore della stessa. Tutte le variabili definite da Bootstrap sono modificabili.
Personalizzare il tema
Ma se non puoi modificare la cartella dei sorgenti di Bootstrap, come puoi modificare il layout finale?
Per prima cosa crea, all'interno di una cartella del tuo progetto, la cartella
scss. All'interno di questa cartella crea il file custom.scss.
Il file creato è il nuovo file principale da compilare.
All'interno del file custom.scss, andrai ad inserire le direttive che
indicheranno i pacchetti da installare ed indicherai le tue modifiche.
A questo punto hai due strade possibili per la personalizzazione:
- Importare tutti i file di bootstrap inserendo solamente le tue personalizzazioni
- Importare solamente i pacchetti di bootstrap che intendi utilizzare e le tue personalizzazioni
Importazione pacchetti
Il file custom.css che importa tutti i file Bootstrap5 è il seguente:
// Includere le variabili da sovrascrivere
@import "PATH_CARTELLA_BOOTSTRAP/scss/bootstrap";
// Aggiungi qui codice personalizzato
Nel precedente blocco di codice sostituisci PATH_CARTELLA_BOOTSTRAP con
il path alla cartella che abbiamo decompresso in precedenza.
Come puoi osservare l'istruzione
@import "PATH_CARTELLA_BOOTSTRAP/scss/bootstrap";
importa il file bootstrap.scss che precedentemente avevi compilato. Questo
nuovo file per ora è equivalente al file di Bootstrap, in esso andrai ad
inserire le personalizzazioni.
Se ad esempio volessi modificare il colore di background della pagina, potrai scrivere:
// Includere le variabili da sovrascrivere
$body-bg: #000;
@import "PATH_CARTELLA_BOOTSTRAP/scss/bootstrap";
// Aggiungi qui codice personalizzato
Con la definizione $body-bg: #000; hai impostato il colore di background sul
nero.
Importare pacchetti necessari
Per importare i soli pacchetti Bootstrap5 dei quali abbiamo necessità, il file
custom.scss dovrà prevedere la seguente sintassi:
// 1. Include le funzioni come primo import
@import "PATH_CARTELLA_BOOTSTRAP/scss/functions";
// 2. Includere la definizione delle variabili da sovrascrivere
// 3. Includere gli stili dall'installazione Bootstrap
@import "PATH_CARTELLA_BOOTSTRAP/scss/variables";
@import "PATH_CARTELLA_BOOTSTRAP/scss/mixins";
// 4. Includere i componenti (opzionali) di Bootstrap
@import "PATH_CARTELLA_BOOTSTRAP/scss/root";
@import "PATH_CARTELLA_BOOTSTRAP/scss/reboot";
@import "PATH_CARTELLA_BOOTSTRAP/scss/type";
@import "PATH_CARTELLA_BOOTSTRAP/scss/images";
@import "PATH_CARTELLA_BOOTSTRAP/scss/containers";
@import "PATH_CARTELLA_BOOTSTRAP/scss/grid";
// 5. Aggiungere eventuale codice opzionale
Come si evince dall'esempio, in questa modalità avrai il totale controllo di
ciò che sarà presente all'interno del file bootstrap.css esito della
compilazione.
Compilare file personalizzato
Quando avrai inserito tutte le modifiche all'interno del file custom.scss,
potrai compilare il file per ottenere il file da includere nelle pagine html.
Per compilare il file esegui:
cd CARTELLA_SCSS_TUO_PROGETTO
sass custom.scss bootstrap.css
Il precedente comando, eseguito all'interno della cartella nella quale hai
inserito il file custom.scss, crea il file bootstrap.css da
utilizzare, che recepisce tutte le modifiche dichiarate.
Conclusioni
In questo articolo hai visto come installare, configurare e compilare
Bootstrap5 al fine di ottenere un file bootstap.css da importare
all'interno dei tuoi progetti.
Le personalizzazioni che potrai apportare al Bootstrap ti consentiranno di rendere unico il tuo sito restando allineato al più utilizzato framework al mondo. Inoltre, attraverso le modalità di aggiornamento proposte, potrai in qualsiasi momento aggiornare la versione di Bootstrap utilizzata, mantenendo tutte le personalizzazioni inserite.
