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

.row.justify-content-between

.row.justify-content-around

.row.justify-content-center


.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









Qual è l’approccio migliore?

Grid Layout + Flexbox

Uno sguardo al futuro

Grid LayoutCostruzione del Layout Principale

FlexboxComportamento degli elementi in ogni area

Grazie!

Design

Bootstrap 4 is Coming!