Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap 4 is Coming!

458 views

Published on

Diventato ormai uno standard nello sviluppo web, tanto di essere adottato anche nelle specifiche della pubblica amministrazione, Bootstrap è lo strumento più importante da conoscere per uno sviluppatore web. In questa sessione vedremo, con un approccio molto pratico, le novità della versione 4, entrando nel dettaglio della personalizzazione avanza del codice sorgente con SASS e analizzando la nuova gestione del grid system basato su Flexbox.

Published in: Design
  • Be the first to comment

Bootstrap 4 is Coming!

  1. 1. Bootstrap 4 is coming! CARMINE ALFANO FAENZA 2017 #cssday
  2. 2. Mi presento !"#$%&'(%)*+,-$.#%)/$&*$)+0%1 23%11/.'(,.$445&&+ 6$-/7++8'(9/7(:/;%<)(=/>57&%-
  3. 3. C’era una volta Bootstrap
  4. 4. Hamburger menu Jumbotron Modal Carousel Popover Responsive
  5. 5. Zurb Foundation CSS Grid Layout
  6. 6. Flexbox + Sass = BS4
  7. 7. Novità globali • Rimosso supporto a IE8, IE9 e iOS6 • Flexbox abilitato di default • Switch da Less a Sass • Aggiunto nuovo breakpoint per display più piccoli di 576px
  8. 8. Nuovo CSS di reset Normalize.css viene sostituito da Reboot.css • font-size di base: 16px • Unità di misura primaria espressa in rem • Ottimizzati i margini su titoli e blocchi di testo • Border-box su tutti gli elementi • Classi più facili da sovrascrivere
  9. 9. Navbar Possibilità di decidere da quale breakpoint nascondere la navbar
  10. 10. Cards Wells, thumbnails e panels vengono sostituiti da cards.
  11. 11. Addio icone La libreria Glyphicon non sarà più inclusa
  12. 12. Nuove Utilities Utilities per gestire margin e padding .p-md-3 .pb-0 (padding-bottom: 0;) .p-3 (padding: 3rem;) .m-md-5 .mt-0 (margin-top: 0;) .ml-1 (margin-left: 1rem;) .mx-auto (margin-left: auto; margin-right: auto;)
  13. 13. Nuove Utilities Allineare il testo in base al breakpoint .text-xs-left (-right, -center) .text-sm-left (-right, -center) .text-md-left (-right, -center) .text-lg-left (-right, -center) .text-xl-left (-right, -center)
  14. 14. Nuove Utilities Floating degli elementi in base al breakpoint .float-xs-left (-right) .float-sm-left (-right) .float-md-left (-right) .float-lg-left (-right) .float-xl-left (-right)
  15. 15. Nuove Utilities Possibilità di definire dei range per nascondere gli elementi .hidden-{breakpoint} diventa .hidden-{breakpoint}-up o down Ad es.: .hidden-xs-down.hidden-lg-up mostrerà l’elemento solo su sm e md
  16. 16. Breakpoints in Bootstrap 4 Di default è possibile gestire 5 dimensioni del viewport: - Extra small (.col-*), per gli smartphone (< 576px) - Small (.col-sm-*), per i tablet (>= 576px) - Medium (.col-md-*), per i desktop ( >= 768px) - Large (.col-lg-*), per i desktop larghi (>=992 px) - Extra Large (.col-xl-*) per i desktop molto larghi (>=1200px) - .col, larghezza uguale su tutti i breakpoint - .col-{sm, md, lg, xl}, larghezza uguale su breakpoint specifico
  17. 17. Tabella comparativa
  18. 18. il Grid System Grid System basato su dodici colonne individuate dalla classe .col-{breakpoint}-*
  19. 19. il Grid System Grid System basato su dodici colonne individuate dalla classe .col-{breakpoint}-*
  20. 20. Nesting Le colonne possono essere innestate dentro altre colonne
  21. 21. Quiz Per realizzare 3 colonne uguali inserisco 3 colonne con la classe .col-sm-4
  22. 22. Quiz Riuscireste invece a riempire una .row con 5 o 7 colonne uguali senza ricorrere al nesting o a qualche trucco?
  23. 23. Auto-layout columns Usando la classe .col oppure .col-{breakpoint} le colonne si adatteranno in automatico allo spazio disponibile <div class="row"> <div class="col"> .col</div> <div class="col"> .col</div> <div class="col"> .col </div> </div>
  24. 24. Quiz
  25. 25. Quiz
  26. 26. Quiz
  27. 27. Contenuti a larghezza variabile Box1 Box2Lor em
  28. 28. Contenuti a larghezza variabile <div class="row justify-content-md-center"> <div class="col col-lg-2"> 1 of 3 </div> <div class="col col-md-auto">lorem</div> <div class="col col-lg-2"> 3 of 3 </div> </div> Box1 Box2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, dolores, animi
  29. 29. VerticalAlignment
  30. 30. VerticalAlignment <div class="row"> <div class="col align-self-start"></div> <div class="col align-self-center"></div> <div class="col align-self-end"></div> </div> Possiamo allineare le colonne in verticale
  31. 31. VerticalAlignment <div class="row align-items-end"> <div class="col"></div> <div class="col"></div> <div class=”col"></div> </div> …o intere righe align-items-start / center
  32. 32. Riordino in base al breakpoint
  33. 33. Riordino in base al breakpoint <div class="row"> <div class="col-sm-4 push-sm-8">SIDEBAR</div> <div class="col-sm-8 pull-sm-4">CONTENT</div> </div>
  34. 34. Riordino in base al breakpoint - flexbox <div class="row"> <div class="col-sm-8 flex-last flex-sm-first">CONTENT</div> <div class="col flex-first flex-sm-last">SIDEBAR</div> </div>
  35. 35. Gestire gli spazi vuoti
  36. 36. Gestire gli spazi vuoti
  37. 37. Gestire gli spazi vuoti - flexbox .row.justify-content-between .row.justify-content-around .row.justify-content-center
  38. 38. Gestire gli spazi vuoti .row.justify-content-start .row.justify-content-center .row.justify-content-end
  39. 39. Flexbox • Non è un plugin JavaScript • Non è un framework CSS • Non è una proprietà CSS
  40. 40. Flexbox • È un un modulo CSS3 costituito da 13 proprietà • È basato su direzioni flex-flow, non su inline o block
  41. 41. I contenuti vengono sistemati o su main axis, da main-start a main-end oppure sul cross axis, da cross-start a cross-end
  42. 42. Cosa possiamo fare con Flexbox 1. centratura orizzontale e verticale di elementi; 2. allineamento con margini automatici; 3. realizzazione di colonne di altezza uguale; 4. modifica dell’ordine degli elementi;
  43. 43. Compatibilità flexbox
  44. 44. Compatibilità flexbox
  45. 45. Fallback IE <9 .row { display: table; /* Fallback IE<9 */ display: flex; width: 100%; } .row > [class*="col"] { display: table-cell; /* Fallback IE<9 */ flex: 1 1 auto; min-width: 1%; /* Fix for Firefox */ }
  46. 46. Personalizzazione avanzata con Sass
  47. 47. Personalizzazione avanzata con Sass
  48. 48. Personalizzazione avanzata con Sass
  49. 49. Personalizzazione avanzata con Sass
  50. 50. Personalizzazione avanzata con Sass
  51. 51. Personalizzazione avanzata con Sass
  52. 52. Personalizzazione avanzata con Sass
  53. 53. Personalizzazione avanzata con Sass
  54. 54. Personalizzazione avanzata con Sass
  55. 55. Qual è l’approccio migliore?
  56. 56. Grid Layout + Flexbox Uno sguardo al futuro Grid Layout Costruzione del Layout Principale Flexbox Comportamento degli elementi in ogni area
  57. 57. Grazie!

×