Bootstrap 4 is Coming!
-
Upload
carmine-alfano -
Category
Design
-
view
219 -
download
0
Transcript of Bootstrap 4 is Coming!
Bootstrap 4 is coming!
CARMINE ALFANO
FAENZA 2017
#cssday
Mi presento
!"#$%&'(%)*+,-$.#%)/$&*$)+0%123%11/.'(,.$445&&+6$-/7++8'(9/7(:/;%<)(=/>57&%-
C’era una volta Bootstrap
Hamburger menu Jumbotron
Modal
Carousel
Popover
Responsive
Zurb Foundation
CSS Grid Layout
Flexbox + Sass = BS4
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
Nuovo CSS di resetNormalize.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
Navbar
Possibilità di decidere da quale breakpointnascondere la navbar
Cards
Wells, thumbnails e panels vengono sostituiti da cards.
Addio icone
La libreria Glyphiconnon sarà più inclusa
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;)
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)
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)
Nuove Utilities
Possibilità di definire dei range per nascondere gli elementi.hidden-{breakpoint} diventa .hidden-{breakpoint}-up o downAd es.: .hidden-xs-down.hidden-lg-up mostrerà l’elemento solo su sm e md
Breakpoints in Bootstrap 4Di 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
Tabella comparativa
il Grid SystemGrid System basato su dodici colonne individuate dalla classe .col-{breakpoint}-*
il Grid SystemGrid System basato su dodici colonne individuate dalla classe .col-{breakpoint}-*
NestingLe colonne possono essere innestate dentro altre colonne
Quiz
Per realizzare 3 colonne uguali inserisco 3 colonne con la classe .col-sm-4
Quiz
Riuscireste invece a riempire una .row con 5 o 7 colonne uguali senza ricorrere al nesting o a qualche trucco?
Auto-layout columnsUsando 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>
Quiz
Quiz
Quiz
Contenuti a larghezza variabile
Box1 Box2Lorem
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 sitamet, consecteturadipisicing elit. Enim, dolores, animi
Vertical Alignment
Vertical Alignment
<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>
Possiamoallinearelecolonneinverticale
Vertical Alignment
<div class="row align-items-end">
<div class="col"></div>
<div class="col"></div>
<div class=”col"></div>
</div>
…ointererighe align-items-start / center
Riordino in base al breakpoint
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>
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>
Gestire gli spazi vuoti
Gestire gli spazi vuoti
Gestire gli spazi vuoti - flexbox
.row.justify-content-between
.row.justify-content-around
.row.justify-content-center
Gestire gli spazi vuoti
.row.justify-content-start
.row.justify-content-center
.row.justify-content-end
Flexbox• Non è un plugin JavaScript• Non è un framework CSS• Non è una proprietà CSS
Flexbox• È un un modulo CSS3 costituito da 13 proprietà• È basato su direzioni flex-flow, non su inline o block
I contenuti vengono sistemati o su main axis, da main-start a main-end oppure sul cross axis, da cross-start a cross-end
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;
Compatibilità flexbox
Compatibilità flexbox
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 */
}
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Personalizzazione avanzata con Sass
Qual è l’approccio migliore?
Grid Layout + Flexbox
Uno sguardo al futuro
Grid LayoutCostruzione del Layout Principale
FlexboxComportamento degli elementi in ogni area
Grazie!