ita-button V2
Il progetto nasce dall'esigenza di poter utilizzare i bottoni per le autenticazioni SPID / CIE / eIDAS / IDEM ed eduGAIN con siti "non bootstrap 4' senza reinventare la ruota.
Il progetto non è AGID e non sostituisce il bottone ufficiale spid-sp-access-button, il progetto si prefige soltanto di provare ad ottenere un risultato simile con un codice più semplice e generico.
- creare un set di bottoni indipendente da ogni framework css;
- creare uno standard unico compatibile con i vari bottoni (SPID / CIE / ecc.);
- non richiedere js per il funzionamento del bottone;
- supportare l'inserimento statico delle voci di dropdown (idps SPID);
- supportare l'inserimento dinamico delle voci di dropdown via js (idps SPID circ. 41);
- creare un css il più piccolo possibile;
- mantenere un elevato livello di coerenza indipendentemente dal framesowrk css utilizzato.
- Utilizzare soltanto dimensioni relative (em o rem) per rendere i bottoni coerenti con il resto del sito;
- Facilitare l'utilizzo limitando al minimo il numero dei tag necessari alla struttura;
- Non richiamare asset dal css per non limitare i programmatori nella posizione degli asset;
- Eliminare il rischio di conflitti tra classi CSS definendo gli stili a partire da un contenitore principale
itaed aggiungendo il prefissoita-a tutte le classi del progetto; - Gestire tutte le classi opzionali di configurazione nel contenitore printipale;
- Non vincolare le classi ad elementi specifici (es: a, button, span);
- Sviluppare con usabilità ed accessibilità in testa.
- Il bottone diventa flex per mantenere meglio proporzioni e rapporti con lo scalare dello schermo;
- Nuova classe 'ita-extended' per occupare tutta la larghezza del contenitore contenitore;
- Nuova classe 'ita-shadowed' per aggiungere l'ombra al bottone e toglierla al passaggio del mouse (effetto pulsante);
- Nuove configurazioni sass;
- Nuova classe 'ita-content' per rinchiudere il testo e mantenerlo al centro anche variando la larghezza del bottone.
- src/index.html tutte le varianti di bottoni senza alcun framework css
- src/index-bootstrap.html Pagina di esempio con Bootstrap 5
- src/index-bulma.html Pagina di esempio con Bulma
- src/index-tailwind.html Pagina di esempio con tailwind
Il progetto ita-button si divide in due componenti:
- un css disponibile in formato sass e minified.
- un css per il caricamento del font Titillium Web. opzionale
- un modulo javascript per il caricamento remoto degli idps spid disponibile in formato minified e come modulo. opzionale
- copia delle immagini degli ipd spid e dei loghi SPID, CIE, eIDAS e IDEM per la composizione dei bottoni
Di seguito sono riportate le istruzioni per alcune tipologie di di installazione.
Nella directory dist sono archiviati i file minified dei css, del js e del font; Nella directory dist/img sono archiviate le immaggini svg minified dei loghi Nella directory src/img sono disponibili i sorgenti originali dei loghi utili alla composizione dei bottoni.
all'interno dell'header della pagina web è necessario collegare il css printipale ed eventualmente il font Titillium Web e il js per il caricamento degli idp SPID.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="../dist/ita.min.css" />
<link rel="stylesheet" href="../dist/ita-font.min.css" />
<script src="../dist/ita.min.js"></script>
</head>
...ita-button è disponibile anche come modulo NPM.
Per installarlo tramite yard eseguire il comando yarn add ita-button, per installarlo tramite npm npm install ita-button.
E' possibile includere includere gli stili in sass con il seguente codice:
// stile principale
@import 'ita-button/ita'
// Font titilium aggiuntivo
@import 'ita-button/src/css/ita-font'E' possibile includere ed eseguire il modulo js per il caricamento remoto degli idp con il seguente codice:
import { Ita } from 'ita-button/ita'
var ita = new ItaMaggiori dettagli sono disponibili nel documento di ita.mjs
Ogni bottone è composto da una classe contenitore principale ita con all'interno un elemento ita-button che contiene l'immagine ed il testo del bottone.
Il contenitore principale può opzionalmente avere al suo interno un elemento ita-menu con il contenuto del menù dropdown.
<div class='ita'>
<a class="ita-button" href="#">
<img src="img/cie.svg" alt="CIE Logo">
<span class="ita-content">Entra con CIE</span>
</a>
</div> <div class='ita ita-dropdown'>
<button class="ita-button">
<img src="img/spid.svg" alt="SPID logo">
<span class="ita-content">Entra con SPID</span>
</button>
<div class='ita-menu' role='menu'>
<a href="#"><img src="img/spid-idp-timid.svg" alt="TIM Trust Technologies srl"></a>
</div>
</div>L'elemento ita-menu è nascosto (display: hidden) se il bottone o la classe stessa non sono in focus o il contenitore non è in hover. E' possibile forzare la visibilità aggiungendo la classe ita-active alla classe contenitore.
<div class='ita ita-dropdown ita-active'>...</div>- ita-fixed fissa la larghezza dei bottoni a 13em (lunghezza del bottone IT Wallet)
- ita-extended estende il bottone alla dimensione del contenitore
- ita-shadowed Aggiunge l'ombra al bottone
- ita-hover rende il dropdown visibile al passaggio del mouse
- ita-l Bottone ridimensionato con i font impostati a 1.5rem
- ita-xl Bottone ridimensionato con i font impostati a 2rem
- ita-xxl Bottone ridimensionato con i font impostati a 2.5rem
- ita-xxxl Bottone ridimensionato con i font impostati a 3rem
- ita-m05 Aggiunge un margine di 0.5rem al bottone
- ita-mb05 Aggiunge margin-botton di 0.5rem al bottone
- ita-mt05 Aggiunge margin-top di 0.5rem al bottone
Il repository contiene ita.mjs una versione modificata del file spid-idps.js di spid-sp-button. Lo script è stato adattato alla struttura di questa versione dei bottoni, è stato rinchiuso in un modulo importabile ed è stato reso completamente configurabile.
Tutte le definizione dei bottoni sono inserite nel file ita.min.css generato dal file ita.sass. E' possibile caricare il css nel proprio sito aggiungendo il seguente tag all'interno dell'header della pagina:
<head>
...
<link rel="stylesheet" href="css/ita.css" />
</head>Il font Titilium Web è il font tipografico istituzionale per l'italia, in ita-button è considerata una dipendenza esterna non obbligatori (non è richiamato dal css) in quanto non sussiste obbligo d'uso. I bottoni in sequenza utilizzano i seguenti font family in sequenza: "Titillium Web", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", "sans-serif". E' comunque possibile personalizzare i font dei bottoni modificando la variabile $fonts in ita.sass.
Nella directory css è disponibile il file aggiuntivo ita-font.css che permette di caricare il font Titilium Web regular disponibile sempre nella directory src/css. Per caricare il font aggiungere il seguente codince nell'head della pagina
<head>
...
<link rel="stylesheet" href="css/font.css" />
</head>Tramite il file ita.sass è possibile creare nuove varianti di colore dei bottoni popolando la variabile $colors.
Per esempio popolando la cariabile con i seguenti valori si creeranno le classi ita-orange e ita-black con i colori memorizzati
$colors: (orange: #d77e29, black: #000)Altre variabili configurabili sono:
- $fonts: font da utilizzare nel bottone - default: Titillium Web
- $gray: Grigio utilizzato per i bordi del dropdown - default:
#dedede - $ita-bg: Background del bottone (se non indicate varianti) - default:
#06c - $light: background link on hover per il dropdown - default:
#f0f0f0 - $margin: Margine utilizzato con le classi specifiche (ma, mb, mt) - default: 0.5rem
- $radius: radius bordi dei bottoni - default: 0.375rem
- $shadow: Ombra utilizzata per il bottone (se attiva la classe
ita-shadowed) e per il dropdown - $white: colore utilizzato per il testo del bottone e come sfondo del dropdown
- Il contenitore principale
itanon dove essere necessariamente undiv, se inserite il bottone all'interno di un testo o di un paragrafo dovete utilizzare il tagspan. Es:<div class='ita'><a class="ita-button" href="#">...</a></span> - Per mantenere una buon livello di usabilità è necessario distanziare i bottoni fra di loro e dagli altri link, altrimenti risulterà complesso schiacciare il bottone giusto. Potete utilizzare la classe
ita-maper aggiungere un margine al bottone e distanziarlo dagli altri elementi. es:<div class='ita ita-ma>...</div>. In oltre avete a disposizione anche le classiita-mbper aggiungere il margine soltanto in basso edita-mtper metterlo soltanto in alto. - Tutti i tag
imgdevono avere l-attributoaltpopolato, altrimenti l'immagine risulterà invisibile per tutte le persone che utilizzano un programma di lettura automatica. Es:<img src="img/spid.svg" alt="SPID logo">. Questa attenzione è indispensabile sia per l'usabilità che per l'accessibilità - Se aggiungete nuove immagini personalizzate verificate che il loro rapporto di altezza e larghezza sia 1:1, per mantenersi alliniate alle altre devono essere quadrate.
- il sistema di importazione degli IDPS è ripreso dal progetto Satosa-Saml2SPID ed è aggiornato con il nuovo sistema definito da spid-sp-button in spid-idps.js