Twitter Bootstrap, amico dei web designer

Scritto il 11 febbraio, 2013 in news

Oggi vorrei presentarvi uno strumento free davvero utile per noi sviluppatori, sempre attenti all’innovazione e alle nuove tecnologie per il web.

bootstrap

Twitter Bootstrap è un set di elementi grafici, stilistici e di javascript pronti all’uso e costantemente aggiornati dal team di Twitter. Questo rende sicuramente questo framework di livello molto alto e affidabile!

Quindi se volete sviluppare un sito velocemente, che sia html5, responsive e che necessita degli elementi comunemente usati da tutti i siti moderni, Twitter Bootstrap sarà in vostro nuovo migliore amico!

COME INIZIARE?

Per prima cosa dovete procurarvi il kit (http://twitter.github.com/bootstrap).

A questo punto potrete notare all’interno due file fondamentali che dobbiamo aggiungere al nostro sito:

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>

Una volta collegati questi due file, ossia la libreria con gli stili predefiniti e quella per gli script, possiamo iniziare ad utilizzarli semplicemente aggiungendo classi specifiche ai nostri elementi html.

Non vi sembra semplice?

QUALI STRUMENTI POSSIAMO USARE?

Grid System

Bootstrap propone una griglia fissa o fluida basata su grid960. Utilizzare una griglia di riferimento per il layout è sicuramente una delle cose fondamentali per un sito moderno (non obbligatoria ovviamente), perchè oltre ad assicurare un posizionamento preciso degli elementi permette facilmente la loro risistemazione in caso di design responsive, senza dover scrivere righe e righe di CSS.
Grazie alla griglia del Bootstrap possiamo creare la nostra struttura semplicemente aggiungendo una classe  al nostro elemento. Ricordiamoci che il grid system è impostato con una larghezza massima della pagina di 960px, suddiviso in 12 o 16 colonne. Vogliamo una sezione che occupi 3 colonne? Aggiungiamo la classe class=span3 al nostro elemento e il gioco è fatto!

Elementi Css Base –

Il file bootstrap.css che abbiamo inserito contiene una serie di effetti preconfezionati e classi css pronte all’uso che possiamo associare ai nostri elementi html come bottoni e form. Quindi ci basterà per esempio utilizzare la classe class=”btn” su un elemento per avere un bottone fatto solo con Css di alta qualità.

Componenti –

Oltre ai semplici bottoni possiamo utilizzare anche elementi più complessi che necessitano dell’interazione dell’utente. Paginazioni, menù a tendina, progress bar e molti altri componenti sono pronti per essere usati. Vogliamo creare un alert d’effetto? Aggiungiamo la classe class=”alert” al nostro elemento e verrà trasformato in un alert.

Javascript – 

Nel file bootstrap.js troviamo anche una serie di plugin jquery in stile twitter. Qui troviamo elementi come Lightbox, Carousel, Tab, Accordion, Tooltip e molti altri da implementare con poche righe di codice.

La cosa bella di questo strumento è anche la possibilità di customizzare il download, prendendo solo gli effetti che ci interessano senza appesantire il nostro sito con file inutilizzati.

Allora? Siete pronti ad utilizzare Twitter Bootstrap?

Dite la vostra!!