Introduzione a Bootstrap

Nato come un progetto interno a Twitter ad opera degli sviluppatori Mark Otto e Jacob Thornton ed oggi indipendente, Bootstrap può a buon diritto considerarsi il re dei framework per lo sviluppo di interfacce web. A corroborare questo assunto una serie di dati:

• è il progetto più popolare sulla piattaforma GitHub, con oltre 58.000 star e più di 20.000 fork;
• secondo recenti statistiche tracce del codice di questo framework si ritrovano sull'1% dei siti web mondiali, una cifra che tradotta in termini assoluti si traduce in un numero senz'altro ragguardevole;
• gode di un supporto nella community degli sviluppatori che non ha pari rispetto agli front-end framework;
• chi lo usa può contare su una mole enorme di risorse e ausilii di ogni tipo;
• è diventato una sorta di standard de facto come punto di partenza in ambiti come la creazione di template HTML preconfezionati e temi per i principali CMS, soprattutto in un'ottica responsiva.

L'uscita della versione 3.0, con tutte le migliorie che porta con sé, non potrà che rafforzare questo scenario.

Quando usare e quando non usare Bootstrap

Tanta popolarità non significa, automaticamente, che Bootstrap sia la soluzione giusta in ogni contesto e in ogni progetto. Sam Holt, su Flippin' Awesome, ha di recente così sintetizzato:

«se siete puristi del codice e della semantica applicata al codice, se la flessibilità e la mantenibilità del codice stesso sono per voi priorità assolute, se il design del sito su cui lavorate deve avere i crismi dell'originalità, se deve essere alternativo e innovativo, allora non usate Bootstrap, oppure rivolgetevi ad altri framework più leggeri e flessibili. Se invece il design del vostro sito è più convenzionale, se siete alla ricerca di uno strumento che vi fornisca un punto di partenza solido nella strutturazione del progetto, allora Bootstrap fa al vostro caso.»

L'idea del 'punto di partenza o di avvio', del resto, è implicita nel nome stesso del framework. Citiamo dalla pagina Wikipedia per la voce 'boot':

In informatica il termine di origine inglese boot (o bootstrap, o più raramente booting) indica, in generale, l'insieme dei processi che vengono eseguiti da un computer durante la fase di avvio, in particolare dall'accensione fino al completo caricamento in memoria primaria del kernel del sistema operativo a partire dalla memoria secondaria.

Se si perde di vista questa idea di fondo, si rischia di considerare un tool come Bootstrap come la soluzione definitiva in fatto di web design. È invece solo un tool per gestire al meglio la fase di avvio di un progetto, un modo per poter contare su una serie di componenti riusabili e personalizzabili, comunque adattabili in termini stilistici ed estetici alle richieste del progetto e alla creatività di chi concepisce il sito. Una gabbia, dirà qualcuno, ma che può avere una sua funzione e una sua utilità per non dover ricominciare ogni volta da zero. Continuando nella citazione da Wikipedia: "Durante il bootstrap, il computer esegue un determinato processo allo scopo di mettersi in condizione di operare". Tutto qui.

Struttura della guida

Questa guida è strutturata in 15 lezioni. Non troverete una trattazione sistematica dei singoli componenti. Per questo scopo abbiamo approntato un'apposita reference (ispirata alla documentazione ufficiale e più sintetica), anche a beneficio di chi si scontra con l'ostacolo della lingua inglese.

Le lezioni vogliono invece essere una sorta di bootstrap di... Bootstrap! Un avvio all'uso del framework. Un modo per definire il migliore approccio all'utilizzo. Ci concentreremo pertanto su:

• il reperimento del framework e la scelta delle modalità di download;
• la strutturazione di un template HTML di partenza;
• una panoramica generale dei componenti;
• l'impalcatura fondamentale di ogni progetto Bootstrap, ovvero la griglia e le funzionalità responsive del layout;
• le pratiche utili per la personalizzazione del framework.

Quest'ultimo è un aspetto cruciale. Una delle critiche maggiori rivolte a Bootstrap e agli altri framework della stessa categoria, è che i siti con essi realizzati sembrano tutti uguali; oppure che un sito fatto con Bootstrap 'si vede subito che è fatto con Bootstrap'. Non è questa la sede per aprire un dibattito sul punto. Il nostro scopo è dimostrare come con le opportune strategie e potendo affidarsi a un minimo di creatività, si possa variare l'estetica per realizzare creazioni di impatto e personali anche usando questo framework. La galleria di Expo del sito ufficiale di Bootstrap è da questo punto di vista una dimostrazione più che evidente.

Il progetto guida

Per rafforzare questa idea di fondo abbiamo realizzato una piccola demo di un sito fittizio, con una struttura molto canonica, con tre pagine (Home, Portfolio e Contatti) su cui abbiamo cercato di inserire a fini didattici un buon numero di componenti del framework. Potete scaricare sin da ora i file del progetto e visualizzare il mini-sito a partire dalla home page. La raccomandazione è di testare anche su dispositivi mobili per apprezzare le caratteristiche responsive di Bootstrap.

Lo studio del codice della demo, insieme alla lettura delle lezioni, della reference e della documentazione ufficiale dovrebbero costituire una buona base per iniziare a usare Bootstrap proficuamente e per invogliarvi a farlo. Aggiungiamo alla lista la Guida a Foundation, per i concetti generali e per fare un confronto tra i due framework. Buona lettura.