Arrivati a questo punto della guida abbiamo tutti i concetti e gli elementi necessari per poter effettivamente applicare al nostro progetto un framework come uikit e per iniziare quindi a realizzare il nostro primo sito responsivo.

Concettualmente la procedura da eseguire è estremamente semplice. Si tratta infatti di:

• Caricare tra le risorse del sito tutte le librerie e i file necessari per il corretto funzionamento del framework (css, js e file dei font)

E’ consigliabile, anche solo per una pura questione di ordine, mantenere la stessa struttura di cartelle presente all’interno del file .zip ottenuto dal download del framework.

ATTENZIONE! Il fatto di caricare tutte le librerie del framework tra le risorse, non significa che debbano necessariamente essere tutte utilizzate all’interno del sito.

• Inserire nella sezione < head > di ogni singola pagina i collegamenti alle librerie css e js relative ai soli componenti del framework effettivamente utilizzati in quella stessa pagina.

In questo senso è bene ricordare anche che i componenti javascript di uikit utilizzano jQuery per cui sarà necessario caricare all’interno del proprio sito anche questa libreria.

In generale dovremo quindi verificare che nella sezione < head > di ogni pagina siano presenti, almeno, i collegamenti alle seguenti librerie (ovviamente il percorso dei vari file deve essere adattato alle specifiche del progetto che si sta realizzando)

<link rel="stylesheet" href="uikit.min.css" />

<script src="jquery.js"></script>

<script src="uikit.min.js"></script>

In questo modo avremo la certezza di poter utilizzare tutti gli elementi di base del framework.

Nel caso in cui dovessimo poi utilizzare all’interno di una certa pagina anche alcuni dei componenti avanzati, allora oltre alle librerie sopra indicate dovranno essere inseriti anche i collegamenti alle specifiche librerie del componente, facendo ovviamente attenzione, per quel che riguarda le librerie javascript, all’ordine di inclusione.

Supponendo, ad esempio, di voler utilizzare il componente avanzato Slider, dovremo allora inserire anche i collegamenti alle librerie slider.css e slider.js (meglio se nella loro versione minificata).

Nella sezione < head > della pagina dovranno quindi essere presenti i seguenti collegamenti:

<link rel="stylesheet" href="uikit.min.css" />

<link rel="stylesheet" href="components/slider.min.css" />

<script src="jquery.js"></script>

<script src="uikit.min.js"></script>

<script src="components/slider.min.js"></script>

ATTENZIONE! Le librerie js relative ai componenti avanzati devono essere incluse dopo la libreria di base uikit.js

• Impostare il viewport del sito

Uikit è concepito per funzionare secondo l’approccio mobile first ed è perfettamente responsivo per cui in ogni progetto che lo utilizza è necessario includere il meta tag viewport con questi parametri

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Definire il markup dei componenti come previsto dal framework
• Assegnare ad ogni componente la relativa classe CSS e/o i relativi attributi secondo quanto previsto dalle specifiche di funzionamento del componente stesso

Ora se per i primi 3 punti si tratta, più che altro, di operazioni preliminari, gli ultimi due identificano invece quello che è il vero e proprio utilizzo del framework.

Ogni componente deve avere un suo ben preciso markup HTML dal quale non si può prescindere. La formattazione grafica e le funzionalità, a livello di interazione utente, del componente sono determinate invece dalle specifiche classi CSS e/o dagli specifici attributi HTML che gli vengono assegnati.

In definitiva dunque, posto di aver eseguito correttamente tutte le operazioni preliminari, per poter utilizzare un qualsiasi componente del framework all’interno del nostro sito dovremo, molto semplicemente, riprodurre il suo markup HTML e assegnargli le classi CSS e/o gli attributi HTML corretti.

Per i dettegli relativamente al markup HTML di uno specifico componente, alle classi CSS o agli attributi HMTL necessari per poter attivare determinate configurazione del componente oltre che per esempi di funzionamento, si consiglia di fare sempre riferimento alla documentazione ufficiale presente sul sito del progetto http://getuikit.com/index.html, documentazione questa alla quale faremo effettivamente riferimento anche nei successivi capitoli di questa guida.