Una pattern library è una raccolta di componenti di interfaccia che appaiono più volte su un sito e li documenta tutti definendo come si comportano, che aspetto hanno e come sono sviluppati.
Perchè una pattern library?
Molti elementi (design / branding / sviluppo) possono essere riutilizzati in più progetti. La pattern library fornisce una fonte di verità in cui sviluppatori e designer possono facilmente trovare e utilizzare le componenti esistenti per accelerare il loro lavoro, soddisfare i requisiti di accessibilità e garantire un aspetto coerente tra i progetti.
Come si usa
Ogni componente è costituita da:
- una parte descrittiva che ne spiega il corretto funzionamento ed eventuali sottocomponenti o casi d'uso;
- un'anteprima che consente di visualizzare la corretta UI;
- il markup HTML per riprodurre la componente indipendentemente dal contesto d'uso.
Alcune componenti sono estese tramite sintassi BEM, per questo a volte è possibile trovare la dicitura [modifier class] che indica le possibili estensioni e modificatori della componente.
Ogni sezione ha un link specifico (visualizzabile cliccando sul titolo della sezione stessa) che può essere utilizzato come riferimento alla componente in strumenti esterni alla pattern library.
La sintassi BEM
La sintassi utilizzata nelle componenti è BEM (http://getbem.com/introduction/) in cui l'uso dei caratteri -- indica un modifier anche detto "estensione della componente" e dei caratteri __ per gli elementi che costituiscono la componente stessa.
I file SASS
Tutti i fogli di stile sono in formato SASS (https://sass-lang.com/) e necessitano di essere compilati lato server nel formato CSS per poter essere renderizzati dalla pagina web. La sintassi SASS permette l'uso di variabili e funzioni avanzate utili al riutilizzo delle componenti stesse e alla gestione dei temi presenti nel progetto Inbank.
