Di base uikit non crea alcun tipo di conflitto con quello che è il normale funzionamento di Passweb sia lato front end che lato back end permettendoci quindi di poterlo integrare all’interno del sito senza troppi problemi.

In realtà per poter lavorare al meglio è necessario apportare al file uikit.css alcune semplici modifiche relative, essenzialmente, al componente Griglia.

La prima di queste modifiche è dovuta ad alcuni problemi che potrebbero verificarsi tendando di applicare il Componente Griglia, nella sua versione responsiva, ai Componenti Passweb di tipo form, come ad esempio i Componenti “Registrazione Utente” o “Profilo Utente”.

Nei file strutturali di Passweb infatti sono presenti alcune regole, utilizzate per impostare la larghezza dei componenti interni al form, che hanno una priorità maggiore rispetto alle regole definite nel file uikit.css e che dovrebbero essere utilizzate per impostare la larghezza di questi stessi componenti nel momento in cui si dovesse decidere di applicare la Griglia Responsiva di uikit ai form di Passweb.

Il modo più semplice per risolvere questo problema e per poter quindi implementare anche all’interno dei Componenti Passweb “Registrazione Utente” e “Profilo Utente” la Griglia di uikit è il seguente:

• Creare all’interno del file uikit.css una nuova sezione denominata, ad esempio, “Component: Grid per componenti form di Passweb”
• Copiare all’interno di questa nuova sezione tutte le regole presenti all’interno della sezione “Component: Grid” del file uikit.css stesso e sostituire per esse il suffisso uk con un suffisso personalizzato, ad esempio fr

• assegnare l’attributo !important a tutte le regole utilizzate, all’interno della nuova sezione, per impostare la proprietà width dei diversi elementi della griglia. Nello specifico tale attributo andrà aggiunto alle regole presenti:
• Nella sotto sezione “Even grid cell widths”



• Nella sotto sezione “ Sub-objects: fr-width-*”



In questo modo potremo poi implementare la Griglia di uikit all’interno dei Componenti Passweb di tipo form (“Registrazione Utente”, “Profilo Utente” ecc…) operando esattamente allo stesso modo in cui si opererà per implementare questo stesso componente in una qualsiasi altra pagina del nostro sito Passweb.

L’unica accortezza sarà ovviamente quella di utilizzare per questi Componenti non le classi con suffisso uk ma bensì quelle con suffisso fr

La seconda modifica ci consente invece, di poter lavorare al meglio nel Live Editing di Passweb e consiste nell’evitare che alcune delle regole relative al componente Griglia di uikit vengano applicate anche all’overlay (riquadro blu) utilizzato nel Live Editing per evidenziare, al passaggio del mouse, i componenti da gestire.

Nello specifico sarà quindi necessario utilizzare il selettore css :not per fare in modo che le regole presenti all’interno della sotto sezione “Even grid cell widths” della sezione “Component: Grid” non vengano applicate agli elementi di classe .component-overlay (che sono effettivamente quelli utilizzati all’interno del Wizard per gestire i riquadri blu di selezione di cui parlavamo prima).



ATTENZIONE! La stessa cosa andrà fatta, ovviamente, anche per le analoghe regole con suffisso fr presenti all’interno della nuova sezione precedentemente creata.

L’ultima modifica, infine, è più che altro un’integrazione del file uikit.css con le regole necessarie per poter assegnare a componenti Passweb quali il Catalogo Ecommerce Offerte / Novità Popolarità Prodotto ecc… un comportamento responsivo secondo la logica propria di uikit stesso.

Per maggiori informazioni relativamente a questo argomento si veda nel dettaglio il capitolo “Griglia e Catalogo Ecommerce” di questa guida

In ogni caso è possibile scaricare il file uikit.css utilizzato nel modello di riferimento, e contenente già tutte le modifiche appena esaminate, all’interno della sezione “Risorse” di questa guida (uikitEc29.css).