É arrivato Bootstrap 5, cosa è cambiato?

Si sa che nel mondo dello sviluppo web la diatriba è sempre calda, Bootstrap si o Bootstrap no? Sicuramente le critiche maggiori arrivano a causa dell’utilizzo molto intensivo che alcuni temi fanno dei componenti principali di questo framework come font, bottoni, form, tabelle, card, nav bar e colori senza personalizzarli, così facendo il rischio di sviluppare siti sempre uguali è molto alto, ma se ci limitiamo ad utilizzarlo per la gestione della griglia la questione cambia. 

Nei nostri corsi di Web Design vogliamo infatti passare questo concetto, Bootstrap (o un altro framework alternativo) è un’ottima risorsa per sviluppare più velocemente siti web responsive e adattivi, senza dover lavorare con mille aggiustamenti nelle media query. Il suo sistema a 12 colonne infatti lo rende un’ottima soluzione per adattare le vostro strutture al mondo responsive.  

A maggio 2021 è stata rilasciato Bootstrap 5, la nuova versione del popolarissimo framework nato presso Twitter ormai 10 anni fa. Ad agosto la versione 5.1 ha corretto diversi bug e problemi della prima realese e siamo quindi pronti ad addentrarci nelle novità introdotte. Qui la documentazione ufficiale

Cosa è cambiato dalla popolarissima 4? 

nuovo logo

Partiamo con la grafica, è cambiato il logo ufficiale.

modifiche alla griglia

Alcune delle maggiori novità per chi usa il framework da diverso tempo e solo per il grid system sono:

• L’introduzione di un nuovo breakpoint che porta il contenitore base di Bootstrap da 1140px a 1320px e quindi l’aggiunta di un nuovo prefisso xxl in aggiunta a quelli già presenti. Questo nuovo breakpoint sarà utile per dimensioni dello schermo maggiori di 1400px.
• I gutters (lo spazio tra una colonna e l’altra) hanno cambiato unità di misura, da px a rem, e ora sono più stretti passando da 30px a 24px.
• Sono state aggiunte delle classi per impostare la larghezza del gutter sia orizzontale che verticale: .g-*(0…5) a seconda del moltiplicatore che vogliamo assegnare.
• Tolta la proprietà position:relative che era applicata automaticamente alle classi .col-

Vanilla JavaScript invece di jQuery

Vista la tendenza ad utilizzare Bootstrap con i framework JavaScript come React, Vue e Angular la dipendenza forzata di jQuery era per i più mal tollerata, il team di sviluppo ha quindi abbandonato la dipendenza dalle librerie jQuery per passare ad un supporto Vanilla JavaScript. Non significa che nei vostri progetti che usano già jQuery non potrete più utilizzarlo, ma che semplicemente non è più utilizzato da Bootstrap per i componenti “animati” che prima lo richiedevano. 

RFS – responsive font size

Sarà attivo di default il sistema prima in fase beta per la gestione completamente responsive delle proprietà font-size, il meccanismo calcolerà automaticamente il valore appropriato per i caratteri basandosi sulla dimensione della viewport del browser.

Oltre alla gestione del font-size questo sistema prevede anche il ridimensionamento automatico anche per le proprietà come margin e padding.

Nuova libreria di icone 

Bootstrap aveva già una libreria di icone native fino alla versione 3, abbandonata poi con la 4. Ora con la versione 5 è stato reintrodotto un sistema di icone in SVG di più di 1000 icone da poter utilizzare nei progetti come SVG, come icon-font, come tag img o nel css come pseudoelementi. 

Abbandonato il supporto per Internet Explorer 10 e 11

Vista la quasi completa migrazione da Explorer ad Edge di Microsoft e al fatto che il browser più moderno sfrutta la tecnologia chromium che gli permette di renderizzare correttamente le più moderne animazioni js e css come i competitor Chrome e Firefox anche il team di Bootstrap si è adattato eliminando il supporto a Internet Explorer. 

nuovo supporto a css grid 

A partire da questa versione Bootstrap, che ha sempre lavorato sfruttando le proprietà di flexbox, ha introdotto la possibilità di cambiare dal classico display: flex a display: grid. Siamo ancora in una versione sperimentale, ma nella documentazione ufficiale parlano di un futuro ibrido. Staremo a vedere.

Supporto right-to-left (RTL)

Da questa versione sarà possibile utilizzare Bootstrap anche per progetti che prevedo la scrittura delle pagine da destra verso sinistra (RTL – Right To Left) per lo sviluppo di siti web la cui lingua lo prevede come ad esempio l’arabo, l’ebraico o il persiano. 

modifiche ai componenti

Anche alcuni componenti sono cambiati, vediamo le novità:

• Nuovo componente accordion
• Migliorati i form-control per le input e le textarea dei form
• Aggiunte le floating labels all’interno delle input nei form
• Abbandonata la classe card che veniva utilizzata per rendere le colonne alte uguali
• Rinominate diverse utilities come float-left -> float-start, float-right -> float-end, border-left -> border-start, border-right -> border-end …
• Aggiunti componenti placeholder per simulare il caricamento delle pagine

In conclusione

Perché continuare a sviluppare utilizzando Bootstrap 4?

• Se per il vostro progetto è necessario il supporto per IE10 e IE11
• Se il vostro sito web dipende da jQuery e non conoscete a fondo JavaScript per gli elementi che lo richiedono
• Se utilizzate già Bootstrap 4 e non vi interessano (o non volete adattarvi) i nuovi cambiamenti che Bootstrap 5 ha introdotto.

E perché invece scegliere di migrare verso Bootstrap 5 per i vostri nuovo lavori o migrare quelli esistenti?

• Se già utilizzate React o Vue.js e non volete più dipendere da jQuery
• Se vi interessano le espansioni della nuova versione come le novità del grid system, le nuove utility, la scrittura RTL, ecc..

Per quanto mi riguarda mi sto ancora adattando al cambiamento, sicuramente le novità introdotte sono molte e valide, ma per chi come me utilizza e insegna il framework solo per il grid system e non per i suoi componenti cambiare approccio non sarà così complicato.

E voi? Lo utilizzate già? E come vi trovate?