Suggerimento rapido come costruire un layout del blog con Bulma

In questo suggerimento rapido, utilizzeremo Bulma, un framework CSS basato su Flexbox popolare di Jeremy Thomas, per creare un layout del blog reattivo.

Come al solito, per avere un'idea iniziale di ciò che creeremo, dai un'occhiata alla demo Codepen associata (controlla la versione più grande per un'esperienza migliore):

Iniziare con Bulma

Bulma richiede un solo file CSS. Puoi prendere una copia di questo file visitando la sua pagina GitHub, attraverso un gestore di pacchetti (ad esempio npm) o un CDN (ad esempio cdnjs). 

Per questo tutorial, sceglieremo l'ultima opzione. Quindi, inseriamo un collegamento al file richiesto all'interno di  del nostro documento HTML:

Ora siamo pronti per iniziare a costruire il layout del blog!

Costruire il layout

La nostra griglia avrà una larghezza massima e sarà centrata orizzontalmente. Per fare ciò, usiamo Bulma sezione e contenitore classi di aiuto:

Sugli schermi piccoli tutti gli articoli dovrebbero essere impilati verticalmente, come questo:

Di default Bulma, che è stato progettato per il primo cellulare, colloca gli articoli uno sopra l'altro sotto larghezze di 769px. Tutto quello che dobbiamo fare è costruire il layout del blog quando la viewport supera 768px.

Per fare ciò, abbiamo bisogno di un solo elemento: il piastrella. Come vedrai tra un istante, il trucco consiste nel nidificare più elementi di tile.

Con questo in mente, diamo un'occhiata più da vicino al layout desktop desiderato. Come puoi vedere dalla seguente visualizzazione, comprende tre righe:

Per ogni riga, Bulma prevede almeno la seguente gerarchia nidificata:

piastrella è-antenato | └───tile is-parent | └───tile is-child

Spieghiamo che:

• Iniziamo con una tessera di livello superiore che contiene tutte le altre tessere.
• Al suo interno, aggiungiamo le tessere che sono distribuite sull'asse orizzontale. Inoltre, in base a una griglia di dodici colonne, possiamo impostare una larghezza specifica per questi elementi. Questo è possibile usando il è-* classi dove * è un numero compreso tra 1 e 12. Ad esempio, una tessera con il è-6 la classe occuperà il 50% dello spazio orizzontale.
• Per impilare le tessere verticalmente, usiamo il è verticale classe.
• Una volta che vogliamo aggiungere contenuto a una tessera, assegniamo il è-figlio classe ad esso e il è-genitore classe alla tessera genitore.

A questo punto siamo pronti a mettere in pratica questa teoria.

Row # 1

La prima riga contiene tre colonne. La prima e la terza colonna occupano un quarto della larghezza della riga, mentre la seconda occupa metà della larghezza della riga. Inoltre, la terza colonna è composta da due colonne figlio.

In base a ciò che abbiamo discusso sopra, ecco il markup richiesto:

Si noti che definiamo una larghezza specifica solo per la seconda colonna tramite è-6 classe. Certo, se vogliamo, possiamo aggiungere il è-3 classe anche alla prima e alla terza colonna. Ma questo non è necessario perché entrambe le colonne crescono (hanno flex-grow: 1) Per condividere lo spazio orizzontale rimanente.

Inoltre, solo per lo styling, assegniamo alcune classi personalizzate per ogni articolo. E per semplicità, omettiamo i contenuti degli articoli.

Riga # 2

Simile alla prima riga, la seconda riga contiene tre colonne. Il primo occupa metà della larghezza della riga, mentre il secondo e il terzo occupano un quarto della larghezza della riga. Inoltre, la seconda colonna include due colonne figlio.

Ecco il markup correlato:

Riga # 3

La terza fila è un po 'più complicata; qui abbiamo due colonne. Il primo è due volte più grande, rispetto al secondo. All'interno della prima colonna, abbiamo due sotto-righe. La prima sotto-riga contiene tre colonne di uguale dimensione, mentre la seconda sotto-riga include due colonne di uguale dimensione.

Il markup per questo caso è il seguente:

Come vedrai dal codice sopra, la gerarchia nidificata assomiglia a questa:

piastrella è-antenato | ├───tile is-8 is-vertical | | | ├───tile / * Classe extra per IE * / | | | | | ├───tile is-parent | | | └───tile is-child | | | | | ├───tile is-parent | | | └───tile is-child | | | | | └───tile is-parent | | └───tile is-child | | | └───tile / * Classe extra per IE * / | | | ├───tile is-parent | | └───tile is-child | | | └───tile is-parent | └───tile is-child | └───tile is-parent └───tile is-child

Se vuoi avere un'idea migliore di come funziona l'elemento tile, assicurati di controllare la documentazione e di utilizzare gli strumenti di sviluppo del tuo browser preferito per ispezionare le classi associate.

Supporto del browser

Al giorno d'oggi Flexbox ha davvero un grande supporto e il layout del nostro blog dovrebbe funzionare in tutti i browser moderni.

Tuttavia, mentre stavo testando la pagina in diversi browser, ho scoperto che IE 11 non ha prodotto il risultato desiderato. Ecco cosa stavo vedendo:

D'altra parte, test con Microsoft Edge I non ha riscontrato questi problemi. Forse è una specie di bug con le ultime versioni di IE. Ad ogni modo, ho provato a vedere se c'era una soluzione rapida che evitasse questi problemi. 

L'ho risolto aggiungendo flex-base: auto agli articoli e alle tessere di livello superiore di è verticale riquadro della terza riga (vedi gerarchia precedente).

Ancora una volta, questa è una soluzione rapida che sembra funzionare per questo particolare esempio. Per le tue implementazioni, potresti dover apportare altre modifiche al tuo codice.

Conclusione

In questo rapido suggerimento, abbiamo imparato a costruire una griglia di blog reattiva con Bulma, un framework costruito su Flexbox. 

Hai mai provato Bulma in uno dei tuoi progetti? Che ne pensate? Condividi le tue esperienze nei commenti qui sotto.