twitter bootstrap: an introduction

TWITTER BOOTSTRAPIntroducing

SpeakerAndrea Signorile

QIRISBari - 22 Settembre 2013

“By nerds, for nerds”

version 2.3.2

Web-designer vs. Graphic-designer

Un sito Internet non è una brochure

User Experience comes first

Il web designer NON si può limitare a disegnare il sito internet con Photoshop

e poi… le brochure non mandano e-mail :)

Perchè Bootstrap

Accelera lo sviluppo delle applicazioni web: elementi grafici dell’interfaccia dati direttamente allo sviluppatore

… il quale non aspetterà che il web-designer produca 10 tracciati per l’ombreggiatura di un bottone :)

Cosa è Bootstrap

Una libreria gratuita di tools per lo sviluppo di applicazioni web user-friendly

Un vero e proprio framework visuale

Il progetto di sviluppo open-sourcepiù popolare su GitHub.com(oltre 58k Stargazers e più di 20mila Fork)

OK, that’s amazing! Tell me more!Quattro categorie principali di elementi1. Scaffolding

stili globali del body e dei links, e il grid system

2. Base CSSstili degli elementi HTML generali (bottoni, form, tabelle…)

3. Componentsstili dei componenti base d’interfaccia (tabs, pills, navbar, alerts…)

4. Javascript Pluginscomponenti interattivi (tooltips, popovers, modals…)

Under the hood

Responsive Web Design

Elevata estendibilitàPlugin per i più diffusi Frameworks web

Bootstrap in action

<a href="#" class="btn btn-primary btn-large"><i class="icon-white icon-thumbs-up"></i> Mi piace</a>

<a href="#" class="btn btn-danger btn-large"><i class="icon-white icon-remove"></i> Elimina</a>

<img src="..." class="img-polaroid">

Un CSS, infinite possibilità

Grid System e Responsiveness

Responsiveness Mode OFF ON

Larghezza massima 940px variabile tra 724 e 1170px

Calcolo della width 70px per singolo span percentuale

From Desktop to Phone

Responsive CSS Media Queries

Label Layout width Column width Gutter width

Large display 1200px and up 70px 30px

Default 980px and up 60px 20px

Portrait tablets 768px and above 42px 20px

Phones to tablets 767px and below Fluid columns, no fixed widths

Phones 480px and below Fluid columns, no fixed widths

Helper ClassesPhones - 767px and below Tablets - 979px to 768px Desktops - default

.visible-phone .visible-tablet .visible-desktop

.hidden-phone .hidden-tablet .hidden-desktop

Extending: Font AwesomeFont iconico vettoriale creato da Dave Gandy - un designer a cui 160 glifi non bastavano…

- Perfetta integrazione con la logica di Bootstrap- È sufficiente scaricare ed includere il CSS nell’head- Dimensione e colore settabili come un font qualsiasi- Cheatsheet ed OTF per uniformare la comunicazione web con cartaceo

Versione 3.2.1 - 361 Icone vettoriali scalabili

Evolving: Bootstrap 3MOBILE FIRST

Framework ottimizzato e potenziato per essere responsive from the start

NUOVO DESIGN FLAT

NUOVI ELEMENTI

nuovo twitter typeahead

Il competitor: FOUNDATION

Un front-end framework mobile-first approach

Elementi di interfaccia scarni

Poco supportato dalla community (⅕ di Boostrap)

Foundation

Bootstrap 3

GRAZIE

@andsignoandsigno82@gmail.com