Guida del progettista per Flexbox e Grid

Ciò che i progettisti devono sapere su questi strumenti di layout trasformativo.

Il CSS ha fatto molta strada dalla sua introduzione nel 1996, ma gli strumenti che abbiamo a disposizione per il layout non sono cambiati molto. I layout dei tavoli erano incredibilmente troppo rigidi, i layout basati su float erano fondamentalmente un hack, i layout basati sul posizionamento non erano adattabili e nessuno poteva gestire una grande complessità in modo efficiente. Non fraintendetemi: questi metodi ci hanno portato molto lontano, ma non sono destinati a scopi di layout complessi.

Le carenze di questi vecchi metodi di layout sono diventate ancora più evidenti con il web design reattivo, in cui è fondamentale abbracciare la fluidità del Web.

Con flexbox e grid, abbiamo finalmente strumenti pensati appositamente per il layout che sono più efficienti e privi di hack necessari con i metodi di layout precedenti. Sbloccano nuove possibilità a vecchi problemi, abilitano cose che prima non erano possibili e risolvono problemi reali che affrontiamo con un design web reattivo.

Flexbox

Flexbox, ovvero scatole flessibili CSS, è un nuovo metodo di layout che ci dà il controllo dell'allineamento che nessun altro metodo CSS può produrre. Si distingue per il "micro layout": la capacità di allineare, ordinare e distribuire lo spazio tra gli elementi in un contenitore o modificare la larghezza o l'altezza di un elemento per riempire al meglio lo spazio disponibile.

Avvolgimento migliorato

In Responsive Web Design, la larghezza disponibile varia al variare della larghezza della finestra. Ciò può comportare un involucro involontario del contenuto, specialmente quando il contenuto è più lungo del previsto o il contenitore del contenuto è troppo stretto. Probabilmente abbiamo visto tutti prima: il design rappresenta la lunghezza del contenuto "ideale", ma non appena viene implementato e viene aggiunto il contenuto reale, il contenuto passa alla riga successiva perché non c'era abbastanza spazio o ne esce contenitore. Entrambi non sono ideali e possono causare l'interruzione dei layout.

Il problema è non essere sicuri che lo spazio disponibile sarà sempre abbastanza grande da contenere contenuti che possono variare in lunghezza. Tradizionalmente, abbiamo utilizzato le query multimediali CSS per adattare il layout in punti di interruzione specifici per mitigare i problemi con il wrapping dei contenuti. Ma le Media Query non tengono conto della lunghezza del contenuto stesso: rispondono a una larghezza o altezza esplicite. Ciò si traduce spesso in una quantità eccessiva di query multimediali per controllare un determinato contenuto in punti di interruzione espliciti.

Esempio di avvolgimento migliorato con Flexbox

Flexbox risolve questo problema consentendoci di sfruttare lo spazio disponibile e di avvolgere i contenuti quando non lo sono. Questo comportamento di autoregolazione non è solo conveniente, ma migliora la manutenibilità perché non dobbiamo fare affidamento sul punto di interruzione per regolare manualmente lo stile. L'esempio sopra mostra questo comportamento: visualizza l'etichetta della posizione adiacente al titolo se è disponibile spazio sufficiente e allinea l'etichetta della posizione a sinistra sotto il titolo se non è disponibile spazio sufficiente.

Metodi tradizionali come il floating avrebbero comportato che l'etichetta della posizione rimanesse allineata a destra su finestre più piccole, il che è tutt'altro che ideale. È possibile correggere ciò spostando l'etichetta a sinistra in corrispondenza di un punto di interruzione specifico. Il problema con questo approccio è che ora si dipende da un punto di interruzione per modificare lo stile del contenuto, che può variare in lunghezza.

Spaziatura e allineamento migliorati

Quando si tratta di spaziatura e allineamento nei CSS, abbiamo dovuto essere intelligenti per realizzare qualsiasi cosa che non fosse il comportamento predefinito. Anche gli effetti che sembrano insignificanti possono essere complicati nei CSS, come l'allineamento verticale o la divisione uniforme dello spazio tra gli elementi, devono fare affidamento su soluzioni alternative o hack. Alcune cose sono assolutamente impossibili da raggiungere.

Flexbox risolve ciò abilitando la distribuzione dello spazio tra un numero sconosciuto di elementi all'interno di un'area di larghezza o altezza sconosciuta e allinea gli oggetti sull'asse X o Y. Funziona in modo molto simile a come strumenti di progettazione come Sketch o Illustrator possono controllare la spaziatura e l'allineamento, consentendo il controllo che ci aspetteremmo dal Web.

Esempio di migliore distribuzione dello spazio con Flexbox

Un ottimo esempio di questo controllo può essere visto sopra: gli elementi di navigazione sono distribuiti uniformemente, centrati verticalmente e il primo e l'ultimo elemento sono allineati al bordo del contenitore di navigazione. Ciò sarebbe stato impossibile usando metodi tradizionali come applicare blocchi in linea agli elementi o fare affidamento sul layout della tabella.

Ordine sorgente

