Pure cosa, perché, e come?

Questo tutorial ti introdurrà a Pure, una libreria CSS composta da piccoli moduli, che può aiutarti a scrivere layout completamente reattivi, in un modo molto semplice e veloce. Lungo la strada, ti guiderò attraverso la creazione di una semplice pagina per evidenziare come puoi utilizzare alcuni componenti della libreria.

Perché creare layout reattivi?

Negli ultimi anni nello sviluppo web, tre le parole che si susseguono continuamente sono: Responsive Web Design (RWD). A questo punto dovresti già sapere di cosa si tratta, ma, nel caso ti sia sfuggito, ecco alcune risorse per colmare le lacune:

• Articoli su Tut di WebDesign+
• Corsi su Tuts + Premium
• Responsive Web Design di Ethan Marcotte

Ma la domanda è: perché diventare reattivi? La risposta è che non abbiamo alcun controllo su quale risoluzione verrà utilizzato il prossimo dispositivo quando visitano il nostro sito web. Non è più possibile visualizzare solo frasi come "Migliore visualizzazione a una risoluzione di 1024x768" (sebbene sia ancora possibile trovarle sul Web). Una delle ragioni principali di questo fenomeno è stata la crescita della larghezza dei monitor PC e anche la diffusione di dispositivi mobili connessi a Internet. Inoltre, in base a StatCounter, attualmente ~ il 16% degli utenti è connesso tramite un dispositivo mobile. Ora non sto dicendo questo RWD è solo una questione di ottimizzazione di un sito Web per una determinata dimensione dello schermo, ciò che voglio dire è che stiamo creando un'esperienza eccezionale per gli utenti che visitano il nostro sito Web indipendentemente dai dispositivi che stanno utilizzando.

Detto ciò, è anche chiaro che non tutti noi lavoriamo per un'azienda in cui ogni persona ha un singolo ruolo (designer, sviluppatore, tester e così via). Quindi, diciamo che sei uno sviluppatore solista, lavora come libero professionista e non sai molto del web design. Sono disponibili molte librerie che possono accelerare il flusso di lavoro. I più completi sono sicuramente Boostrap e Foundation, ma a volte possono essere eccessivi e potresti aver bisogno di qualcosa di più piccolo. In questi casi, un nuovo interessante progetto è stato lanciato da Yahoo, che possiamo usare, chiamato Pure.

Ciò che è puro?

Citando il sito web Pure, lo è un insieme di moduli CSS piccoli e reattivi che puoi usare in ogni progetto web. Come detto in precedenza, la libreria completa è davvero leggera, essendo solo 4.2KB minified e gzip, ma per mantenere il tuo sito web ancora più leggero, puoi includere solo alcuni dei moduli disponibili. Fondamentalmente, è composto dai seguenti moduli:

• Base
• Griglia
• Le forme
• pulsanti
• tabelle
• menu

Una delle cose che apprezzo molto di Pure è che è basata su Normalize.css, una libreria ben nota che rende gli elementi più coerenti e in linea con gli standard moderni e funziona anche con i browser più vecchi. Dal momento che è molto piccolo, non offre una soluzione completa a tutti i tuoi problemi, ma ha diversi elementi dell'interfaccia utente comuni predefiniti che puoi trovare in molti siti Web sul Web. Un'altra caratteristica interessante di Pure è che è altamente estensibile e personalizzabile. Gli autori hanno usato SMACSS per costruirlo e tutte le sue classi iniziano con puro-, così puoi facilmente riconoscerli.

Anche se Pure è un progetto interessante da considerare, tieni presente che è davvero nuovo e potrebbe non essere adatto per progetti di grandi dimensioni. In effetti, la versione corrente (0.2.0 al momento della stesura di questo articolo) presenta diversi problemi che probabilmente non si troveranno in framework più maturi e la sua documentazione potrebbe anche essere migliorata. Tuttavia, mi è piaciuto ed essendo un precursore, hai il vantaggio di studiare e imparare Pure, fin dall'inizio, che potrebbe finire per essere il prossimo progetto ben noto sul web.

Vediamo Pure in azione

Dicono che un'immagine vale più di mille parole. Per noi, come sviluppatori e designer, una demo con cui possiamo giocare è ancora meglio. Quindi, per vedere cosa può fare Pure per noi, creiamo un'app demo di base. La nostra demo consisterà in una semplice Homepage contenente alcune informazioni su di me (a volte la mia immaginazione mi spaventa). L'immagine sotto mostra come dovrebbe apparire il risultato finale su un grande schermo:

E l'immagine seguente, invece, ti mostra come apparirà su uno smartphone:

Passaggio 1: crea il menu orizzontale

Come ho detto, Pure ha diversi elementi comuni predefiniti che puoi trovare in molti siti web sul web. Un menu orizzontale è sicuramente uno di questi e ci darà la possibilità di dare un'occhiata ad alcune classi del modulo menu.

Per creare questo utilizzando HTML5, di solito abbiamo a