Uno dei più interessanti e utili generatori di griglia reattivi in giro è uno strumento chiamato Gridpak, che consente di utilizzare un'interfaccia utente semplice e divertente per creare griglie fluide, basate su query multimediali. Abbiamo esaminato Gridpak circa un anno fa e siamo giunti alla conclusione che, sebbene utile, è venuto meno nel campo della facilità d'uso per l'implementazione del codice.
Gli sviluppatori hanno compiuto progressi in questo settore e penso che sia giunto il momento di dare un'altra occhiata. Unisciti a noi mentre ci immergiamo su come Gridpak ha migliorato la sua offerta di codice e la sua struttura per offrire agli utenti un'esperienza migliore e più snella.
Incontra Gridpak
Gridpak è stato presentato in un bel po 'di ritocchi di strumenti di web design reattivi, quindi probabilmente lo hai incontrato un paio di volte. Ecco uno screenshot per jogare la tua memoria:
Nel caso in cui non hai letto il nostro ultimo articolo, quello che vedi qui è una rappresentazione visiva della tua griglia. L'immagine principale al centro mostra colonne, padding e gutter in base all'input e alla gamma attualmente selezionata. Vediamo brevemente come funziona questo strumento.
Aggiunta di punti di interruzione
Per iniziare, prendi il grande cerchio a destra che contiene due frecce e trascinalo a sinistra oa destra. Vedrai l'intera griglia schiacciarsi ed espandersi mentre lo fai. In basso, troverai un indicatore che ti dice la larghezza corrente. Una volta ottenuto questo in un punto in cui si desidera inserire un nuovo punto di interruzione, fare clic su? Aggiungi punto di interruzione? pulsante.
Mentre procedete con l'impostazione dei punti di interruzione, la parte inferiore dell'interfaccia utente verrà suddivisa in sezioni diverse, che fungono da intervalli di larghezza della finestra. Nello screenshot qui sotto puoi vedere che il mio primo intervallo va da 0 a 319px, a quel punto c'è un punto di interruzione, creando una nuova sezione che va da 320px a 479px. Continuiamo questo processo fino a quando non verranno prese in considerazione tutte le query multimediali del tuo design.
Tweaking The Grid
Si noti nella schermata precedente che, quando la mia larghezza corrente si trova all'interno di un determinato intervallo, tale intervallo è evidenziato in rosso lungo il fondo. Ciò significa che posso entrare e impostare le impostazioni di griglia specifiche per quell'intervallo. Per fare questo, utilizzo gli strumenti semplici all'estrema destra della pagina.
Qui possiamo impostare il numero di colonne, spaziatura e larghezza della grondaia per ogni sezione. Trascina semplicemente la griglia per evidenziare ciascuna sezione, quindi imposta la griglia per quella sezione, rendendola diversa da tutte le altre sezioni. Ad esempio, la tua griglia mobile potrebbe avere solo una o due colonne mentre la tua griglia desktop ne ha dodici.
Il download
Una volta che hai finito di configurare la tua griglia in Gridpak, sei pronto per scaricare i tuoi file. Questa volta, noterai che abbiamo ancora alcuni file con cui lavorare:
Come accennato in precedenza, in passato ho dato un po 'di tempo agli sviluppatori perché, a questo punto, il divertimento era finito e Gridpak era diventato così difficile da usare. Sembra che abbiano migliorato l'esperienza concentrandosi su tre aspetti principali:
- Una demo completamente funzionante: Questo è assolutamente fondamentale. L'ultima volta che abbiamo guardato Gridpak, non c'era nessuna demo inclusa, che ci lasciava capire le cose da soli. Avere questo in mano significa poter analizzare un esempio correttamente impostato e imparare come funzionano le cose. Penso che questo sia il modo in cui la maggior parte degli sviluppatori tende ad apprendere, quindi offre un'esperienza molto migliore agli utenti Gridpak della prima volta.
- Un migliore? README? file: Il? README? sembra che il file sia migliorato molto meglio. Ti guida attraverso ogni pezzo del download e in realtà ti imposta sulla strada giusta per come lavorare con le classi precostruite nel tuo file CSS.
- Commenti completi: Oltre alle istruzioni nel "README", e forse anche più utili, ci sono i commenti che troverai sparsi tra i vari file di codice. Gli sviluppatori si sono preoccupati di spiegare ogni pezzo del puzzle mentre vanno, in modo che non importa dove ti trovi in un file, c'è una bella descrizione di ciò che sta accadendo per aiutarti a lavorare con ciò che ti è stato dato.
In generale, i ragazzi dietro Gridpak non hanno davvero cambiato nulla sul modo in cui opera, ma i miglioramenti che hanno apportato nella diffusione di informazioni e istruzioni utili all'utente rendono l'intero strumento molto più accessibile e facile da usare.
Utilizzando il codice
L'ultima volta, ho solo brevemente toccato come funziona il sistema Gridpak. Armato di un supporto informativo più che mai, vorrei approfondire un po 'più a fondo in modo che tu possa essere sicuro di sapere esattamente come funziona e in realtà può utilizzarlo in un progetto abbastanza rapidamente.
I pezzi
Il download include una serie di file CSS (CSS, LESS e SCSS) oltre a una manciata di immagini e un file JavaScript. La demo ha anche un file HTML per riferimento.
Le immagini e il file JavaScript servono semplicemente a creare una sovrapposizione di griglia in modo da poter vedere come funzionano le colonne. Ogni sistema di rete ha uno di questi e io sinceramente non li uso mai, quindi li butto fuori e mi concentro sui pezzi reali che userete per il vostro flusso di lavoro di sviluppo.
L'HTML
La prima cosa che vorrete fare è impostare il vostro file HTML. Codifica la sezione della testa come al solito, quindi avvia il markup in questo modo:
Tutto ciò che creerai sarà gettato all'interno di questa? Pagina? div, che essenzialmente funge solo da wrapper che centra il contenuto della pagina.
Successivamente, dividerete tutti i contenuti in righe. Per fare ciò, ogni elemento della pagina sarà gettato in un div con una classe di? Row ?. Avrai molti di questi:
All'interno della riga, puoi inserire i tuoi contenuti normali, proprio come sempre. Assicurati di usare il? Col? classe su ogni pezzo di contenuto, che in sostanza applica gli stili di colonna globale.
Nomi di classe semantici
Dopo aver applicato il? Col? classe, sei libero di applicare un nome di classe semantico. Non è necessario usare nomi di classi divertenti come? 1-3-6? o? m1 ?, usa qualcosa di descrittivo che comunica esattamente cosa è e cosa fa quella sezione. Ecco un esempio con un'intestazione:
Se espandiamo un po 'questo per includere alcune sezioni diverse, ecco come sarebbe il nostro codice. Nota i nomi di classe chiari e descrittivi e l'inclusione di? Col? su ogni div
SCSS
L'ultima volta che abbiamo guardato Gridpak, ci siamo tuffati nel semplice CSS. Per cambiare le cose, diamo un'occhiata al file SCSS questa volta, perché Sass è fantastico e probabilmente dovresti semplicemente cedere e usarlo già.
Tre mixin
Per comprendere appieno cosa sta succedendo nel file SCSS, devi concentrarti su tre mixin inclusi: col, span e span_first.
col
Il primo mixin che incontriamo è "col ?, che useremo per definire questi? Col? classi che abbiamo visto nel codice HTML sopra.
L'ho diviso in tre sezioni in modo da poter vedere facilmente cosa sta succedendo. La prima parte fa galleggiare le colonne e aggiunge un bordo trasparente a ciascuna. Successivamente, impostiamo il ridimensionamento della casella e la clip di sfondo. Questi aiutano a manipolare il modello di scatola in qualcosa di un po 'più amichevole per quanto riguarda la matematica.
Questo mixin è implementato abbastanza facilmente, è semplicemente gettato direttamente nel? Col? classe. Inoltre, inserirai qualsiasi altro stile di colonna che desideri applicare qui.
campata
Il prossimo è lo "span"? mixin. È qui che viene eseguita tutta la matematica di fantasia per capire le diverse larghezze possibili.
Questa porzione di codice può essere molto confusa a causa delle variabili, quindi diamo un'occhiata a ciascuna di queste e vediamo cosa fa.
- $ Num: Quando lo implementeremo in un secondo momento, dirà al mixin in quale colonna ci troviamo. Se stiamo impostando la prima di tre colonne, questa sarà impostata su 1.
- $ Gutter_pc: La grondaia, espressa in percentuale.
- $ Gutter_px: La grondaia, espressa come valore di un pixel.
- $ Padding: Il padding, espresso come valore o percentuale di pixel.
- $ MAX_COLUMNS: Il numero di colonne nella nostra griglia attualmente attiva. Potrebbe essere impostato su 1 per la griglia mobile e 12 per desktop.
- $ One_col: La larghezza di una singola colonna, calcolata automaticamente.
Questo può sembrare un sacco di lavoro, impostando queste variabili ogni volta che crei una nuova query multimediale, ma ricorda che questa attività è già stata completata. Le impostazioni che immettiamo sull'interfaccia utente nei primi passaggi sopra definiranno le impostazioni per queste variabili a ogni punto di interruzione o intervallo.
span_first
Questo è applicato al primo intervallo in ogni intervallo. Cancella il margine sinistro sulla prima colonna.
Usare le tue griglie
Direttamente da Gridpak, troverai una sezione del tuo CSS o SCSS dedicata a ciascuna delle gamme che hai stabilito. Ogni sezione è molto ben commentata per farti sapere cosa sta succedendo. Ecco uno dei miei intervalli, senza codice aggiuntivo aggiunto da me:
Come puoi vedere, la sezione è sormontata da un commento che ci dice la gamma che stiamo osservando (0-319px), così come gli span che troveremo in questo intervallo. Sembra che questa sia la nostra gamma mobile, quindi troveremo due span, uno al 48% e uno al 100%. L'estensione del 48% copre una colonna e l'estensione del 100% copre tutte le colonne.
I margini e l'imbottitura appropriati sono applicati al nostro? Col? classe, quindi vengono impostate le variabili per il nostro span mixin. Ancora una volta, questi valori vengono inseriti automaticamente in base a ciò che hai fatto nell'app Web. Qui possiamo vedere il risultato di questo processo:
Successivamente, alla prima colonna viene assegnato il nostro? Span_first? mescolando per togliere quel margine sinistro.
Infine, ciascuna larghezza dell'ampiezza viene impostata usando lo span? mixin con le variabili sopra come input.
Ora, questa è la parte in cui abbiamo effettivamente un input manuale da fare. Per impostare le larghezze per i vari pezzi nel nostro codice HTML, aggiungiamo semplicemente i nomi delle classi con l'intervallo appropriato.
Ad esempio, se vogliamo che i nostri contenuti principali e principali prendano ciascuno una singola colonna che è circa metà della pagina, aggiungeremo i nomi delle loro classi con? Span_1 ?. Vogliamo che la nostra intestazione si estenda lungo tutta la pagina, quindi la inseriremo con "span_2", che si estende fino in fondo alla pagina.
Questo è tutto ciò che c'è da fare! Tutto ciò che devi fare è ripetere questo rapido processo di aggiunta di classi per ciascuna delle gamme che configuriamo nell'app Web.
Per esempio, diciamo che passiamo alla nostra sezione desktop e contiene dodici possibili span. Qui vogliamo che l'intestazione occupi il 100% della larghezza, che il contenuto in primo piano occupi un terzo della larghezza e che il contenuto principale occupi 2/3 della larghezza. Aggiungeremo l'intestazione? classe a? span_12 ?, il? maincontent? classe a? span_9? e il? featured? classe a? span_3 ?.
Ecco una panoramica delle larghezze che questo codice si applicherebbe a ciascuna di queste sezioni. Con uno sforzo minimo, abbiamo una piccola griglia di contenuti:
Continua semplicemente a configurare ciascun intervallo, quindi ridimensiona la finestra e vedrai il tuo contenuto adattarsi automaticamente. Se vuoi vederlo in azione, controlla la pagina demo inclusa in ogni download Gridpak.
Conclusione
Avendo trascorso un po 'di tempo con Gridpak dalla mia prima recensione, ho pensato che fosse necessario rivisitare questo strumento e dire che in effetti penso che sia abbastanza utile come punto di partenza per la progettazione reattiva. La documentazione e i commenti attuali dovrebbero guidarti attraverso tutto ciò che devi sapere, abbassando considerevolmente la curva di apprendimento.
Se hai intenzione di usare la versione SCSS come ho fatto sopra, avrai una struttura abbastanza concisa e flessibile da cui partire e avrai bisogno di pochissimo sforzo per far aderire il tuo contenuto ai diversi punti di interruzione. Impostarli con l'interfaccia utente Web è sicuramente più facile rispetto a codificarli manualmente.
Ho ancora un problema con l'idea di iniziare con le query multimediali e inserire contenuti anziché creare query multimediali mentre il contenuto porta, ma finché inizi con la giusta struttura HTML, potresti ancora lavorare in questo modo pur sfruttando ancora Gridpak .
Lascia un commento qui sotto e fammi sapere cosa pensi di Gridpak. Prenderesti in considerazione l'utilizzo come punto di partenza per il tuo prossimo progetto di progettazione reattivo? Quali altri utili strumenti RWD hai incontrato di recente?