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
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
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/
• 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
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
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
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
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
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
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
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
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/
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
gbonanome
coe401_
naoya
makotoshimazu
kotauchisunsun
polamjag
rkaga
manfredsteyer
ryukobayashi
lewuathe
shinden
utgwkk
ssssota
morganepeng
chrisshort
eileencodes
colly
myddelton
pedronauck
dougneiner
sstephenson
addyosmani
shpigford
jcasabona
tammyeverts
