Introduzione a Bootstrap, un prezioso framework per il front end developing

bootstrap

Chi lavora nel mondo del web, si sarà sicuramente trovato almeno una volta nella sua carriera, ad iniziare un nuovo progetto con un tristissima pagina bianca e qualche scritta in Times New Roman. Del resto, da qualche parte si dovrà pur cominciare, ma per fortuna i tempi sono cambiati. Da qualche anno si stanno sempre più affermando tra gli addetti ai lavori, i “framework CSS”. Si tratta di un pacchetto di file (html, css, e anche javascript) che consentono di iniziare a sviluppare un frontend partendo già da una base solida, collaudata e standard.

Probabilmente molti sviluppatori negli anni si sono già “auto costruiti” un framework, salvandosi da qualche parte pezzi di codice o intere pagine che tornano sempre utili ed evitano di dover reinventare la ruota ogni volta.  Ebbene, anche il team di sviluppatori che ha realizzato Twitter ha deciso di crearsi un proprio framework per allineare e standardizzare i vari progetti interni la cosa interessante è che nel 2011 hanno deciso di condividerlo con il resto del mondo, rilasciandolo come progetto Open Source chiamato appunto Bootstrap Twitter.

Per iniziare basta scaricare il pacchetto che contiene in tre cartelle IMG, JS e CSS tutto l’occorrente per partire. Potete partire scrivendo un semplice file HTML con questo codice:

<!DOCTYPE html>
<html>
    <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

a questo punto sarà possibile utilizzare tutta una serie di componenti Javascript e di classi CSS che velocizzano enormemente il lavoro implementazione front-end. Vediamo rapidamente quali sono i principali componenti che possiamo usare.

Grid System

I grafici sanno benissimo quanto sia essenziale avere un sistema di riferimento per creare dei design proporzionati, efficaci e armoniosi, sono i cosiddetti Grid Systems. In parole povere, si suddivide la pagina in un certo numero di colonne immaginarie di dimensione fissa e separate da un margine prestabilito, in questo modo quando dobbiamo decidere la dimensione di un certo elemento, possiamo ragionare non più in termini assoluti (pixel, punti o altro) ma in termini appunto di “colonne”. Questo ci consente di avere un naturale allineamento delle diverse sezioni e di divedere lo spazio senza dover calcolare ogni volta le dimensioni da assegnare. Bootstrap utilizza un Grid System a 12 colonne da 60 px ognuna e distanziate di 20 px l’una, inoltre ha anche delle classi per gestire i Layout Fluidi, ovvero con dimensioni in percentuale anziché fisse.

CSS Base

Bootstrap definisce un gran numero di classi CSS, per dare un aspetto gradevole a molti elementi usati molto spesso se non sempre. Ad esempio, aggiungendo semplicemente class=”btn” ad un’ anchor link o ad un input button, possiamo renderlo molto più piacevole dal punto di vista grafico. Anche per le tabelle, i form, i titoli, le immagini vale la stessa cosa. Il modo migliore per capire quello che si può ottenere e dare un’occhiata agli esempi presenti sul sito ufficiale. Non è da sottovalutare inoltre, che usando bootstrap saremo abbastanza sicuri che non ci saranno problemi di compatibilità multi browser, perchè il framework è abbondantemente testato e ottimizzato.

Componenti e Javascript
Oltre che dal punto di vista grafico, Bootstrap ci aiuta molto anche nell’implementazione di controllo ed elementi dinamici delle pagine. Parliamo ad esempio, di menù dropdown, interfacce a tab, tooltip, alert, menù ad accordion, slider, banner di navigazione e molto altro. Spesso non è necessario neanche scrivere una sola riga di codice Javascript per ottenre i risultati desiderati, infatti basta usare i cosidetti data-attributes, sono degli attributi particolari da aggiungere ai tag html, che lo script di base di bootstrap interpreta e gestisce senza nessun intervento da parte nostra. Ad esempio se vogliamo creare un tooltip su un link, basterà aggiungere gli attributi rel=”tooltip” title=”first tooltip” nel TAG a. Ancora una volta semplicemente guardando gli esempi riusciremo a capire rapidamente, come ottenere gli effetti voluti.

Questa breve introduzione non copre naturalmente tutto quello che possiamo realizzare con un framework CSS come bootstrap, ad esempio tra le altre cose, possiamo anche gestire in maniera semplice dei design Responsive, ovvero adattabili dinamicamente a diverse risoluzioni e dispositivi (mobile, tablet, desktop ecc…). L’unico modo per scoprirlo effettivamente è iniziare a utilizzarlo, quindi buon lavoro! E non dimenticate di seguirci sui nostri canali 😉

Introduzione a Bootstrap, un prezioso framework per il front end developing ultima modifica: 2013-02-02T15:25:59+00:00 da Codelab Studio

One Comment

  1. Anonimo-
    15 maggio 2013 at 12:13

    La mia prima guida letta su Bootstrap.. almeno ora me ne sono sono fatto un’idea!