Devo vedere come si fa a cambiare rapidamente uno schema di colori e mi avventuro in questo howto di Bootstrap Italia.
Sommario
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/compiledche vanno referenziati nel file index.html (posso mantenere il vecchio filebootstrap-italia.min.cssrinominandolo 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]
Commenti recenti