Download - 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