Cambiare skin all’applicazione con Bootstrap Italia

Spread the love

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:

bootstrap-italia playground
bootstrap-italia playground

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-verde
bootstrap-italia-verde

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)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.