2. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Esistono molti framework per la creazione di frontend
http://usablica.github.io/front-end-frameworks/compare.html
3. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Molti di questi framework condividono alcuni punti chiave:
●
HTML5 e CSS3, ovvero supporto per browser moderni (sì IE
resta un problema)
●
SCSS o LESS, ovvero un pre-processore per i fogli di stile
●
Layout a griglia e mobile-first
●
Stile globale degli elementi HTML
●
Componenti CSS “ready-to-use” per varie situazioni
●
jQuery come libreria javascript
●
Componenti Javascript attivabili grazie al semplice uso
dell'attibuto data
4. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Molti di questi framework condividono alcuni punti chiave:
●
HTML5 e CSS3, ovvero supporto per
browser moderni (sì IE resta un problema)
●
SCSS o LESS, ovvero un pre-processore per i fogli di stile
●
Layout a griglia e mobile-first
●
Stile globale degli elementi HTML
●
Componenti CSS “ready-to-use” per varie situazioni
●
jQuery come libreria javascript
●
Componenti Javascript attivabili grazie al semplice uso dell'attibuto data
6. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
<!DOCTYPE html>
HTML5 shim and Respond.js = avere a che fare con Internet Explorer
-webkit, -moz, -o = vendor prefix
Ok, ma cosa vuol dire HTML5 e CSS3? Eccovi un po' di risorse utili:
●
Una simpatica introduzione a HTML5: http://diveintohtml5.info/
(ce l'ho in italiano, su carta, se volete ve lo presto)
●
HTML5 doctor
●
CSS-Tricks
E per qualsiasi dubbio: http://caniuse.com/
7. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Detto tra noi....
HTML5
●
più elementi = migliore semantica
●
attributi personalizzati
●
Niente chiusura per gli elementi vuoti:
NO <img src=””/>
SÌ <img src=””>
CSS3
Bordi arrotondati, sfondi multipli, ombreggiature, animazioni, e chi più ne
ha più ne metta....http://lmgtfy.com/?q=css3+examples
Ma soprattutto: Media Queries
8. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Molti di questi framework condividono alcuni punti chiave:
●
●
HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un
problema)
SCSS o LESS, ovvero un pre-processore
per i fogli di stile
●
Layout a griglia e mobile-first
●
Stile globale degli elementi HTML
●
Componenti CSS “ready-to-use” per varie situazioni
●
jQuery come libreria javascript
●
Componenti Javascript attivabili grazie al semplice uso dell'attibuto
data
9. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Pre-processare il foglio di stile significa poter usare:
●
Variabili
●
Nesting
●
Mixins
●
Operatori
●
Funzioni
Comunque, mai paura....è sempre CSS...
10. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
{Less} : http://lesscss.org/
Basato su Node.js – molto diffuso e adottato
VS
Sass : http://sass-lang.com/guide
Basato su Ruby – ecosistema Compass
11. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Molti di questi framework condividono alcuni punti chiave:
●
HTML5 e CSS3, ovvero supporto per browser moderni (sì IE
resta un problema)
●
SCSS o LESS, ovvero un pre-processore per i fogli di stile
●
Layout a griglia e mobile-first
●
Stile globale degli elementi HTML
●
Componenti CSS “ready-to-use” per varie situazioni
●
jQuery come libreria javascript
●
Componenti Javascript attivabili grazie al semplice uso
dell'attibuto data
13. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
La griglia di Bootstrap ha 12 colonne e diverse utility
class a seconda del viewport
http://getbootstrap.com/css/#grid
14. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Responsive Webdesign
●
Cos'è http://alistapart.com/article/responsive-web-design
●
Esempi http://zurb.com/responsive
Mobile-first = Content-first
●
Il contenuto è la parte della pagina che ha più valore
●
Ordinare il codice sorgente in base al contenuto
●
Progressive enhancement vs graceful degradation
15. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Molti di questi framework condividono alcuni punti chiave:
●
HTML5 e CSS3, ovvero supporto per browser moderni (sì IE
resta un problema)
●
SCSS o LESS, ovvero un pre-processore per i fogli di stile
●
Layout a griglia e mobile-first
●
Stile globale degli elementi HTML
●
Componenti CSS “ready-to-use” per varie situazioni
●
jQuery come libreria javascript
●
Componenti Javascript attivabili grazie al semplice uso
dell'attibuto data
16. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Bootstrap stila in maniera predefinita molti elementi di
base:
●
Typography
●
Tables
●
Forms
●
Buttons
●
Utility classes
17. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Molti di questi framework condividono alcuni punti chiave:
●
HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un
problema)
●
SCSS o LESS, ovvero un pre-processore per i fogli di stile
●
Layout a griglia e mobile-first
●
Stile globale degli elementi HTML
●
●
●
Componenti CSS “ready-to-use” per varie
situazioni
jQuery come libreria javascript
Componenti Javascript attivabili grazie al semplice uso dell'attibuto
data
18. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Sono tantissimi:
http://getbootstrap.com/components/
Ad esempio:
●
Icone: un'occhiata a Font Awesome
●
Pulsanti di navigazione
●
Gruppi di bottoni e dropdown
●
Media object, list group e panels
19. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Attenzione all'ecosistema Bootstrap!
Esistono tantissimi plugin e componenti esterni,
indipendenti da BS ma che lo usano come tema di
base.
Es:
Select2: http://ivaynberg.github.io/select2/
DataTables: http://datatables.net/blog/Twitter_Bootstrap
Ecc. ecc. ecc.
http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
20. Introduzione a Twitter Bootstrap
Comperio srl, 17/10/13
Molti di questi framework condividono alcuni punti chiave:
●
HTML5 e CSS3, ovvero supporto per browser moderni (sì IE resta un
problema)
●
SCSS o LESS, ovvero un pre-processore per i fogli di stile
●
Layout a griglia e mobile-first
●
Stile globale degli elementi HTML
●
Componenti CSS “ready-to-use” per varie situazioni
●
jQuery come libreria javascript
●
Componenti Javascript attivabili grazie al
semplice uso dell'attibuto data
21. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Significa avere una API che osserva l'uso degli attributi data- e permette
di attivare i componenti senza scrivere una sola riga di javascript
●
Dropdown
●
Modali
●
Tooltips e popover
●
Collapse
●
Carousel
●
Ecc. ecc. ecc.
Posso solo farveli vedere in azione
http://getbootstrap.com/javascript/
22. Introduzione a Twitter Bootstrap
Comperio, 17/10/13
Raccomandazioni:
●
Perchè il vostro sito non sembri fatto con Bootstrap
aggiungete il vostro stile. Customizzare BS è facile. Ci
sono anche dei temi già fatti. E se non mi credete,
guardate qui.
●
Ricordate che ci sono molti template già fatti
●
È solo un framework per il front-end