Guida all’utilizzo di Picnic, una libreria di stili css per il tuo sito web

picnic
Tempo stimato di lettura: 5 minuti, 4 secondi
Pubblicato il 12 luglio 2016

Picnic è una libreria CSS semplice e leggera creata dallo sviluppatore spagnolo Francisco Presencia, che è riuscito a sviluppare una soluzione semplice per realizzare molti effetti accattivanti su diversi elementi di contenuto di un sito web.
Picnic permette di ottenere risultati eccellenti su elementi come pulsanti, checkbox, griglie, input, label, box modali, nav, radio button, select e tanti altri elementi.

VANTAGGI

Picnic non utilizza Javascript, ma prevede anche la possibilità di farlo per migliore l’esperienza utente e l’interattività. È scritta in SCSS con molte variabile e classi, e in modulare: in questo modo puoi comunque modificarla con il tuo codice e puoi facilmente testarne ogni singola parte.

Picnic è anche una libreria responsive molto leggera, perché pesa meno di 10kb e inoltre è stata scritta per fornire la migliore esperienza mobile per cellulari e tablet.

Compatibile con Internet Explorer da IE9+ e superiori non lo è invece con IE8 e con Fancybox. L’unico svantaggio che Picnic ha è quello di utilizzarla successivamente in progetti già cominciati; è consigliabile utilizzarla sin dal principio per non avere nessun tipo di problema.

COME INSTALLARE PICNIC

Picnic può essere installata in 2 modi diversi:

1) tramite i file CDN aggiungendo il link nell’header:

https://cdn.jsdelivr.net/picnicss/6.1.1/picnic.min.css o scaricando direttamente il file.

2) scaricando l’ultima versione da Github.

Nella documentazione trovi il codice html da inserire in modo modulare e quindi in base al contenuto che devi usare nel sito web.

ALCUNI ESEMPI

In questo articolo mostro come Picnic viene utilizzato su alcuni elementi che difficilmente si possono realizzare con i css e che migliorano notevolmente il design e la funzionalità di un sito web. Ho realizzato per voi un esempio che riguarda 5 elementi: box modali, caricamento di un immagine, tooltips, griglie e gallerie immagini.

#1 –  BOX MODALI O MODALS

I box modali sono delle finestre che si aprono all’interno della stessa pagina dopo aver cliccato un pulsante e che ti danno maggiori informazioni su un determinato argomento.

Il codice html da inserire per i box modali è:

La struttura è particolare perché il box è creato con un tag “article” che al suo interno ha un “header”, una “section” e un “footer”. Cliccando sul pulsante chiudi, il box si chiude.

#2 – CARICAMENTO DI UN IMMAGINE O DROP IMAGE

L’invio e il caricamento di un’immagine è un elemento molto complicato da realizzare con i css ma anche con Javascript. Con questa libreria tutto diventa semplice inserendo questo codice nell’html:

In questo modo puoi aggiungere un’immagine, ma non riesci a vederla nel box con l’icona della macchina fotografica. Per visualizzare l’immagine caricata devi aggiungere un po’ di codice javascript alla fine della pagina html:

Adesso carica l’immagine e potrai vedere l’immagine caricata nella pagina. È tutta un’altra cosa, vero?

Il box grigio con la camera è la finestra di visualizzazione della tua immagine. L’immagine non verrà ridimensionata, ma visualizzata nella grandezza della larghezza del box grigio con l’icona dell’immagine. La finestra può essere modificata e trasformata in qualunque dimensione, può essere ovale o quadrata.

#3 – TOOLTIPS O TESTO DI SUPPORTO

I tooltips sono dei piccoli box con un testo di supporto che quindi ci danno ulteriori informazioni.
Il codice html da utilizzare è :

Questo codice prevede tooltips che appaiono in qualsiasi posizione del pulsante e precisamente: superiore, destra, inferiore, sinistra.

#4 – GRIDS

Le griglie utilizzano un linguaggio semplice e intuitivo, sono responsive e utilizzano 12 colonne come la maggior parte dei framework.
La classe “.flex” ha sostituito la classe “.row” e dispone i contenitori figli in modo uguale per riempire tutto il suo contenitore padre. Questo funziona solo con i figli o colonne tutte uguale e della stessa dimensione. Se invece hai la necessità di realizzare una colonna più grande rispetto alle altre devi aggiungere delle classi che corrispondono al numero delle colonne. Quindi, se vuoi inserire 3 colonne uguali, devi aggiungere il numero 3 in inglese “three”; se vuoi crearne 12, non devi inserire nessuna classe, perché automaticamente ne crea 12 e così via.

Se inserisci meno colonne puoi anche centrarle utilizzando la classe center:

Adesso possiamo modificare la griglia e i suoi elementi come vogliamo. Per esempio se vogliamo creare 1 colonna più grande che comprende due piccole dobbiamo aggiungere la classe half:

Ci sono diverse classi che possiamo utilizzare per modificare la griglia e corrispondono alla dimensione relativa della griglia genitore. Le classi sono:

  1. full;
  2. half;
  3. third;
  4. two-third;
  5. fourth;
  6. three-fourth;
  7. fifth;
  8. two-fifth;
  9. three-fifth;
  10. four-fifth;
  11. sixth;
  12. none

La classe “none” nasconde gli elementi ed è fondamentale per realizzare layout responsive.
Le colonne figlie del contenitore genitore hanno la possibilità di creare uno spazio vuoto che in inglese si chiama offset e sono costruite aggiungendo la classe off-size.

Il prefisso “size” corrisponde al numero di cella che vogliamo lasciare vuota.

#5 – TAB E GALLERY

Infine parliamo delle tab che ti permettono di creare numerosi effetti sui contenuti del sito web, come news che scorrono da una tab all’altra o addirittura delle gallerie immagini. Nel mio esempio ho creato una gallery che scorre cliccando sulle immagini più piccole o thumbs. Non si può realizzare l’effetto slideshow automatico o comunque dovremmo aggiungere javascript, ma è comunque una bella gallery che scorre cliccando sulle immagini piccole.

Il codice per la gallery con le thumbs è:

Le immagini grandi sono create con i tab input type “radio” e scorrono cliccando sulle immagini thumbs create con il tag “label”.

Hai notato come è semplice e intuitiva la libreria css Picnic? Io l’ho trovata utile per elementi e contenuti che non sempre si riesce a progettare con i css. Per tutte le informazioni ti rimando alla pagina della libreria Picnic dove troverai tutto quello che ti serve e gli altri contenuti che non ho trattato nell’articolo, ma che sono facili da implementare e molto intuitivi con una documentazione molto ampia su tutte le sue funzionalità.

Vedi la demo
Scarica la demo

Fonte articolo: picnicss.com

Save

  • Sbaglio o manca un po’ una navigation bar multilevel ….?

    • Aledero design

      Ciao se ti riferisci alla navigazione responsive c’è la parte dedicata al nav che spiega benissimo come realizzarla. Se intendi altro puoi spiegarti meglio? grazie

  • Interessante! Devo provarlo assolutamente.

Shares