Mi piace trovare strumenti gratuiti in grado di rendere il mio lavoro (e il tuo) un po 'più semplice. La comunità degli sviluppatori web è piena di persone di talento che sono più che disposte a condividere le loro creazioni con il mondo senza chiedere nulla in cambio.
Oggi esamineremo uno di questi strumenti di Erskine Design chiamato Gridpak. Con esso possiamo generare rapidamente e facilmente la nostra griglia reattiva per la creazione di pagine web che funzionano bene su molte diverse dimensioni dello schermo. È un po 'difficile da implementare, quindi ti aiuteremo a capire come impostare i tuoi stili dopo aver scaricato il download.
Questo articolo fa parte delle nostre serie su "guardare oltre il design del desktop", offerto in collaborazione con Heart Internet VPS.
Incontra Gridpak
Come sicuramente saprai, ci può essere un bel po 'di matematica nella creazione di una griglia semplice e non reattiva e diventa molto più complesso quando inizi a modificare quella griglia in vari breakpoint. Se sei un designer che evita la matematica laddove possibile, avvicinarsi a un progetto del genere può essere un compito piuttosto intimidatorio.
Gridpak è un'app Web gratuita che promette di eliminare la sofferenza derivante dalla creazione del proprio sistema di rete reattivo. Non devi nemmeno conformarti alla rigida struttura di una griglia costruita da qualcun altro o devi lavorare troppo per crearne di tuoi. Con pochi clic e trascina le azioni, avrai un fantastico modello di griglia reattivo costruito secondo le tue specifiche.
Sebbene Gridpak sia un gioco da ragazzi, all'inizio potrebbe essere un po 'confuso se non sai cosa stai facendo. Quando ho trovato il sito per la prima volta, ho fatto clic per un po 'di tempo prima che mi sentissi veramente in grado di gestire il processo. Ti guiderò nel modo in cui tutto funziona in modo da poter sfruttare questo pratico strumento in modo rapido ed efficiente nel tuo flusso di lavoro.
I controlli
Quando carichi la pagina di Gridpak per la prima volta, vedrai un'immagine di una griglia a sei colonne. Alla destra della griglia c'è una serie di controlli. Anche se sembra una quantità modesta di impostazioni, il livello di personalizzazione disponibile qui è abbastanza completo.
Come puoi vedere, puoi impostare rapidamente e facilmente il numero di colonne e il padding e il gutter, sia in percentuale che in pixel. Il piccolo pulsante rotondo con le frecce rappresenta in pratica il tuo viewport. Trascinalo verso sinistra e verso destra per vedere come reagirà la griglia alla modifica delle dimensioni della finestra. C'è anche un pulsante per aggiungere un punto di interruzione, che esamineremo in seguito.
Indicatore del punto di interruzione
Lungo la parte inferiore dell'interfaccia utente c'è un righello di pixel e una piccola icona che indica che la griglia di default corrente verrà applicata a tutto il continuum delle dimensioni di viewport, da zero fino all'infinito. Questo in pratica significa semplicemente che non ci sono ancora veri e propri breakpoint aggiunti, quindi la stessa griglia si applica a tutte le taglie.
Aggiungere il nostro primo punto di interruzione
Ora, l'intero punto qui è che vuoi che il framework di base di base per il tuo sito cambi e si evolva in diverse dimensioni di viewport. La chiave per usare questo è ricordare di pensare alla tua griglia in termini di intervalli, non solo punti di interruzione. Una determinata porzione di impostazioni avrà una gamma di possibili dimensioni della finestra di visualizzazione in cui tale griglia sarà attiva.
Il tipico caso d'uso è l'impostazione di una griglia per ogni mobile, tablet e desktop. L'impostazione è semplice, basta trascinare il cursore sulla larghezza target, aggiungere un punto di interruzione, scorrere fino alla successiva dimensione di destinazione, aggiungere un altro punto di interruzione, ecc.
Qui ho messo il cursore a 320 pixel e aggiunto un punto di interruzione, quindi messo a 480px e aggiunto un altro punto di interruzione. Mentre trascini il cursore, la griglia si aggiornerà in base alle impostazioni che hai applicato. Gli intervalli che hai impostato sono evidenti in basso, con l'intervallo attuale evidenziato in rosso.
Il flusso di lavoro qui è un po 'traballante. Il trucco è assicurarsi di avere selezionato l'intervallo corretto. Quindi, quando voglio regolare le mie impostazioni per 0-319px, aggiungo un breakpoint a 420px, quindi sposta il cursore verso sinistra un po 'per assicurarmi che l'intervallo sia attivo.
Andare avanti
Una volta individuata la griglia per il primo intervallo di larghezze, aggiungi un altro punto di interruzione, quindi sposta di nuovo il cursore indietro e imposta la griglia per quella sezione.
Qui puoi vedere che ho impostato una griglia a tre colonne che si attiverà da 320-479 px. Una volta che questo è impostato, se sposto il mio cursore avanti e indietro, posso vedere l'aggiornamento della griglia in diretta alle diverse impostazioni della vista.
Finendo, aggiungo un'altra griglia che occupa il range da 480 a959 e l'ultima che risponde a qualsiasi cosa a 960px o superiore.
Il download
Una volta elaborate le tue griglie, è ora di scaricare i file e mettersi al lavoro. Il download è uno degli aspetti più impressionanti di tutta l'app. È molto esteso e offre non solo un file CSS, ma anche file LESS e SCSS oltre ai PNG della griglia per Photoshop e un JavaScript per sovrapporre la griglia sul documento live.
La pagina Informazioni su Gridpak ti dice tutto su ogni elemento incluso nel download, quindi salterò la ridondanza e ti consentirò di verificarlo. Ciò che è più importante è come implementare la griglia nel proprio lavoro, e tirarlo fuori probabilmente non è così facile come speri che sia. Entriamo e vediamo perché.
Grid Complications
Ora, l'interfaccia utente Web semplifica l'impostazione di una buona parte del codice personalizzato che utilizza le query multimediali. Se diamo uno sguardo al nostro CSS, LESS o SCSS, possiamo vedere chiaramente che le query sui media sono state effettivamente generate.
Anche se gran parte del lavoro CSS è fatto per te, non hai decisamente finito. Certo, è abbastanza difficile implementare la griglia in modo utile.La ragione di ciò è che il design reattivo può essere piuttosto complicato, i sistemi di grid possono essere complicati e quando si gettano i due si ottiene molta complessità. Se hai davvero un controllo sui CSS, dovresti essere in grado di capirlo, ma se sei abbastanza nuovo, è probabile che ti imbatti in un sacco di mal di testa. Di conseguenza, lo raccomando non dovrebbe Sii la tua prima incursione nel design reattivo.
Come funziona
Dato che questo può essere abbastanza complicato e non c'è molta documentazione disponibile, cercherò di spiegartelo. Come con qualsiasi sistema di griglia CSS, Gridpak ti fornirà alcune classi predefinite da applicare ai tuoi contenuti. Tuttavia, lo sviluppatore consiglia di utilizzare invece le proprie classi semantiche e usa semplicemente le classi precostruite come guida.
Quindi diciamo che hai un div contenente tre paragrafi di testo. Quale classe dovresti indossare? Questo è difficile perché potresti volere che sia span_one e un punto e span_three in un altro punto. Fortunatamente, abbiamo già deciso di utilizzare i nostri nomi di classe in modo che diventi un po 'più semplice.
Se vogliamo chiamare la nostra sezione di paragrafi? Caratteristiche ?, aggiungiamo quel nome di classe a ciascuno dei paragrafi nel nostro HTML, quindi passiamo al CSS. Qui cerchiamo innanzitutto il contenitore generico CSS e assicuriamoci di aggiungere la nostra nuova classe per assicurarci che riprenda quegli stili:
Quindi vai nella specifica query multimediale e imposta gli stili per la tua classe di funzionalità all'interno di tale intervallo. Ancora una volta, dovrai aggiungere la classe alle classi generiche preesistenti:
Successivamente, si entra e si aggiunge la classe accanto allo span specifico che si sta tentando di abbinare. A questa dimensione di viewport, voglio che tutti e tre i paragrafi appaiano in una singola riga, quindi aggiungo la classe delle caratteristiche accanto alla classe span_2 (è una griglia di sei colonne qui in modo che tre due siano uguali a sei).
Questo farà sì che tutti e tre i paragrafi appaiano in una singola riga. Ma cosa succede quando entriamo in una finestra diversa? Ad esempio, con le dimensioni più piccole, forse vogliamo che i paragrafi siano impilati uno sopra l'altro al 100% della larghezza. Ancora una volta, entriamo e troviamo lo span che corrisponde alla larghezza che stiamo andando, per coincidenza span_2 di nuovo, e aggiungere nella nostra classe .features (non dimenticare di aggiungerlo anche alle classi generiche).
Senza dubbio avrai problemi di margine mentre lo fai (ne sono sicuro). Questo perché i margini vengono ripristinati solo dopo ogni? Riga? div, ma quando ogni paragrafo occupa il 100% della larghezza, dobbiamo eliminare i margini su tutti loro. In definitiva, aspettatevi un sacco di ritocchi per essere necessario.
Tieni anche presente che span_2 non sarà sempre la scelta appropriata per questo esempio. Ad esempio, se la nostra griglia arriva a 12 colonne a dimensione intera, probabilmente vorremmo aggiungere la classe di caratteristiche in prossimità della classe span_4, che garantirà che ancora una volta i tre paragrafi occuperanno tutta la larghezza.
È utile?
Quando ho preso il mio primo download mi aspettavo che l'implementazione fosse abbastanza semplice. Tuttavia, ci è voluto del tempo per riprendermi a farlo funzionare. Forse lo sto complicando eccessivamente, ma sembra che qualcuno abbastanza abile da implementare Gridpak sia probabilmente abbastanza abile da saltare del tutto mentre qualcuno che ha bisogno di aiuto con il responsive design potrebbe trovare il CSS un po 'complicato alla fine.
In tutta onestà, mi piacerebbe vedere Gridpak ricostruito come un generatore personalizzato per la Skeleton Boilerplate, che ha una griglia reattiva che è sia più versatile e più facile da implementare.
Tuttavia, detto questo, mi sono divertito molto a giocare con Gridpak e sicuramente lo vedo come un modo solido per avviare un progetto reattivo, purché tu sappia cosa stai facendo. Come ho detto prima, non sono il più grande fan di impostazione di query multimediali basate specificamente su dimensioni schermo comuni, ma questo è un argomento per un giorno diverso.
Mi piacerebbe sentire i tuoi pensieri. Hai già usato Gridpak per costruire realmente una pagina web? Cosa ne pensi? Hai un flusso di lavoro diverso e / o migliore del mio? Mi piacerebbe sentirlo!