Creare un layout bootstrap con LayoutIt!

Il Twitter Bootstrap - o più semplicemente Bootstrap - è un framework (creato da Mark Otto e Jacob Thornton) per la creazione di pagine Web realizzato dai creatori di Twitter.

Si tratta, in pratica, di un insieme di elementi grafici, stilistici e di script javascript che consentono di creare velocemente dei layout grafici gradevoli e soprattutto responsive cioè in grado di adattarsi automaticamente alle caratteristiche del dispositivo che sta leggendo la pagina web.

Si tratta di uno strumento molto potente tanto che, ad esempio, nelle versioni  3.x del CMS Joomla è nativamente incluso.

Creare un layout che utilizzi Bootstrap è molto semplice: è sufficiente includere i file di libreria nelle pagine web che stiamo creando, utilizzare le classi predefinite e le convenzioni per il formato della pagina ed 
il gioco è fatto: le funzionalità responsive e gli stili saranno subito disponibili per la nostra pagina.

Il sito ufficiale del progetto, da cui scaricare il pacchetto del framework in formato zip, è disponibile a questa pagina.

Per chi è totalmente a digiuno di codice, esiste uno strumento on-line che semplifica ulteriormente il lavoro e consente di creare, in modo automatico e visuale, una struttura HTML basata su Bootstrap senza conoscere regole e sintassi dei vari linguaggi e del framework.

LayoutIt! editor visuale on-line per Bootstrap

LayoutIt! è uno strumento on-line gratuito che ci aiuta a creare il codice per un layout Bootstrap in modo semplice e veloce grazie ad una interfaccia con funzioni Drag & Drop. Il servizio, ancora in versione beta, è raggiungibile all’indirizzo www.layoutit.com ed è utilizzabile gratuitamente senza registrazione.

Per creare un nuovo layout si può partire da zero o iniziare con uno dei tre modelli di base:

• Starter template;
• Basic marketing site;
• Article.

Scelto il punto di inizio si passa alla finestra di modifica, dal quale è possibile iniziare a personalizzare il layout.

Nella parte centrale della finestra è presente una anteprima della nostra pagina web con tutti gli elementi selezionabili e modificabili singolarmente, mentre nella barra di sinistra ci sono tutti gli strumenti a disposizione che possono essere inseriti nella pagina semplicemente selezionandoli e trascinandoli nel punto desiderato.

Gli strumenti a disposizione sono:

• Grid System;
• Base Css;
• Components;
• Javascript.

Tramite Grid System è possibile inserire delle griglie, cioè una suddivisione per colonne, per una determinata porzione di pagina. Il framework Bootstrap, è bene precisarlo, si basa su una "griglia ideale di 12 colonne" che possono essere unite tra di loro a secondo delle specifiche esigenze. Ad esempio è possibile inserire una suddivisione a due (6 6) o tre (4 4 4) colonne identiche oppure, ancora, avere colonne con dimensioni differenti... l'importante è che la somma complessiva sia, appunto 12.

Da Base Css è possibile inserire tutti gli elementi standard di una pagina richiamati con i rispettivi stili: titoli, paragrafi, form, tabelle, bottoni, ecc. Questi elementi possono essere trascinati nella pagina e poi configurati singolarmente stabilendo, ad esempio, l'allineamento, lo stile, la dimensione, ecc. (le caratteristiche personalizzabili variano a seconda dello specifico elemento selezionato).

Da Components si ha la possibilità di inserire altri elementi più complessi quali set di bottoni, Progress Bar, menu Breadcrumb, blocchi Pagination ed altro. Anche in questo caso, ogni componente ha un set di opzioni configurabili che variano a seconda delle sue specifiche caratteristiche.

Da Javascript, infine, si inseriscono blocchi che necessitano di codice javascrit perchè rispondono a diverse esigenze, ad esempio menù, alert, tab, accordion, finestre modali, ecc.

Una volta concluso il disegno della pagina è possibile, ovviamente, scaricare il tutto cliccando sul bottone Download.

Ci sono tre opzioni per il download:

• Copia del codice HTML per il layout creato (in questo caso dobbiamo aver già provveduto a scaricare separatamente il framework);
• Download del File HTML (anche in questo caso dobbiamo scaricare separatamente il framework);
• Download del file HTML e di tutti i file necessari per il funzionamento.

È inoltre possibile salvare quello che abbiamo creato per un successivo riutilizzo (in tal caso ci verrà fornita una URL personale alla quale potremo "ritrovare" il nostro progetto). Questa modalità utile ad esempio per dare ai clienti o colleghi un anteprima del lavoro fatto.

Come detto prima, il sito è ancora in versione beta quindi molto probabilmente saranno aggiunte molte altre caratteristiche, ma già a questo livello si rivela uno strumento molto utile per chi vuole creare velocemente almeno uno scheletro di progetto o comunque un punto di partenza su cui lavorare.

È bene precisare, infatti, che questo strumento non fornisce un "template" così come lo conosciamo nei vari CMS ma permette semplicemente di avere un codice HTML di base da cui partire per creare siti web "a mano" oppure per realizzare template da utilizzare nel nostro CMS preferito.