SlideShare uma empresa Scribd logo
1 de 58
Baixar para ler offline
Bootstrap 4
is coming!
CARMINE ALFANO
FAENZA 2017
#cssday
Bootstrap 4 is Coming!
Mi presento
!"#$%&'(%)*+,-$.#%)/$&*$)+0%1
23%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
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
Navbar
Possibilità di decidere
da quale breakpoint
nascondere la navbar
Cards
Wells, thumbnails e
panels vengono
sostituiti da cards.
Addio icone
La libreria Glyphicon
non 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 down
Ad es.:
.hidden-xs-down.hidden-lg-up
mostrerà l’elemento solo su
sm e md
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
Tabella comparativa
il Grid System
Grid System basato su dodici colonne
individuate dalla classe .col-{breakpoint}-*
il Grid System
Grid System basato su dodici colonne
individuate dalla classe .col-{breakpoint}-*
Nesting
Le 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 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>
Quiz
Quiz
Quiz
Contenuti a larghezza variabile
Box1 Box2Lor
em
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
VerticalAlignment
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
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
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 Layout
Costruzione del Layout
Principale
Flexbox
Comportamento degli
elementi in ogni area
Grazie!

Mais conteúdo relacionado

Destaque

Research Poster Design Ideas
Research Poster Design IdeasResearch Poster Design Ideas
Research Poster Design Ideasaldenlibrary
 
Métodos estadísticos
Métodos estadísticosMétodos estadísticos
Métodos estadísticosItzel Campos
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 
Italian residential market as new strategic asset class
Italian residential market as new strategic asset classItalian residential market as new strategic asset class
Italian residential market as new strategic asset classSigest
 
Activitate de invatare a egalitatii
Activitate de invatare a egalitatiiActivitate de invatare a egalitatii
Activitate de invatare a egalitatiiMarta Bernas
 
You’ve Localized Your Website: What’s Next?
You’ve Localized Your Website: What’s Next?You’ve Localized Your Website: What’s Next?
You’ve Localized Your Website: What’s Next?Lionbridge
 
Femeia careia îi ești recunoscător
Femeia careia îi ești recunoscătorFemeia careia îi ești recunoscător
Femeia careia îi ești recunoscătorMarta Bernas
 
How to start your own gym or fitness center in India
How to start your own gym or fitness center in IndiaHow to start your own gym or fitness center in India
How to start your own gym or fitness center in IndiaShubhangi Swami
 
The multicolumn challenge: accepted!
The multicolumn challenge: accepted!The multicolumn challenge: accepted!
The multicolumn challenge: accepted!Lorena Ramonda
 
Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές
Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές
Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές Vassilis Papadolias
 
Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017
Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017
Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017Dr.Costas Sachpazis
 
Lightning talk: highly scalable databases and the PACELC theorem
Lightning talk: highly scalable databases and the PACELC theoremLightning talk: highly scalable databases and the PACELC theorem
Lightning talk: highly scalable databases and the PACELC theoremVishal Bardoloi
 
Discovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLW
Discovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLWDiscovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLW
Discovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLWGlen Robson
 

Destaque (16)

Research Poster Design Ideas
Research Poster Design IdeasResearch Poster Design Ideas
Research Poster Design Ideas
 
My Favourite Painters
My Favourite PaintersMy Favourite Painters
My Favourite Painters
 
EDUCATION FOR PEACE
EDUCATION FOR PEACEEDUCATION FOR PEACE
EDUCATION FOR PEACE
 
Métodos estadísticos
Métodos estadísticosMétodos estadísticos
Métodos estadísticos
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 
Italian residential market as new strategic asset class
Italian residential market as new strategic asset classItalian residential market as new strategic asset class
Italian residential market as new strategic asset class
 
Activitate de invatare a egalitatii
Activitate de invatare a egalitatiiActivitate de invatare a egalitatii
Activitate de invatare a egalitatii
 
You’ve Localized Your Website: What’s Next?
You’ve Localized Your Website: What’s Next?You’ve Localized Your Website: What’s Next?
You’ve Localized Your Website: What’s Next?
 
OS 5 SENTIDOS.
OS 5 SENTIDOS.OS 5 SENTIDOS.
OS 5 SENTIDOS.
 
Femeia careia îi ești recunoscător
Femeia careia îi ești recunoscătorFemeia careia îi ești recunoscător
Femeia careia îi ești recunoscător
 
How to start your own gym or fitness center in India
How to start your own gym or fitness center in IndiaHow to start your own gym or fitness center in India
How to start your own gym or fitness center in India
 
The multicolumn challenge: accepted!
The multicolumn challenge: accepted!The multicolumn challenge: accepted!
The multicolumn challenge: accepted!
 
Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές
Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές
Il Piccolo - Εναλλακτικό Βιβλιοπωλείο - Βιβλία και Προσφορές
 
Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017
Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017
Sachpazis_Pile Analysis & Design example According to EN 1997-1_2004_March-2017
 
