Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduzione a Twitter Bootstrap

Giulio
October 17, 2013
Programming
0
47

Introduzione a Twitter Bootstrap

Brevissima introduzione (ad uso interno) al front-end framework Bootstrap, tenuta all'interno di Comperio srl.

http://getbootstrap.com/

Giulio

October 17, 2013
Tweet

More Decks by Giulio

See All by Giulio
Usare Bootstrap in DiscoveryNG
gbonanome
0
85

Other Decks in Programming

See All in Programming
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
360
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
6
1.3k
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
270
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
340
Beyond ORM
77web
11
1.5k
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.1k
命名をリントする
chiroruxx
1
570
テストケースの名前はどうつけるべきか？
orgachem
PRO
1
180
ATDDで素早く安定した デリバリを実現しよう！
tonnsama
1
1.2k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
100
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう？知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
HTML/CSS超絶浅い説明
yuki0329
0
170

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
What's in a price? How to price your products and services
michaelherold
244
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
It's Worth the Effort
3n
183
28k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Site-Speed That Sticks
csswizardry
2
220
Speed Design
sergeychernyshev
25
720
YesSQL, Process and Tooling at Scale
rocio
170
14k
Designing for Performance
lara
604
68k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
RailsConf 2023
tenderlove
29
960

Transcript

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