Twitter bootstrap tutorial

Oggi recensisco un’interessante guida per chi ama lo sviluppo web moderno e innovativo. Twitter bootstrap è un “framework” grafico rilasciato dal team di sviluppo di Twitter diversi mesi fa. Oggi permette di sviluppare pagine web i quali layout grazie all’integrazione del Grid System rasentano la precisione millimetrica.

Come mi agevola il lavoro?

L’ho volentieri ribatezzato “framework” poiché si basa sui concetti di “scaffolding” (impalcatura) adottato dai framework più moderni in circolazione; lo sviluppatore non deve preoccuparsi di impostare la parte più noiosa del markup (in questo caso, css, struttura, ecc..) poiché questa è già bella e pronta.

Cosa comprende Bootstrap?

E’ un aggregato di diversi progetti:

• Grid System:
  Dal progetto ufficiale:
  960 Grid System è uno sforzo per snellire lo sviluppo del flusso di lavoro su web, fornendo le dimensioni comunemente utilizzate, sulla base di una larghezza di 960 pixel. Ci sono due varianti: 12 e 16 colonne, che possono essere utilizzate separatamente o in tandem! Utilizzando Grid System avrete dei layout impaginati in maniera perfetta!
  URL ufficiale del progetto
• Less:
  E’ una tecnica di refactoring css, sostituita al foglio di stile permette di assegnare costanti su proprietà che all’interno di un normale css si ripeterebbero all’infinito. Un esempio concreto potrebbe essere il seguente.
  URL di approfondimento
• Bootstrap Tutorial:
  Ultimo ma non meno importante dei tre, contiene la logica e i componenti grafici che permettono la realizzazione di un lavoro perfetto e adattabile a seconda delle nostre esigenze.
  URL ufficiale di Twitter Bootstrap

Perché utilizzare bootstrap?

Una serie di piccoli accorgimenti che fanno la differenza:

Twitter e la sezione aurea

La sezione aurea, indica il rapporto fra due lunghezze disuguali, delle quali la maggiore è medio proporzionale tra la minore e la somma delle due. Lo stesso rapporto esiste anche tra la lunghezza minore e la loro differenza.

Tutto ciò che è in rapporto aureo è piacevole e gradevole all’occhio umano. Utilizzando bootstrap, il vostro lavoro sarà più gradevole dal punto di vista dell’impatto visivo.

Velocità di sviluppo

Bootstrap vi porta già a metà dell’opera e risparmia la parte di sviluppo più noiosa. Con lo scaffolding sarà un gioco da ragazzi mettere in piedi il vostro layout.

Layout responsive

Attribuendo una semplice classe potrete gestire il lato responsive del vostro layout rendendolo automaticamente compatibile per mobile e tablet.

Componenti integrati

I componenti javascript più utilizzati sono già inclusi all’interno del framework (carousel slider, modali, popup, e quant’altro), questo riduce a zero la possibilità di incorrere in conflitti fra librerie aumentando l’affidabilità del progetto web.

Come funziona?

Iniziare con bootstrap è semplicissimo, le soluzioni sono 2:

• Scarica il pacchetto formato zip dal sito ufficiale;
• Personalizza il tuo bootstrap, scegliendo e/o scartando le componenti e personalizzando il css attraverso un widget: http://twitter.github.com/bootstrap/download.html

Dichiarare il file bootstrap.css nella sezione head del vostro progetto:

Ora possiamo divertirci!

Scaffolding

Proprio come degli operai, la prima cosa da fare per iniziare la costruzione di un piano di un palazzo è montare l’impalcatura.

Il concetto del grid system è quello di lavorare a “griglie” di 12 (default di bootstrap), e parte dalla fase embrionale di un lavoro: l’analisi concettuale del progetto e l’impostazione del mockup.

Esempio di layout a dimensioni fisse:

Esempio di layout responsive:

Come avrete notato negli esempi la sintassi è molto semplice, il concetto è sempre quello di formare righe da 12 (span4 + span8 = span12) in modo tale da incolonnare perfettamente anche tutti gli elementi sottostanti (che fatica farlo manualmente!).

Altri esempi

