Home » Web Development » WordPress » Aggiungiamo le colonne di Zurb Foundation ai nostri post WordPress

Aggiungiamo le colonne di Zurb Foundation ai nostri post WordPress

foundation zurb wordpress plugin

Se vi siete già adoperati nello sviluppo di layout responsive design per qualche vostro progetto online (se non lo avete fatto mi chiedo cosa stiate ancora aspettando?) sicuramente avrete sentito parlare di Zurb Foundation, un framework che ci mette a dispozione una vasta gamma di strumenti per la realizzazione di layout responsivi.

Uno degli strumenti più conosciuti di Foundation è la grid, una vera e propria griglia responsive che ci permette di dividere la pagina, o lo spazio a nostra dispozione se ci troviamo all’interno di un contenitore, in 12 colonne. E di conseguenza di poter ricreare delle vere e proprie celle ragionando su queste 12 colonne e non più su pixel e quant’altro. Ma la vera comodità arriva quando Foundation ci permette di scegliere la larghezza delle singole celle, secondo la sua semplicissima suddivisione delle media queries, semplicemente assegnando una classe al nostro elemento. Questo ci permette quindi di segliere diverse impaginazioni a seconda della larghezza del dispositivo che sta guardando il nostro sito.

Capite anche voi che questa funzionalità è straordinaria in fase di sviluppo ci permette di creare abbastanza rapidamente dei layout responsive, e che ci tornerebbe utilissimo poterla utilizzare anche all’interno dei nostri post e delle nostre pagine WordPress.

Esistono decine, se non centinaia di plugin che vanno a renderci disponibile nel nostro editro WordPress degli shortcodes dedicati all’impaginazione in colonne, ma quasi tutti si limitano a suddividere lo spazio a disposizione del contenuto, senza fare alcuna distinzione sulla larghezza complessiva della finestra. Questo significa che se decidiamo di impaginare un contenuto su tre colonne, con i plugin standard resterebbe su tre colonne sia su smartphone che su desktop. Ed è qui che ci viene in aiuto questo plugin WordPress Foundation Columns.

Foundation Columns un plugin WordPress che ci permette di impaginare i nostri contenuti con le colonne di Zurb Foundation

Una volta installato il plugin non farà altro che aggiungere un’iconcina blu con la sagoma della mascotte di Zurb Foundation tra gli strumenti del nostro editor WordPress.

screenshot-foundation-coloumns-plugin

Una volta cliccata ci verrà proposto di scegliere tra columns o block grid:

  • Columns: Sarà la semplice suddivisione in colonne del contenuto
  • Block Grid: Invece sarà la divisione in blocchi, disposti comunque sulla griglia delle colonne da noi decise

Una volta selezionata l’opzione desiderata ci verrà proposta un dialog con le opzioni per creare il nostro shortcode, potremo scegliere la larghezza delle colonne che la nostra cella dovrà occupare nelle 3 dimensioni classiche: Small (smartphone), Medium (tablet), Large (desktop).

Una volta inserito poi ci ritroveremo con il nostro shortcode pronto ad ospitare il nostro contenuto all’interno dell’editor.

foundation-shortcode

Qualche consiglio pratico

Se avete già lavorato con Foundation sicuramente saprete come operare, ma se invece siete nuovi alle logiche con cui Foundation opera sulle 12 colonne allora vi sarà certamente utile avere un paio di consigli:

  1. Definite sempre le larghezze partendo dalla più piccola alla più grande (Small -> Large)
  2. Se non definite una misura specifica l’elemento erediterà per quella specifica dimensione di schermo quella della dimensione più piccola.
  3. Definite sempre almeno la misura Small, in questo modo sarete sicuri che gli schermi più piccoli visualizzeranno il vostro contenuto impaginato correttamente su tutte le dimensioni (perchè le altre dimensioni erediteranno la dimensione Small)
    • Un consiglio di usabilità: Solitamente, sugli schermi degli smartphone difficilmente il contenuto su più colonne verrà mostrato correttamente, per questo vi consiglio di usare quasi sempre 12 come misura Small per le vostre celle, in questo modo presenterete il contenuto su un unica colonna.
  4. Calcolate la dimensione delle vostre celle cercando di fare in modo di avere sempre, in ogni dimensione, che la somma delle celle in riga faccia sempre 12. Per cui usate misure 6 se volete dividere lo spazio in due parti uguali, in 4 se lo volete dividere in tre parti uguali, e così via.

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...