Introduzione a Twitter Bootstrap
Download as ODP, PDF1 like1,095 views
Il documento fornisce un'introduzione a Bootstrap, un framework per la creazione di siti web, evidenziando l'importanza di HTML5, CSS3, e l'utilizzo di preprocessori come SCSS e LESS. Viene sottolineata la struttura a griglia e l'approccio mobile-first, insieme all'uso di componenti CSS e JavaScript 'ready-to-use'. Infine, si menzionano risorse utili e la possibilità di personalizzare Bootstrap per evitare che i siti sembrino standardizzati.
Introduzione a Twitter Bootstrap
- 1. Introduzione a Twitter Bootstrap Comperio srl, 17/10/13
- 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
- 5. Introduzione a Twitter Bootstrap Comperio, 17/10/13
- 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
- 12. Introduzione a Twitter Bootstrap Comperio, 17/10/13
- 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
- 23. Introduzione a Twitter Bootstrap Comperio, 17/10/13 E ora 'ndemo casa...