Tecnologie utilizzate

Il toolkit è basato su alcuni software open source che svolgono diversi task e di cui è bene possedere una conoscenza anche sommaria prima di procedere a modificare i sorgenti.

npm

Il tool npm è utilizzato per la gestione delle dipendenze necessarie sia alla fase di sviluppo / compilazione che per i componenti Javascript integrati lato client (nel browser).

La lista delle librerie utilizzate è visibile nel file package.json.

Prima di incorporare nuove dipendenze è buona pratica verificare se siano già presenti nel registro npm in modo da poterle integrare più agevolmente.

SUIT CSS

SUIT CSS è una metodologia di implementazione per i fogli di stile CSS a corredo di un insieme di utilità che ne facilitano la manutenzione.

Relativamente al toolkit:

1. vengono adottate le convenzioni di nomenclatura SUIT CSS nella stesura del codice dei fogli di stile
2. vengono utilizzate le classi di utilità fornite dalla libreria. Si consiglia in particolare di far riferimento alla documentazione online delle classi SUIT CSS con particolare riferimento alla griglia responsive
3. viene utilizzato il preprocessore CSS di SUIT integrato da un insieme di plugin ad-hoc; è possibile visualizzare la lista dei plugin nel file .postcss.js contenuto nella directory radice del repository.

È possibile consultare l’ elenco e la documentazione di tutte le classi SUIT CSS.

PostCSS

PostCSS è un tool che permette di manipolare i CSS tramite javascript.

I fogli di stile del toolkit vengono trasformati tramite PostCSS: in questo modo è possibile usufruire di alcuni costrutti non standard che agevolano il mantenimento del codice. Puoi far riferimento alla documentazione online dei singoli plugin:

• postcss-devtools
• postcss-easy-import
• postcss-custom-properties
• postcss-custom-media
• postcss-nesting
• postcss-extend
• postcss-color-function
• postcss-inline-svg
• postcss-assets
• postcss-url
• postcss-calc
• autoprefixer
• postcss-pseudoelements
• postcss-flexbugs-fixes
• postcss-reporter

Verifica della sintassi

Per il linting (ovvero, l’analisi del codice in cerca di errori e/o costrutti con sintassi errata) vengono utlizzati i due tool:

• stylelint - per il codice CSS
• ESLint - per il codice Javascript

Generazione della styleguide e dei moduli CSS / JS

Questi due tool sono attivati dagli script npm secondo le modalità descritte nel capitolo successivo: “Utilizzare l’ambiente di sviluppo”:

• fractal è utilizzato per generare la styleguide (l’elenco navigabile dei componenti grafici)
• webpack organizza i moduli CSS / Javascript in modo da poter esser utilizzati in produzione

Non è necessario conoscere il funzionamento di questi software che vengono qui citati per completezza.