Design Angular Kit

Design Angular Kit è un toolkit basato su Bootstrap Italia
per la creazione di applicazioni web sviluppate con Angular.

italia.github.io/design-angular-kit

⚠️ Attenzione: questo codice è ancora in fase di sviluppo e non è pronto per essere utilizzato! Stiamo lavorando all'aggiornamento per portare il kit alla versione 1.0.0, commenti e contributi di tutta la community sono più che benvenuti! Se si necessita della vecchia versione il codice e la sua documentazione possono essere reperiti qua.

Verso la versione 1.0.0 📣

Sono partite le lavorazioni per l'aggiornamento del kit Angular a Bootstrap Italia 2 (basato su Bootstrap 5). Sul branch main potete trovare il codice dei lavori in corso e nella milestone Version 1.0.0 un piano preliminare delle attività. La vecchia versione è da considerarsi deprecata.

👉🏻 È possibile contribuire a questa nuova versione in vari modi:

• Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra le issue di Angular Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).
• Attraverso la segnalazione di bug o miglioramenti al repository ufficiale di Angular Kit.
• Scrivendoci sul canale dedicato di Slack.

Commenti e contributi di tutta la community sono più che benvenuti! 🎉

Link veloci

Preview di Vercel (aggiornata ad ogni commit) | Discussione sulla nuova release | Milestone 1.0.0

Come iniziare

Design Angular Kit è disponibile su NPM, per installarlo su una applicazione esistente sulla quale provare la libreria (attualmente non stabile) esegui il comando

npm install design-angular-kit@unstable --save

Importazione stili bootstrap-italia

Configura gli stili richiesti nel file styles.scss. Importa la libreria SCSS come mostrato nell'esempio qui sotto.

// Importazione libreria SCSS di bootstrap-italia
@import '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';

Come personalizzare e sovrascrivere le variabili di default della libreria (es. colori, font-family, misure, ecc.)

Bootstrap Italia eredita ed estende tutte le variabili di default di Bootstrap, sovrascrivendo alcuni valori in fase di compilazione e impostandone di nuovi all’occorenza. Un esempio fra tutti è il valore del colore $primary che in Bootstrap Italia è rappresentato dal colore blu #0066CC, tipico della libreria.

L’utilizzo del blu #0066CC dovrebbe però essere riservato alle amministrazioni centrali dello Stato, e quindi ci si può trovare nella condizione di dover personalizzare i valori delle variabili colore di Bootstrap Italia, impostando nuovi valori per le proprie necessità.

Questo colore e le altre tonalità vengono generate a partire dalla terna HSB, pertanto occorre modificare le variabili primary-h, primary-s e primary-b. Per avere la corrispondenza tra valore esadecimale del colore e HSB si può utilizzare il portale rgb.to, ad esempio https://rgb.to/0066CC.

Di seguito un esempio di file styles.scss con la personalizzazione dei colori. Le personalizzazioni delle variabili devono sempre essere effettuate prima dell'importazione del file bootstrap-italia.scss

// modifica completa del template: è possibile ricompilare la libreria modificando alcune variabili SCSS

// Per l'override del colore $primary della palette in formato HSB (colore #FF3333 https://rgb.to/ff3333):
$primary-h: 0;
$primary-s: 80;
$primary-b: 100;

// Per l'override della famiglia di caratteri
$font-family-serif: 'Custom Font', Georgia, serif;
$font-family-sans-serif: 'Custom Font', Arial, Helvetica, sans-serif;
$font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;

// Importazione libreria SCSS di bootstrap-italia
@import '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';

Segnalazione bug e richieste di aiuto

Vuoi segnalare un bug o fare una richiesta?

Prima di tutto assicurati che sia un problema relativo al tema Design Angular Kit e non alla libreria Bootstrap Italia da cui deriva (in tal caso puoi fare riferimento al repository di Bootstrap Italia), poi dai un'occhiata a come creare una issue.

Come contribuire

Vorresti dare una mano su Design Angular Kit? Sei nel posto giusto!

Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle linee guida di design per i servizi web della PA, e fai riferimento alle indicazioni su come contribuire a Design Angular Kit.

A questo punto, è necessario impostare il tuo ambiente locale per la compilazione dei file sorgente e la generazione della documentazione:

1. Clonare il progetto

git clone https://github.com/italia/design-angular-kit.git

2. Nella cartella di progetto installare le dipendenze

npm i

3. Lanciare l'applicazione in locale

npm run start

4. Per eseguire i test di unità eseguire il comando

npm run test