Phantom Theme Generator by Interfase

Steup progetto

Setup ambiente node:

npm install

Setup Bootstrap Italia package (il comando clona il repo ufficiale https://github.com/italia/bootstrap-italia dentro src/ e installa le sue dipendenze):

npm run bootstrap

IMPORTANTE !!

Prima di lanciare la compilazione ricordarsi di cambiare in src/bootstrap-italia/src/js/bootstrap-italia.entry.js la prima riga che specifica l'entry file dello stile.

Modificare con il nome del file custom in cui abbiamo modificato e/o sovrascritto gli stili, in questo caso bootstrap-italia-custom.scss, che viene copiato in automatico dentro il progetto con i comandi di cui sotto.

Compilazione SCSS di Bootstrap con le variabili dei Token e modifiche custom

Prima, copia i file coi Figma Tokens dentro la cartella tokens/, solitamente i file utili sono 3:

• global.json con stile generale e variabili da riutilizzare nei semantici (light, dark, etc)
• semantic.json che compila le variabili per i vari elementi e tipologie
• theme_phantom_agid.json che definisce specifiche del sito, come colori font e spacing

Per generare e compilare tutti gli SCSS insieme:

npm run compile

Nel dettaglio

Il comando precedente esegue i seguenti comandi in ordine:

• Per convertire i tokens Figma in variabili nel file src/scss/_generated.scss:

npm run generate

• Per copiare tutti i file scss del progetto e font addizionali dentro le cartelle di bootstrap-italia (src/scss e src/fonts):

npm run copy

• Per compilare tutti i file default di bootstrap-italia e quelli custom copiati dentro che contengono le proprietà sovrascritte:

npm run build

Eseguili singolarmente se servono funzionalità specifiche.

Come modificare i file di stile

Il file bootstrap-italia-custom.scss ha già diverse modifiche specifiche per adattarsi al sistema Phantom.

Dopo la prima build, vai al file src/main.js per scommentare le righe di import per il JS di Bootstrap (funziona solo dopo la prima build, includendo i file js senza build sembra non avere tutte le funzionalità corrette tipo Accordion ecc ecc).

(Opzionale) Puoi anche scommentate l'import per bootstrap-italia/dist/css/bootstrap-italia.min.css ed utilizzare il file bootstrap-italia-custom.scss in src/ per vedere le modifiche al volo senza dover ricompilare ogni volta.

Binding delle variabili

Dentro src/scss, i primcipali file da modificare sono:

• bootstrap-italia-custom.scss È diviso in più sezioni: prima l'override delle variabili per creare connessioni tra i tokens e quelle disponibili offerte in variables.scss.
  Poi l'import di tutti i file di bootstrap-italia che le utilizzano, e infine un override diretto degli stili con aggiunta di regole dove necessario.
  Di default è incluso generated-example.scss come reference di quali variabili derivanti dai token sono necessarie per far funzionare la compilazione correttamente, in caso di nuove variabili definire il binding a mano.
  Se il file generato dai tokens _generated.scss contiene tutto il necessario, inserirlo al posto dell'esempio.

• _variables.scss : questo file è uno già presente in bootstrap al momento dell'installazione, ma no tutte le sue variabili sono segnate dal flag !default. Questo significa che non sono sovrascrivibili nel file custom, quando si trova una variabile di questo tipo, aggiungere il flag e versionare il file (si potrebbero segnare tutte come !default ma lavoro inutile per adesso).

• Anche i singoli file di stile potrebbero avere dei problemi, con delle regole di stile a cui diventa necessario legare delle variabili, ma che in originale non sono state pensate. Per questo in fondo al file bootstrap-italia-custom.scss sono presenti degli override scss.
  NON modificare mai i file singoli dentro l'alberatura scss, perchè verrebbero sovrascritti da nuovi aggiornamenti o potrebbero causare conflitti, invecere meglio rintracciare dove va fatta la modifica, copiare lo stile qui e modificare solo il necessario per lo stile Phantom.

Font

Per ogni nuovo Font aggiunto alle opzioni del tema, creare una cartella col suo nome in src/fonts e definirne correttamente le regole dentro src/scss/_typography.scss.

Restart progetto

Dopo ogni modifica alle variabili, binding o stili puoi rilanciare il progetto con il seguente comando. Attenzione questo comando non genera nuovamente le variabili dai tokens, semplicemente ricopia gli stili scss modificati, crea una nuova build ed esegue il progetto.

npm run start

Puoi anche chiamare il seguente comando per pulire la build bootstrap-italia/dist:

npm run clean

Check styling on localhost

Dopo ogni build, puoi controllare lo stile generato dalle regole nel frontend Vue, mentre è attivo il progetto /about:

npm run serve

Il comando precedende start esegue automaticamente anche questo dopo la build.