Salta al contenuto principale

it Web ToolKit

  • Accordion

    Componente per la visualizzazione di sezioni espandibili e richiudibili al click.

  • Alert

    Il Web Toolkit definisce 4 tipologie di Alert: Error, Warning, Success e Info. L'inserimento può avvenire tramite codice HTML oppure utilizzando l'apposito pulsante nell'editor TinyMCE.

  • Background

    u-background-black

    u-background-white


    u-background-5

    u-background-10

    u-background-20

    u-background-30

    u-background-40

    u-background-50

    u-background-60

    u-background-70

    u-background-80

    u-background-90

    u-background-95


    u-background-teal-30

    u-background-teal-50

    u-background-teal-70


    u-background-grey-10

    u-background-grey-20

    u-background-grey-30

    u-background-grey-40

    u-background-grey-50

    u-background-grey-60

    u-background-grey-80

    u-background-grey-90

    u-background-compl

    u-background-compl-5

    u-background-compl-10

    u-background-compl-80

  • Callout

    Il Web Toolkit definisce 4 tipologie di Callout: Must, Should, Could, Example. L'inserimento può avvenire tramite codice HTML oppure tramite l'apposito pulsante nell'editor TinyMCE.

  • Carousel Module 3.8 Alpha 1 Released for Testing

    Rilasciata la prima alpha release del modulo Carousel per Joomla! basato su Web Toolkit Styleguide

  • Color

    u-color-black

    u-color-white


    u-color-5

    u-color-10

    u-color-20

    u-color-30

    u-color-40

    u-color-50

    u-color-60

    u-color-70

    u-color-80

    u-color-90

    u-color-95


    u-color-teal-30

    u-color-teal-50

    u-color-teal-70


    u-color-grey-10

    u-color-grey-15

    u-color-grey-20

    u-color-grey-30

    u-color-grey-40

    u-color-grey-50

    u-color-grey-60

    u-color-grey-80

    u-color-grey-90

    u-color-compl

    u-color-compl-5

    u-color-compl-10

    u-color-compl-80

    u-color-compl

    u-color-compl-5

    u-color-compl-10

    u-color-compl-80

  • Dialog

    Il Web Toolkit mette a disposizione il componente Dialog per la visualizzazione di finestre modali per mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

  • Entrypoint

    Componente di navigazione basato su tiles (piastrelle)


    Nella versione base le tiles vengono disposte 3 per riga. In modalità mobile vengono disposte su una unica colonna.

    Si tratta di un menu ad un solo livello associato ad un modulo con layout Entrypoint.

    Di default il colore della singola tile è u-background-compl-80 e dipende dal tema scelto. Il colore può essere modificato intervenendo su Classe CSS del link della singola voce di menu.

    Classe CSS del link = li:u-background-95

    L'elenco dei colori disponibili per il background è consultabile qui. Background


    La variante multilivello permette di disporre più tiles in colonna sulla stessa riga.

    Bisogna strutturarlo con voci di menu di sistema “separatore” che permettono di distribuire gli Entrypoint su più colonne separate (nell'esempio tre colonne differenti).


    Per rendere il nostro Entrypoint più accattivante aggiungiamo qualche dettaglio nella formattazione.

    Possiamo modificare dimensione e colore del carattere agendo sul parametro Classe CSS del link della singola voce di menu.

    Classe CSS del link = u-textClean u-color-white u-text-r-m

    Anche nel caso delle voci entrypoint è possibile aggiunge una icone agendo sul campo Classe Immagine della singola voce di menu.

    Classe Immagine = Icon Icon-user

    L'elenco delle icone disponibili è consultabile qui: Icone

    Nel caso si voglia dare particolare importanza ad una voce di menu è possibile associare una immagine. Siccome di default l'immagine è posta a sinistra del titolo del link, tramite il parametro Classe CSS del link è possibile modificarne la formattazione.

    Classe CSS del link = li:u-textCenter li:u-imageTitleNoWrap

    li:u-textCenter allinea immagine e testo al centro mentre li:u-imageTitleNoWrap posizione il titolo su una sola linea.

    Ultimo dettaglio la possibilità di formattare le singole colonne affinché occupino tutto lo spazio disponibile.

    Il risultato può essere ottenuto lavorando sulle singole voci di menu oppure aggiungendo la classe u-flex al parametro Suffisso classe menu del modulo

    Suffisso classe menu = u-flex

  • Leads

    Il Web Toolkit definisce il componente Leads come una lista orizzontale di link; generalmente è usato per presentare una serie di link utili. Nel template ItaliaPA ai menù "leads" è assegnata una posizione specifica, posta in fondo alla pagina, prima del footer.

    Link utili


    Nella versione base il lead è costituito da una lista orizzontale di link testuali.

    Link utili

    Si tratta di un menu ad un solo livello associato ad un modulo con layout Lead.

    menu ad un solo livellomodulo menu con layout lead

    Le singole voci sono link testuali.

    voce di menu testuale


    Una versione un po' più accattivante può essere realizzata utilizzando immagini al posto dei testi./p>

    Link utili

    Anche in questo caso le voci di menu sono tutte simili e semplici da creare

    voce di menu grafica

    Basta inserire l'Immagine menu e disabilitare la voce Aggiungi titolo menu.


    Il modulo fin qui creato è anche responsive, ma bisogna fare molta attenzione.

    modulo lead in versione mobile

    Come si può vedere, le dimensioni eccessive delle immagini "rompono" la visualizzazione responsive su dispositivi mobile. Serve quindi un piccolo accorgimento per dire al modulo di ridimensionare le immagini nel caso siano troppo grandi. 

    suffisso classe CSS modulo = Arrange-sizeFil

    In questo caso basta aggiungere il suffisso classe CSS modulo Arrange-sizeFill, come mostrato in figura.

  • Modulo Cookiebar

    Il modulo Cookiebar visualizza il banner informativo sull'utilizzo dei cookie all'interno del sito web.

  • Plugin System - ItaliaPA Toolbar for TinyMCE

    L'inserimento dei componenti previsti da it web toolkit, tra i quali accordion, alert, callout, sottoforma di codice HTML, è una operazione abbastanza laboriosa e complessa. Questo potrebbe scoraggiare o impegnare oltre misura chi deve creare e aggiornare i contenuti del sito web. Per semplificare l'inserimento dei contenuti ci viene in aiuto plugin System - ItaliaPA Toolbar for TinyMCE, la toolbar Joomla! specifica per TinyMCE.

  • Rilasciato Modulo Carousel 3.8 Alpha 2

    Rilasciata la seconda alpha release del modulo Carousel per Joomla! basato su Web Toolkit Styleguide

  • Rilasciato Modulo Carousel 3.8.3 beta

    Il Modulo Carousel entra nella fase beta di sviluppo. Si tratta di una versione completamente riprogettata.

  • Rilasciato Template ItaliaPA 3.8 Alpha 11

    Rilasciata la undicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione che corregge alcuni bug, include miglioramenti e nuove funzionalità.

  • Rilasciato Template ItaliaPA 3.8 Alpha 12

    Rilasciata la dodicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione che corregge alcuni bug, include miglioramenti e nuove funzionalità.

  • Rilasciato Template ItaliaPA 3.8 Alpha 13

    Rilasciata la tredicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione che corregge alcuni bug, include miglioramenti e nuove funzionalità.

  • Rilasciato Template ItaliaPA 3.8 Alpha 14

    Rilasciata la quattordicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione orientato alla accessibilità, include miglioramenti, nuove funzionalità e la correzione di alcuni bug.

  • Rilasciato Template ItaliaPA 3.8 Alpha 15

    Rilasciata la quindicesima alpha release del Template ItaliaPA 3.8. Si tratta di un rilascio di manutenzione che include miglioramenti, nuove funzionalità e la correzione di alcuni bug.

  • Rilasciato Template ItaliaPA 3.9 Alpha 17

    Rilasciata la diciassettesima alpha release del Template ItaliaPA 3.9. Si tratta di un rilascio di manutenzione che include nuove funzionalità, miglioramenti e la correzione di alcuni bug.

  • Spaziatura

    Elenco completo delle classi per la gestione della spaziatura: 'padding' e 'margin'

    Assegna agli elementi i valori di margin o di padding con le classi apposite per le singole proprietà. Le dimensioni delle spaziature possono variare da .4rem a 4rem. Questo si traduce in valori compresi tra 4px e 40px, visto che il Web Toolkit usa un font-size di base di 10px sia per dispositivi mobili che per dispositivi desktop.

    Le classi sono denominate utilizzando il formato u-{proprietà}-{lato}-{dimensione}

    Dove la proprietà è una tra:

    • margin - per le classi che impostano margin 
    • padding - per le classi che impostano padding 

    Dove lati è uno tra:

    • top - per le classi che impostano  margin-top o padding-top
    • bottom - per le classi che impostano  margin-bottom o padding-bottom 
    • left - per le classi che impostano  margin-left o padding-left 
    • right - per le classi che impostano  margin-right o padding-right 

    Dove la dimensione è una tra:

    • xxs per le classi che impostano margin o padding a 0.4rem
    • xs per le classi che impostano margin o padding a 0.8rem
    • s per le classi che impostano margin o padding a 1.6rem
    • m per le classi che impostano margin o padding a 2rem
    • l per le classi che impostano margin o padding a 2.4rem
    • xl per le classi che impostano margin o padding a 3.2rem
    • xxl per le classi che impostano margin o padding a 4rem

    u-padding-top-xxs

    u-padding-top-xs

    u-padding-top-s

    u-padding-top-m

    u-padding-top-l

    u-padding-top-xl

    u-padding-top-xxl

    u-padding-right-xxs

    u-padding-right-xs

    u-padding-right-s

    u-padding-right-m

    u-padding-right-l

    u-padding-right-xl

    u-padding-right-xxl

    u-padding-bottom-xxs

    u-padding-bottom-xs

    u-padding-bottom-s

    u-padding-bottom-m

    u-padding-bottom-l

    u-padding-bottom-xl

    u-padding-bottom-xxl

    u-padding-left-xxs

    u-padding-left-xs

    u-padding-left-s

    u-padding-left-m

    u-padding-left-l

    u-padding-left-xl

    u-padding-left-xxl

    u-padding-all-xxs

    u-padding-all-xs

    u-padding-all-s

    u-padding-all-m

    u-padding-all-l

    u-padding-all-xl

    u-padding-all-xxl

    u-margin-top-xxs

    u-margin-top-xs

    u-margin-top-s

    u-margin-top-m

    u-margin-top-l

    u-margin-top-xl

    u-margin-top-xxl

    u-margin-right-xxs

    u-margin-right-xs

    u-margin-right-s

    u-margin-right-m

    u-margin-right-l

    u-margin-right-xl

    u-margin-right-xxl

    u-margin-bottom-xxs

    u-margin-bottom-xs

    u-margin-bottom-s

    u-margin-bottom-m

    u-margin-bottom-l

    u-margin-bottom-xl

    u-margin-bottom-xxl

    u-margin-left-xxs

    u-margin-left-xs

    u-margin-left-s

    u-margin-left-m

    u-margin-left-l

    u-margin-left-xl

    u-margin-left-xxl

    u-margin-all-xxs

    u-margin-all-xs

    u-margin-all-s

    u-margin-all-m

    u-margin-all-l

    u-margin-all-xl

    u-margin-all-xxl