L'ordine di origine si riferisce all'ordine in cui gli elementi vengono visualizzati nella pagina in base a dove compaiono nell'HTML. Per impostazione predefinita, gli elementi verranno visualizzati dall'alto verso il basso e da sinistra a destra per impostazione predefinita - la loro larghezza è determinata dalla loro proprietà di visualizzazione.

L'ordine di origine naturale del documento dovrebbe guidarti quando pensi a come il tuo design si adatterà a varie larghezze del viewport, ma ci sono momenti in cui è utile modificarlo per riorganizzare gli articoli. L'unico modo per farlo prima di Flexbox era nascondere l'elemento e mostrarne un altro, ottenendo un HTML duplicato, o fare affidamento sul posizionamento assoluto, che non funziona sempre quando il contenuto può variare di dimensioni. Con flexbox, puoi semplicemente modificare l'ordine degli articoli flessibili senza la necessità di modificare la struttura HTML sottostante.

Esempio di ordinazione di articoli con Flexbox

L'esempio sopra mostra l'ordinamento in Flexbox: mostriamo il logo sul lato sinistro del piè di pagina, che è coerente con l'intestazione. Su finestre piccole, visualizziamo le posizioni prima del logo. Questo riordino ha senso perché le posizioni sono più importanti in questo contesto.

Layout della griglia

Il layout della griglia CSS è un sistema di layout bidimensionale creato appositamente per il Web. Ci dà la possibilità di dividere la pagina in regioni che possono essere ulteriormente definite in termini di dimensioni, posizione e livello, risultando in un framework nativo incredibilmente potente.

Appropriato

I CSS non si sono mai adattati perfettamente allo strumento di layout degli scopi, quindi abbiamo dovuto essere piuttosto inventivi su come applicare una griglia al nostro lavoro. Sono emersi dei framework di griglia per soddisfare questa esigenza, ma non senza introdurre i propri problemi. Molti dei framework di griglia più diffusi richiedono la definizione del layout nel markup, il che può portare a un gonfiamento del codice, problemi di manutenibilità e offuscare la separazione della struttura e della presentazione del documento.

Con grid, non abbiamo più bisogno di un framework grid: è un framework nativo inserito direttamente nei CSS. Ci consente di definire il layout nei CSS in modo intuitivo, abbracciando nel contempo la fluidità predefinita del Web. Le capacità di questo nuovo strumento di layout sono infinite e ci consente di realizzare layout che erano possibili solo con Javascript prima del suo arrivo.

Esempio di layout della griglia

Layout Web di prossima generazione

Quando si tratta di layout, siamo rimasti bloccati in una carreggiata per un bel po '. I modelli consolidati e i limiti dei precedenti strumenti di layout nei CSS ci hanno portato lungo il percorso dell'omogeneità del layout in passato. Non devi andare lontano sul Web per individuarlo: intestazione, contenuto principale, barra laterale, piè di pagina.

L'arrivo del responsive web design ha dato il via ad alcune nuove idee per il layout della pagina e con esso stanno iniziando a emergere alcuni buoni modelli: abbandonare la barra laterale, semplificare il design e concentrarsi sul contenuto. Ma stiamo anche vedendo emergere modelli che sono diventati così onnipresenti che sentiamo l'esclamazione che "tutti i siti Web sembrano uguali".

Il layout della griglia ci consentirà di uscire dal solco di layout in cui siamo stati e ci fornirà gli strumenti di cui abbiamo bisogno per costruire i layout di prossima generazione. Possiamo finalmente costruire attorno al contenuto invece di forzarlo in schemi di progettazione generici che possono essere trovati su ogni altro sito Web reattivo.

Una parola di cautela

È importante notare che non tutti i browser supportano le funzioni flexbox e grid. Dobbiamo prendere in considerazione chi è il nostro pubblico per ciascun progetto e determinare se la maggior parte degli utenti trarrà vantaggio da queste funzionalità più avanzate, fornendo al contempo un sensibile fallback per i browser non supportati. È perfettamente accettabile fornire agli utenti dei browser legacy una versione semplificata dell'interfaccia utente e migliorarla per gli utenti nei browser più recenti.

C'è più. Molto più.

Abbiamo solo graffiato la superficie di ciò che flexbox e griglia possono fare. Fortunatamente, c'è molta documentazione disponibile che tocca le capacità di questi nuovi strumenti di layout. Ecco alcuni dei miei preferiti:

Flexbox

Griglia

Chiunque abbia creato per il Web è dolorosamente consapevole di varie limitazioni quando si tratta di layout nei CSS. Spesso, ciò ha richiesto di compromettere il design in modo che funzioni come previsto nello sviluppo, o peggio ancora, basandosi su Javascript per implementare il comportamento di cui avevamo bisogno.

L'arrivo di flexbox e layout di griglia segnano una nuova era di layout sul Web. Dobbiamo adottare una nuova mentalità quando si tratta di layout per non essere limitati dalle abitudini, svantaggi e hack del passato. Abbracciamo questi nuovi strumenti e rinnoviamo la nostra esplorazione per ciò che è possibile con il layout sul Web.