Lightning talk: highly scalable databases and the PACELC theorem
Lightning talk: highly scalable databases and the PACELC theoremLightning talk: highly scalable databases and the PACELC theorem
Lightning talk: highly scalable databases and the PACELC theorem
 
Discovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLW
Discovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLWDiscovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLW
Discovery, Reuse, Research and Crowdsourcing: IIIF experiences from the NLW
 

Semelhante a Bootstrap 4 is Coming!

Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Valerio Radice
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webMassimo Bonanni
 
Linux Day 2010 - talk about cross browser compatibility and 960 Grid System
Linux Day 2010 - talk about cross browser compatibility and 960 Grid SystemLinux Day 2010 - talk about cross browser compatibility and 960 Grid System
Linux Day 2010 - talk about cross browser compatibility and 960 Grid SystemGianfranco Fedele
 
Grid System
Grid SystemGrid System
Grid SystemNaLUG
 
Primo approccio al design adattivo
Primo approccio al design adattivoPrimo approccio al design adattivo
Primo approccio al design adattivoSalvatore Paone
 
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Domenico Monaco
 
Novità di SQL Server 2017
Novità di SQL Server 2017Novità di SQL Server 2017
Novità di SQL Server 2017Gianluca Hotz
 
GWT vs CSS3
GWT vs CSS3GWT vs CSS3
GWT vs CSS3GWTcon
 
LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...
LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...
LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...InSide Training
 
BEM Methodology Workshop (Italian)
BEM Methodology Workshop (Italian)BEM Methodology Workshop (Italian)
BEM Methodology Workshop (Italian)Marco Zampetti
 
The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)Giovanni Buffa
 
Back to Basics, webinar 6: Messa in esercizio
Back to Basics, webinar 6: Messa in esercizioBack to Basics, webinar 6: Messa in esercizio
Back to Basics, webinar 6: Messa in esercizioMongoDB
 
DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8DrupalDay
 
Seminario team working - 21-1-2015
Seminario team working - 21-1-2015Seminario team working - 21-1-2015
Seminario team working - 21-1-2015Alessandro Loffredo
 
[drupalday2017] - Async navigation with a lightweight ES6 framework
[drupalday2017] - Async navigation with a lightweight ES6 framework[drupalday2017] - Async navigation with a lightweight ES6 framework
[drupalday2017] - Async navigation with a lightweight ES6 frameworkDrupalDay
 
Async navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 frameworkAsync navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 frameworksparkfabrik
 
DotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScriptDotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScriptSinergia Totale
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 

Semelhante a Bootstrap 4 is Coming! (20)

Bootstrap
BootstrapBootstrap
Bootstrap
 
Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo web
 
Linux Day 2010 - talk about cross browser compatibility and 960 Grid System
Linux Day 2010 - talk about cross browser compatibility and 960 Grid SystemLinux Day 2010 - talk about cross browser compatibility and 960 Grid System
Linux Day 2010 - talk about cross browser compatibility and 960 Grid System
 
Grid System
Grid SystemGrid System
Grid System
 
Primo approccio al design adattivo
Primo approccio al design adattivoPrimo approccio al design adattivo
Primo approccio al design adattivo
 
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
 
Novità di SQL Server 2017
Novità di SQL Server 2017Novità di SQL Server 2017
Novità di SQL Server 2017
 
GWT vs CSS3
GWT vs CSS3GWT vs CSS3
GWT vs CSS3
 
LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...
LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...
LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO ...
 
BEM Methodology Workshop (Italian)
BEM Methodology Workshop (Italian)BEM Methodology Workshop (Italian)
BEM Methodology Workshop (Italian)
 
The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)The CSS Survival Manual - Giovanni Buffa (2014)
The CSS Survival Manual - Giovanni Buffa (2014)
 
Back to Basics, webinar 6: Messa in esercizio
Back to Basics, webinar 6: Messa in esercizioBack to Basics, webinar 6: Messa in esercizio
Back to Basics, webinar 6: Messa in esercizio
 
DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8DDAY2014 - Performance in Drupal 8
DDAY2014 - Performance in Drupal 8
 
Seminario team working - 21-1-2015
Seminario team working - 21-1-2015Seminario team working - 21-1-2015
Seminario team working - 21-1-2015
 
[drupalday2017] - Async navigation with a lightweight ES6 framework
[drupalday2017] - Async navigation with a lightweight ES6 framework[drupalday2017] - Async navigation with a lightweight ES6 framework
[drupalday2017] - Async navigation with a lightweight ES6 framework
 
Async navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 frameworkAsync navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 framework
 
DotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScriptDotNetToscana - Sessione TypeScript
DotNetToscana - Sessione TypeScript
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 

Bootstrap 4 is Coming!