Costruire con una griglia è diventato un requisito quotidiano per gli sviluppatori front-end. Non solo le griglie forniscono un senso del ritmo e coerenza nel design, ma quando viene utilizzata una struttura di griglia ben nota fornisce un linguaggio di progettazione collettiva semplice per il lavoro di squadra trasversale.

Flexboxgrid è un nuovo framework che consente di combinare la prevedibilità e la struttura del linguaggio comune di un sistema a griglia con la flessibilità e la semplicità di Flexbox. Oggi illustreremo le basi dell'utilizzo di Flexboxgrid e lo useremo per creare una semplice pagina di portfolio di feed Dribbble. Iniziamo!

Inizia con il Flexboxgrid CSS

Il primo passo per iniziare con Flexboxgrid è quello di prendere il CSS. Per lo sviluppo, utilizzare la versione non ancora terminata.

Quindi, parliamo un po 'di come funziona Flexboxgrid. La documentazione è completamente contenuta nella homepage di Flexboxgrid.com, ma andremo oltre i punti più alti.

Colonne reattive

Flexboxgrid è progettato per supportare quattro breakpoint primari, chiamati arbitrariamente per evitare problemi di manutenzione dei punti di interruzione specifici dei pixel. Questi punti di interruzione sono mano, giro, scrivania, e parete, prende il nome da quelle che sono viste come larghezze della vista della mano, del lap, della scrivania e del muro (es .: dove è probabile che un dispositivo si trovi). Le classi di colonne stesse sono strutturate in questo modo:

column- [numero] - [breakpoint] column-4 - hand column-auto - wall

Flexboxgrid è una griglia a dodici colonne e utilizza colonne basate sulla percentuale in combinazione con la potenza della flexbox per una griglia solida come una roccia.

Nota: il supporto browser per flexbox è ancora incompleto; Flexboxgrid non dovrebbe essere invocato per progetti che richiedono un'implementazione completa del browser.

Una riga di esempio

Prendendo direttamente dalla documentazione, il markup per una riga di esempio usando Flexboxgrid è simile a questo:

 
 
di risposta
 
 

Colonne automatiche

C'è una larghezza di colonna "automatica" disponibile per ogni punto di interruzione. Questo fa qualcosa di diverso da un tradizionale larghezza: auto regola. Flexbox riempie automaticamente la riga in modo appropriato con colonne di dimensioni pari indipendentemente da quante sono posizionate nella riga.

 
 
auto
 
 
 
auto
 
 
 
auto
 
 

Ad esempio, nell'esempio sopra, le colonne occuperanno un terzo ciascuna.

Allineamento

C'è molto di più che può essere fatto con Flexboxgrid, incluso l'allineamento delle colonne di una riga in orizzontale:

così come verticalmente:

Flexboxgrid sfrutta anche le facili tecniche di riordino di Flexbox e le opzioni di spaziatura dinamica, ma per ora andremo avanti con la creazione della nostra griglia Dribbble!

Una griglia Dribbble

Inizieremo con un semplice documento HTML vuoto, incluso jQuery e Normalize. Sentiti libero di usare qualcosa come HTML5 Boilerplate con strumenti come Modernizr, ma per questo progetto resteremo concentrati su JavaScript, HTML e CSS che devi scrivere.

Da qui, costruiremo la struttura dell'HTML che vogliamo utilizzare e quindi collegheremo tutto con l'API di Dribbble.

La nostra revisione della griglia

In primo luogo, supponiamo di voler impostare una griglia che inizi ad almeno due blocchi per riga orizzontale e si muova fino a sei blocchi per fila parete punto di rottura. Ecco come lo faremmo:

colonna 6 - mano Detto ciò al mano punto di interruzione (per i dispositivi tenuti in mano) ogni blocco riempirà sei delle dodici colonne. A questo punto saremo quindi in grado di adattare due miniature Dribbble su una riga del nostro layout.

Al giro punto di rottura, colonna 4 - lap Detto che ogni blocco sarà largo quattro colonne, quindi saremo in grado di adattarsi tre su una riga.

Più markup dinamico

Diciamo che vogliamo rendere la griglia un po 'più dinamica. Ecco un esempio di una riga della griglia che utilizza larghezza automatica e larghezza variabile.

Nota: nel breakpoint del muro, in realtà abbiamo una griglia con cinque punti di vista; questo normalmente non sarebbe possibile con un sistema a dodici colonne senza aggiungere classi personalizzate, dato che dodici non è divisibile per cinque. Tuttavia, con Flexbox, le larghezze delle colonne possono essere facilmente calcolate automaticamente.

Portare in Jribbble

Ora che abbiamo una struttura a griglia, scriviamo il codice necessario per inserire il nostro contenuto Dribbble. Useremo il plugin jQuery Jribbble. Puoi prendere la fonte da GitHub. Jribbble renderà estremamente facile effettuare scatti da Dribbble.

Includi Jribbble in un file JS separato o nella parte superiore del tuo script.js. Sotto Jribbble, questo codice porterà i tuoi scatti Dribbble desiderati.

(function () var playerId = "envato"; $ .jribbble.getShotsByPlayerId (playerId, function (data) var shots = data.shots; var h = "; $ (shots) .each (function (i, shot) h + = '
'; h + = ''; h + = '
'; ); $ (' Dribbble colpi.) Html (h).; );  ());

Per prima cosa avvolgiamo il nostro codice in un'espressione di funzione immediatamente invocata, che ci assicura di proteggere il nostro ambito JavaScript. Successivamente, impostiamo il nostro ID giocatore e successivamente usiamo Jribbble per portare i nostri scatti. Una volta ottenuti i nostri scatti, costruiamo l'html ripetendo ogni scatto e riempiamo un elemento con la classe Dribbble-shots con quell'html.

La nostra struttura HTML dovrebbe assomigliare a questa:

         
 
I miei scatti di Dribbble
 
 
 
    

Tieni presente che abbiamo anche incluso un carattere Google. 

Styling minimale

Successivamente, forniremo uno stile minimo style.css:

body font-family: 'Maven Pro', sans-serif; background-color: # f1faff;  h1 font-weight: 400;  * [class ^ = column] / * max-height: 100px; * / overflow: hidden; margin-bottom: 12px;  * [class ^ = column] img width: 100%;  .container width: 80%; margine: 0 auto; posizione: relativa; padding-top: 100px;  a display: block; opacità: 0,9;  a: hover opacity: 1; 

Il tuo prodotto finale dovrebbe assomigliare a questo:

Conclusione

Flexboxgrid offre una soluzione di rete molto flessibile che consente un controllo molto interessante sulla spaziatura, il dimensionamento, la visualizzazione e persino l'ordine degli elementi. Se combinato con contenuti accattivanti, Flexboxgrid ti consente di fare facilmente ciò che prima era molto più complicato con la tua rete.