Showcase of the popular framework brought by Twitter developer, prepared for a Talk during 77th edition of "FIERA DEL LEVANTE 2013" in Bari

1. TWITTER BOOTSTRAP
Introducing
Speaker
Andrea Signorile
QIRIS
Bari - 22 Settembre 2013
“By nerds, for nerds”
version 2.3.2

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 :)

3. 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 :)

4. 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-source
più popolare su GitHub.com
(oltre 58k Stargazers e più di 20mila Fork)

5. OK, that’s amazing! Tell me more!
Quattro categorie principali di elementi
1. Scaffolding
stili globali del body e dei links, e il grid system
2. Base CSS
stili degli elementi HTML generali (bottoni, form, tabelle…)
3. Components
stili dei componenti base d’interfaccia (tabs, pills, navbar, alerts…)
4. Javascript Plugins
componenti interattivi (tooltips, popovers, modals…)

6. Under the hood
Responsive Web Design

7. Elevata estendibilità
Plugin per i più diffusi Frameworks web

8. 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">

9. Un CSS, infinite possibilità

10. Grid System e Responsiveness
Responsiveness Mode OFF ON
Larghezza massima 940px variabile tra 724 e 1170px
Calcolo della width 70px per singolo span percentuale

11. 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 Classes
Phones - 767px and below Tablets - 979px to 768px Desktops - default
.visible-phone .visible-tablet .visible-desktop
.hidden-phone .hidden-tablet .hidden-desktop

12. Extending: Font Awesome
Font 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

13. Evolving: Bootstrap 3
MOBILE FIRST
Framework ottimizzato e potenziato per essere
responsive from the start
NUOVO DESIGN FLAT
NUOVI ELEMENTI
nuovo twitter typeahead

14. Il competitor: FOUNDATION
Un front-end framework
mobile-first approach
Elementi di interfaccia
scarni
Poco supportato dalla
community
(⅕ di Boostrap)
Foundation
Bootstrap 3

15. GRAZIE
@andsignoandsigno82@gmail.com