Vai al contenuto
Home » Notes » Come Personalizzare e Modificare Bootstrap 5

Come Personalizzare e Modificare Bootstrap 5

copertina guida tutorial come personalizzare e modificare bootstrap

In questa guida vediamo come personalizzare e modificare Bootstrap per estendere delle funzionalità o sovrascrivere delle variabili e delle impostazioni di default.
Bootstrap è un framework completo, funzionale, efficiente, facile e graficamente accattivante. Il problema di essere così completo è che senza una customizzazione da parte del web designer, un sito realizzato con bootstrap apparirà estremamente simile a tutta la miriade di siti fatti con bootstrap che trovi sul Web.
Come si fa quindi a personalizzare Bootstrap per modificare le sue variabili di default e renderlo unico? Lo scopriamo in questa guida.

Come Personalizzare il Framework Bootstrap 5

La prima cosa da fare per personalizzare i valori default di Bootstrap è installare una versione locale del framework Bootstrap. Per farlo, usa il comando del node package manager nel tuo progetto:

npm install bootstrap

Ora dovresti vedere tutti i file di bootstrap sotto la directory node_modules/bootstrap del tuo progetto.

Dentro la cartella scss troverai tutti i file che contengono le dichiarazioni di variabili e proprietà dei componenti di Bootstrap. Questi file vengono compilati e poi minimizzati dentro il file min.css che il browser usa per disegnare le tue pagine web.

Il modo più “naive” per editare bootstrap potrebbe essere quello di cambiare a mano le variabili in questi file scss.
Questo funziona, sia chiaro, ma ogni volta dovrai navigare tra centinaia di scss e migliaia di righe di codice per trovare un paio di proprietà da modificare.
E se avessi bisogno di fare qualche rollback delle tue modifiche? Non sembra un’idea molto furba.

Inoltre, se aggiornassi Bootstrap tutti i cambiamenti sarebbero persi per sempre perchè questi file sarebbero sovrascritti dalla nuova installazione di Bootstrap.

La strada giusta è quella di creare una cartella nella quale raccogliere tutte le nostre personalizzazioni , ovvero le variabili con i valori vogliamo sovrascrivere. Questo approccio funziona perchè nei file scss di bootstrap troviamo le variabili dichiarate e affiancate da un flag “!default“. É proprio il flag !default ad indicare che quella variabile assumerà il valore di default solo se non specificato diversamente.

Crea quindi una cartella /sass dentro alla directory principale del tuo progetto e un file al suo interno, ad esempio custom.scss. In questo file dovrai importare bootstrap, potrai sovrascrivere qualsiasi variabile di default e aggiungere il tuo css personalizzato!

Quindi , ad esempio, cambiamo il colore primario , secondario e i colori che vengono usati per calcolare il colore di sfondo. In questo SCSS potrai aggiungere qualsiasi altro stile CSS che vuoi applicare al tuo progetto.

Ora devi ricompilare il sass per aggiornare il css di bootstrap. Ci sono tanti modi per farlo, io ho Visual Studio Code uso l’estensione Live Sass Compiler che autoricompila i file scss ad ogni salvataggio. Puoi installarla dalle estensioni per VS Code.

screenshot installazione live sass compiler download per vs code

Dopo averla installata accertati di attivare l’auto compilazione andando nei Settings di VS Code > cerca live sass format > clicca Edit in settings.json

screenshot live sass compiler settings

In questo file json di impostazioni inserisci il percorso nel quale dovrà essere salvato il css compilato da live sass compiler, tipicamente /css. Puoi anche scegliere se preferisci un formato expanded o minimized (per ottimizzare le performance).

screenshot edit settings json di live sass compiler

Perfetto, ora attiva l’estensione cliccando su Watch Sass.

watch sass autocompile scss after every save

Finito! Ora puoi continuare ad editare il file custom.scss (e ovviamente aggiungere altri file dentro la stessa cartella) personalizzando il tuo Bootstrap come preferisci.

Trovi altre guide sulle tecnologie web seguendo questo link

Fonti:
Bootstrap doc ufficiale

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *