Un tour Whistle-stop del framework UIkit

Mentre Bootstrap e Foundation potrebbero essere i due framework front-end più popolari tra i web designer, in questo articolo ho intenzione di presentarvi le caratteristiche di UIkit, un framework front-end leggero e modulare che utilizzo in quasi tutti i miei progetti.

Nota: Questo articolo presume che tu abbia familiarità con il funzionamento dei framework front-end. Inoltre, l'obiettivo principale di questo articolo non è quello di coprire estesamente singole parti di questo quadro (ad esempio il sistema di griglia). Invece ci concentreremo sulla presentazione breve di diverse utili funzionalità di UIkit. 

Iniziare

UIkit è costruito e gestito da YOOtheme, un'azienda tedesca specializzata nella creazione di temi e applicazioni per il web.

Come scaricare UIkit

Ci sono alcune diverse opzioni disponibili per includere UIkit nei tuoi progetti. Puoi utilizzare un gestore di pacchetti come Bower, una rete di distribuzione del contenuto come cdnjs, oppure puoi scaricarlo manualmente dalla sua pagina GitHub. Nota che UIkit richiede jQuery, quindi assicurati di averlo incluso nei tuoi progetti.

Per gli scopi di questo tutorial, useremo cdnjs per estrarre i file UIkit richiesti nelle demo di CodePen. Il più delle volte, per semplicità, dovremo includere il uikit.min.css e uikit.min.js File. Negli ultimi due esempi, però, aggiungeremo anche alcuni file aggiuntivi che non sono inclusi nel framework principale. Tieni presente che UIkit è modulare, permettendoci di caricare solo i file effettivamente necessari. 

Puoi conoscere la struttura di UIkit in questa pagina. 

Personalizzazione di UIkit

Il framework è completamente personalizzabile. Prima del download, siamo in grado di sovrascrivere i suoi stili predefiniti e applicarne di nostri. Ad esempio, se vogliamo modificare i punti di interruzione predefiniti, possiamo visitare la pagina di personalizzazione e controllare il Modalità avanzata opzione. Da lì, troviamo il I punti di interruzione sezione e aggiungere i nostri nuovi punti di interruzione. Quindi, otteniamo il file CSS appena generato.

Supporto del browser

UIkit funziona in tutti i browser recenti, in particolare: 

Funzionalità UIkit utili 

È giunto il momento di esplorare alcune utili funzionalità di UIkit che potresti voler utilizzare in uno dei tuoi prossimi progetti! 

Flexbox e Griglie

UIkit fornisce i componenti Grid e Flex per creare layout reattivi. Per capire meglio come funzionano questi componenti, creiamo un layout semplice. Prima di farlo, dobbiamo aggiungere il uikit.min.css file per il nostro esempio. 

Ecco i requisiti:

• Nelle finestre fino a 767 px di larghezza, tutte le colonne sono impilate verticalmente.
• Nelle finestre più larghe di 767px, le larghezze della prima e della terza colonna sono il 25% della larghezza genitore, mentre la larghezza della seconda colonna è il 50% della larghezza genitore.

 Il markup si presenta così:

Notare il .carta elementi all'interno delle nostre colonne. Per ragioni stilistiche, applicheremo alcuni stili di base:

.card background: # e0e0e0; imbottitura: 10px; margin-top: 35px; 

Ecco la demo di Codepen:

Come puoi vedere dalla demo sopra (quando la larghezza della vista è maggiore di 767px), il .carta gli elementi non riempiono l'intera altezza del genitore. Supponiamo che vogliamo farlo accadere. 

Una soluzione rapida potrebbe essere quella di fornire elementi target altezza: 100%, destra? Tuttavia, questo non funziona in alcuni browser (ad esempio Safari), quindi dobbiamo abbandonare tale approccio e cercare un'alternativa. Un trucco è definire le colonne come contenitori flessibili dando loro la classe uk-flex. Quindi ora se testiamo di nuovo la pagina, vedremo che il .carta gli elementi ereditano l'altezza genitore. Se si desidera ottenere ulteriori informazioni sul motivo per cui la soluzione funziona, si consiglia di guardare questo thread Overflow dello stack.

Ecco la demo aggiornata:

Creazione di animazioni basate su scorrimento

Se sei un fan delle animazioni basate su scroll apprezzerai sicuramente il componente Scrollspy di UIkit. Questo componente ci consente di attivare animazioni ed eventi mentre scorri su e giù per la pagina. Vediamo un esempio dal vivo per capire come funziona.

Per questo esempio, includeremo il uikit.min.css e uikit.min.js file nel nostro progetto. 

La struttura del codice è simile all'esempio precedente. Il nostro obiettivo qui è di attivare diverse animazioni quando gli elementi con la classe di blu (in totale cinque elementi) entra nel viewport. Per implementare questo comportamento, aggiungiamo il Dati-uk-scrollspy attributo agli elementi di destinazione; il loro valore è un oggetto configurabile che controlla l'animazione effettiva. Ad esempio, il cls la proprietà dell'oggetto memorizza il tipo di animazione:

svg width: 100px; altezza: auto; riempire: marrone; 

div.uk-cover-background background-image: url (IMAGE_PATH);