Questo esempio indica una riga di classe “row-fluid” (responsive) che riempie 8 colonne col contenuto e 4 colonne vuote (offset).

Righe innestate in un layout a dimensioni fisse:

Semplice, no?

Riepilogo attributi

In questa tabella illustrativa ci sono gli attributi principali da utilizzare in fase di progettazione tecnica:

Responsive layout

Senza tanta fatica è possibile rendere responsive un intero sito web realizzato con bootstrap seguendo le seguenti semplici linee guida:

Viewport

Nella sezione head del vostro sito va dichiarato un meta tag “viewport”:

Nascondere o mostrare gli elementi

E’ davvero ridicolo se penso a come bootstrap ha reso più semplice possibile il modo di eliminare o nascondere degli elementi a seconda del tipo di device. Il teem di sviluppo ha pensato a 3 possibili casistiche:

• Desktop: se il device corrente appartiene alla categoria dei pc;

• Tablet: se il device corrente appartiene alla categoria dei tablet;

• Phone: se il device è uno smartphone;

Tutto questo all’interno del CSS! Come? Ecco un esempio concreto:

In questo caso ho 2 div che contengono 2 informazioni diverse ma in versione desktop voglio che si visualizzi il primo mentre in versione phone il secondo. Per il primo div ho utilizzato una classe visible-desktop mentre per il secondo visible-phone, entrambe classi proprietarie di bootstrap.

Stupido ma allo stesso tempo geniale!

Ecco qui una tabella illustrativa recuperata direttamente dal sito ufficiale del progetto:

Plugins

Oltre allo scaffold, al css e a tutte le cose spiegate precedentemente, gli sviluppatori di bootstrap hanno ben pensato di portarsi dietro una serie di plugins javascript, più utilizzati sul web. Bootstrap di fatti supporta:

• jQuery carousel: slider di immagini e contenuti testuali; [Link]
• Modali: per la comparsa di popup in modalità “elegante”; [Link]
• Dropdown: ampio supporto per i menu a “tendina”; [Link]
• ScrollSpy: eleganti scroll di testo; [Link]
• Toggle: tab di contenuti; [Link]
• Tooltips: simpatiche aree di messaggistica; [Link]
• Popovers: div di contenuti a comparsa (passaggio del mouse); [Link]
• Alerts: gestione grafica e dinamica dei messaggi di alert; [Link]
• Buttons: bottoni con effetti animati in stile “Twitter”; [Link]
• Collapse: o meglio conosciuti come accordion; [Link]
• Typeahead: per l’autocomplete dei campi; [Link]

Tutto questo senza cambiare framework! Noterete ovviamente che molti problemi di incompatibilità saranno risolti grazie a bootstrap.

Componenti

La cosa più divertente è perdervi nei componenti che il framework mette a disposizione. Sono davvero tanti e ben fatti!
Beccatevi l’indirizzo per spulciarveli uno ad uno.

Alcuni esempi?

Bootstrap è utilizzato da migliaia di designer ed è attualmente uno dei trend per lo sviluppo di pagine web. Built with bootstrap è un sito che raccoglie uno showcase dei siti web realizzati con questo framework.

Bootstrap, tema per WordPress

Il mio sviluppo accanito (wordpress+bootstrap) ha fatto si che creassi un tema per Wp che racchiudesse tutte le features di Boostrap, l’ho reso disponibile su GitHub all’indirizzo: https://github.com/mari0bros/Mc-Responsive;

Tra le features più interessanti, puoi configurare dalle impostazioni di wordpress:

• Se il layout può essere fisso o liquido;
• Se il layout può essere responsive o meno;
• Se impostare la classica top-bar di bootstrap;
• Gestire l’attivazione dei pulsanti di condivisione.

Tra l’altro potete osservare le features del tema grazie alla nuova veste grafica di questo blog, interamente sviluppato con bootstrap.

Twitter bootstrap 3

AGGIORNAMENTO: se stai leggendo questo articolo, potrà sicuramente interessarti capire come funziona la nuova release di Twitter Bootstrap. Non preoccuparti, leggere questo tutorial non è stato inutile, poiché molte nozioni sono presenti anche nella nuova versione.

> Twitter bootstrap 3 – leggi la guida