Cambiare skin all’applicazione con Bootstrap Italia

Devo vedere come si fa a cambiare rapidamente uno schema di colori e mi avventuro in questo howto di Bootstrap Italia.

Installazione di yarn (package manager)

Per installare il package di playground di Boostrap Italia (un esempio semplice funzionante out-of-the-box) seguire [1].

C’è bisogno di utilizzare il package manager Yarn, ma non mi funziona quanto detto in [2] per cui trovo in rete questo howto che invece funziona:

marcob@jsbach:~/Scaricati$ mkdir yarn
marcob@jsbach:~/Scaricati$ cd yarn/
marcob@jsbach:~/Scaricati/yarn$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
[sudo] password di marcob: 
OK
marcob@jsbach:~/Scaricati/yarn$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
deb https://dl.yarnpkg.com/debian/ stable main
marcob@jsbach:~/Scaricati/yarn$ sudo apt-get update
marcob@jsbach:~/Scaricati/yarn$ sudo apt-get install yarn -y

Compilazione di Bootstrap Italia Playground

Mi muovo quindi all’interno della directory bootstrap-italia-playground (che ho scaricato da [1]):

marcob@jsbach:~/IdeaProjects/grails$ cd bootstrap-italia-playground/

e lancio l’installazione dell’applicazione con yarn

marcob@jsbach:~/IdeaProjects/grails/bootstrap-italia-playground$ yarn install
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
$ mkdir -p ./deps && cp -R ./node_modules/bootstrap-italia/dist/ ./deps/bootstrap-italia && cp -R ./node_modules/jquery/dist/ ./deps/jquery && cp -R ./node_modules/popper.js/dist/ ./deps/popper.js
Done in 4.82s.

Quindi avvio il server

marcob@jsbach:~/IdeaProjects/grails/bootstrap-italia-playground$ yarn start
yarn run v1.22.19
$ yarn prepare && http-server .
$ mkdir -p ./deps && cp -R ./node_modules/bootstrap-italia/dist/ ./deps/bootstrap-italia && cp -R ./node_modules/jquery/dist/ ./deps/jquery && cp -R ./node_modules/popper.js/dist/ ./deps/popper.js
Starting up http-server, serving .

http-server version: 14.1.0

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://10.1.23.54:8080
  http://10.251.0.32:8080
Hit CTRL-C to stop the server
....
[seguono il log di accesso a localhost:8080]

Ora punto il browser a http://127.0.0.1:8080/ e vedo questo:

Personalizzazione

Adesso, come dice l’how-to, posso continuare a leggere [1]. Non manca molto in realtà!

Ah nota bene: avventurarsi a modificare a mano i CSS è come entrare in un roveto ardente: Bootstrap usa una forte parametrizzazione, quindi i valori RGB vengono calcolati (dal colore primario a tutte le sue declinazioni): per cui è più conveniente guardare come funziona.

Per personalizzare i colori di Bootstrap Italia, esamino il file scss/bootstrap-italia-custom.scss, dove il colore $primary è descritto nelle sue componenti HSB (Hue, Saturation, Brightness = Tonalità, saturazione, Luminosità. vedi [5]).

Occorre quindi modificare questi tre parametri a piacimento (questo è il cuore del funzionamento).

Per esempio devo mutare lo schema da blu a verde. Vado quindi, per esempio, in questo sito [4] (ma va bene una qualunque ruota dei colori che si trova in rete) dove scelgo il verde che mi piace, ad esempio quello RBG = #67E098 corrispondente a (H,S,B)=(144,54,88)

Per ottenere una versione personalizzata della libreria quindi:

• Compilare la libreria Bootstrap Italia personalizzata con: yarn build
• La compilazione crea dei file nella cartella css/compiled che vanno referenziati nel file index.html (posso mantenere il vecchio file bootstrap-italia.min.css rinominandolo con .old – oppure mi affido a Git).

Il risultato è immediato:

Bootstrap Italia

Bootstrap Italia è un progetto di Developers Italia, un’iniziativa del Ministro Per l’Innovazione Tecnologica – Dipartimento per la Transizione Digitale + AgID [3]

Risorse

1. Bootstrap Italia
2. Yarn
3. MITD
4. Adobe Color Wheel
5. Coordinate HSB dello spazio colore (Wikipedia)