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 è:
<label for="modal_1" class="button">Clicca per aprire il box</label>
<div class="modal">
<input id="modal_1" type="checkbox" />
<label for="modal_1" class="overlay"></label>
<article>
<header>
<h3>Box creato con Picnic</h3>
<label for="modal_1" class="close">×</label>
</header>
<section class="content">
Box creato con la libreria Picnic, non è bello vero?
</section>
<footer>
<label for="modal_1" class="button dangerous">
Chiudi
</label>
</footer>
</article>
</div>
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:
<label class="dropimage">
<input title="Drop image or click me" type="file" />
</label>
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:
<script>
document.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll('.dropimage'), function(img){
img.onchange = function(e){
var inputfile = this, reader = new FileReader();
reader.onloadend = function(){
inputfile.style['background-image'] = 'url('+reader.result+')';
}
reader.readAsDataURL(e.target.files[0]);
}
});
});
</script>
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 è :
<button data-tooltip="This is a great tooltip" class="tooltip-top"> Top </button> <button data-tooltip="This is a great tooltip"> Bottom (default) </button> <button data-tooltip="This is a great tooltip" class="tooltip-left"> Left </button> <button data-tooltip="This is a great tooltip" class="tooltip-right"> Right </button>
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.
<div class="flex three demo"> <div><span>1</span></div> <div><span>2</span></div> <div><span>3</span></div> </div>
Se inserisci meno colonne puoi anche centrarle utilizzando la classe center:
<div class="flex three center demo"> <div><span>1</span></div> <div><span>2</span></div> <div><span>3</span></div> <div><span>4</span></div> <div><span>5</span></div> </div>
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:
<div class="half"><span>3</span></div>
Ci sono diverse classi che possiamo utilizzare per modificare la griglia e corrispondono alla dimensione relativa della griglia genitore. Le classi sono:
- full;
- half;
- third;
- two-third;
- fourth;
- three-fourth;
- fifth;
- two-fifth;
- three-fifth;
- four-fifth;
- sixth;
- 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.
<div class="off-fourth"><span>3</span></div>
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 è:
<div class="tabs four"> <input id="tabC-1" type='radio' name='tabGroupC' checked > <input id="tabC-2" type='radio' name='tabGroupC'> <input id="tabC-3" type='radio' name='tabGroupC'> <input id="tabC-4" type='radio' name='tabGroupC'> <div class='row'> <div> <img src="img/1.jpg"> </div> <div> <img src="img/2.jpg"> </div> <div> <img src="img/3.jpg"> </div> <div> <img src="img/4.jpg"> </div> </div> <label for="tabC-1"><img src="img/1-thumb.jpg"></label> <label for="tabC-2"><img src="img/2-thumb.jpg"></label> <label for="tabC-3"><img src="img/3-thumb.jpg"></label> <label for="tabC-4"><img src="img/4-thumb.jpg"></label> </div> </div>
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à.
Fonte articolo: picnicss.com
