Ammettiamolo, il design reattivo è un duro lavoro. Il web design è stato abbastanza difficile quando stavamo prendendo in considerazione solo le piattaforme desktop, ma la sfida di dimensioni dello schermo e di visualizzazione apparentemente infinitamente variabili ha davvero aggiunto alla complessità del layout del sito web.
Che tu sia completamente nuovo nel design reattivo o ti consideri un esperto della zona, lo strumento che vedremo oggi ti lascerà a bocca aperta. Si chiama Gridset ed è incredibile.
Cos'è il Gridset?
Gridset è un progetto di Mark Boulton che è attualmente in beta, ed è finalizzato a semplificare drasticamente la progettazione web reattiva e il processo di sviluppo.
Hai senza dubbio visto un sacco di strumenti che rendono questa promessa. Il fatto è che la maggior parte sono poco più di calcolatori di griglia glorificati. Gridset è diverso. In realtà ti offre un solido set di strumenti che ti consente di creare e applicare una serie di griglie diverse ottimizzate per qualsiasi numero di dispositivi.
È difficile descrivere come e perché Gridset è così fantastico, quindi perché non ti mostro con un progetto di esempio?
Crea un nuovo set di griglia
Quando accedi per la prima volta all'app, ti verrà mostrato un elenco di insiemi di griglia che hai costruito in passato (non stai costruendo solo una griglia ma più). Puoi scegliere di modificare uno di questi o crearne uno nuovo, ne creerò uno da zero. Per fare ciò, premi il? New Set? pulsante e applica un nome a tua scelta.
Dopo questo, è il momento di saltare e iniziare a costruire la tua prima griglia. Vedrai la schermata qui sotto, che ti dà la possibilità di scegliere tra alcuni pratici modelli di griglia preimpostati e di crearne di nuovi. Inizieremo a costruire il nostro nel prossimo passaggio.
Impostare quattro griglie
Utilizzando i controlli di base sul lato sinistro dello schermo, elimineremo quattro diverse griglie: Desktop A, Desktop B, Tavolo e Mobile. Tieni presente che queste sono selezioni davvero arbitrarie per questo tutorial, sentiti libero di seguire la tua strada sulle decisioni che prendiamo in tutto l'articolo. Dovresti comunque essere in grado di seguire bene.
Questo creerà quattro diverse griglie di ardesia vuote nella sezione centrale principale, ognuna delle quali vorremmo entrare e personalizzare per i nostri scopi.
Personalizza la tua prima griglia
Ora è il momento di scavare davvero e vedere come funziona questa cosa. Di default, dovresti vedere qualcosa come l'esempio nella schermata qui sotto come lo stato di default di una griglia data:
Questa non è affatto una griglia, anzi, è semplicemente una grande colonna. Per personalizzare la griglia, utilizziamo la serie di controlli nella parte superiore. Diciamo che volevo una griglia a tre colonne con grondaie 30px che si attivasse a 990 px di larghezza e oltre. Tutto quello che devo fare è digitare questi valori nei campi.
Qual è il prefisso?
C'è un piccolo campo qui che richiede un prefisso di classe? di cosa si tratta? La risposta è che, una volta impostate le varie griglie usando Gridset, applicarle è facile come schiaffeggiare alcuni nomi di classi nel codice HTML.
Una volta che hai impostato le tue griglie usando Gridset, applicarle è facile come schiaffeggiare su alcuni nomi di classe nel tuo HTML.Gridset ti permette di scegliere esattamente come saranno queste classi, anche se ti limiteranno a tre personaggi, quindi la semantica sarà probabilmente sacrificata un po 'qui. L'esempio tipico è usare? D? per desktop,? t? per tablet e? m? per cellulari. Creerò due griglie del desktop, quindi userò? Da? e? db? per tenerli separati.
Rapporto e aggiornamento
Ora, solo perché ho usato tre colonne non significa necessariamente che le voglio dividere in modo uniforme. Fortunatamente, il Gridset consente di regolare il rapporto con un piccolo menu a discesa. Per inciso, voglio che il mio si divida in terzi quindi andremo con questa opzione.
Una volta che hai finito di modificare tutte le impostazioni, premi il pulsante di aggiornamento per vedere l'aggiornamento della tua rete.
Come puoi vedere, l'anteprima ora mostra una griglia a tre colonne che riflette le impostazioni che abbiamo scelto. C'è molta più flessibilità qui se ne hai bisogno. Prova a fare clic su una colonna per vedere e modificare le sue impostazioni individualmente o facendo clic e trascinando per riorganizzare le colonne.
Configura le tue altre griglie
Ora che abbiamo visto come impostare una griglia, facciamo esplodere gli altri tre. Per illustrare quanto può essere flessibile Gridset, impostiamo un'altra griglia desktop,? Db ?. Questo sarà praticamente lo stesso, solo diviso in quattro colonne nel caso in cui vogliamo dividere il contenuto della pagina in due metà. Non stiamo impostando una nuova larghezza che deve essere considerata, solo un'altra griglia all'interno dello stesso intervallo.
Per finire, configureremo una griglia tablet larga 768px con grondaia 20px e quattro colonne, quindi terminata con una griglia mobile larga 320 px con grondaie 10px e due colonne.
Ancora una volta, presta attenzione ai prefissi perché presto diventeranno importanti. Abbiamo preso il percorso standard e usato? T? per tablet e? m? per cellulari.
Notare inoltre che ogni singola colonna è etichettata in tutte le griglie: da1, db3, t2, ecc. Rappresentano slot specifici che saremo in grado di utilizzare nel nostro codice.
Usando le griglie
Fino a questo punto, Gridset si è avvicinato "pulito"? ma non indispensabile. È bello avere alcune rappresentazioni visive delle nostre griglie, ma a che serve un aiuto senza l'implementazione?
Qui è dove Gridset spazza via la concorrenza. Per capire perché, fare clic su? Usa? pulsante nella parte superiore della barra degli strumenti sul lato sinistro.
Da qui, assicurati di avere? Incorpora? selezionato e vedrai un semplice link a un foglio di stile che puoi inserire direttamente nel tuo codice. Nel mio caso era il seguente:
Ciò significa che Gridset ha preso il lavoro che ho fatto sulle griglie, ha generato il file CSS necessario e lo sta ospitando in modo che possa eseguire i test. Questo file si aggiorna automaticamente secondo necessità, quindi se entro e apporto una modifica alla griglia, non devo toccare una sola riga di codice. Quant'è fico?
Altri extra
Ci sono altre tre schede nell'uso? sezione pure. ?Scaricare? ti consente di scaricare il CSS generato in modo da non essere dipendente dal sito per ospitare il file dopo che la fase di test è stata completata. ?Truffare? mostra tutte le misure per le griglie che hai costruito in modo da poter facilmente codificare il tuo layout utilizzando gli stessi numeri. La formattazione qui è davvero bella e ti incoraggiano a stampare un PDF di riferimento.
?Accesso? ti consente di inserire l'indirizzo email di un altro utente che desideri poter utilizzare anche la griglia. Questo è ottimo per quando lavori con una squadra.
Codificare un esempio
Ora che abbiamo configurato tutte le nostre griglie, è il momento di lanciare il link del foglio di stile in un file HTML e dare al layout un test drive. L'implementazione qui è estremamente semplice, basta utilizzare le classi di griglia che abbiamo creato in precedenza.
Diciamo, ad esempio, che avevamo due div, ciascuno contenente un titolo e un paragrafo. Così:
Ora immagina di voler dividerli in modo che si trovino nella stessa riga, ma il primo div ha occupato 2/3 della larghezza della pagina, lasciando 1/3 per il secondo. Usando il nostro? Desktop A? griglia, avremmo afferrato il? da? prefisso.
Il nostro primo div sarebbe allungato su entrambi i? Da1? e? da2? colonna, quindi la classe che vogliamo applicare è? da1-da2 ?. Vogliamo solo che il secondo div occupi la terza colonna, quindi qui dovremmo semplicemente digitare? Da3 ?.
Aggiungere le altre griglie
Facile vero? Quindi, come possiamo rendere questo pollone reattivo? Ecco di che cosa si tratta, quindi proviamoci! Tutto quello che dobbiamo fare è aggiungere classi per le altre griglie che abbiamo creato.
Inizia con la griglia mobile, quindi prosegui verso l'alto. Voglio che il contenuto divida in modo uniforme su entrambe le versioni mobile e tablet, quindi ho impostato il div one su? M1? e? t1-t2? e div due a? m2? e? t3-t4 ?.
Ciò significa che ogni div occuperà una colonna nella vista mobile, quindi salirà fino a due colonne nella visualizzazione tablet, quindi salirà di nuovo in una divisione 2: 1 nella visualizzazione desktop. Questo è un voodoo di layout di fantasia con pochissimo lavoro!
Facciamolo
Va bene, così ora che abbiamo il succo di come funziona, calcoliamo una pagina di esempio completa con sette div diverse.