Utilizzare l’ambiente di sviluppo¶
La procedura qui descritta è rivolta sia a chi vuole contribuire allo sviluppo del toolkit sia a chi vuole utilizzare il CSS personalizzato all’interno di un sito web per realizzare quindi un “tema” grafico specifico.
Ottenere i sorgenti¶
Per ottenere i sorgenti puoi scaricare direttamente l’archivio compresso da GitHub.
Un’alternativa migliore è il download dei sorgenti tramite il software di versionamento Git; dopo aver installato Git puoi effettuare una copia locale del repository digitando da linea di comando:
git clone https://github.com/italia/ita-web-toolkit
L’utilizzo di Git permette di mantenere i sorgenti sincronizzati con i nuovi rilasci del toolkit nonché di contribuire al progetto proponendo di incorporare le proprie modifiche nella linea principale di sviluppo, vedi anche:
Installare il software richiesto¶
Per poter compilare i sorgenti (CSS / JS) è richiesta l’installazione di Node.js / npm.
Terminata l’installazione, la seguente sequenza di comandi eseguiti all’interno della directory del toolkit completerà il download e l’installazione delle librerie richieste per lo sviluppo:
npm install
Compilare i sorgenti¶
Dopo aver eseguito il comando
npm run build
la directory build conterrà i file CSS e Javascript compilati.
Modificare i sorgenti¶
Per poter visualizzare la styleguide in locale (i template HTML con i diversi componenti grafici)
puoi sostituire come ultimo passaggio (al posto di npm run build) il comando
npm run watch
e visitare con il browser la pagina http://localhost:1310
A questo punto puoi modificare i sorgenti: qualsiasi modifica effettuata ai fogli di stile CSS,
Javascript e/o template HTML mentre npm run watch rimane in esecuzione risulterà immediatamente visibile
nel browser senza dover ricaricare manualmente la pagina o lanciare il comando di build.