Bootstrap 5: cosa cambia e data di rilascio

Bootstrap è il framework front-end Open Source più popolare al mondo ed è stato in grado di conquistare il cuore della maggior parte degli sviluppatori grazie alla sua straordinaria raccolta di componenti pronti all’uso per lo sviluppo di interfacce web dal layout dinamico.  Non importa che tu sia un principiante o uno sviluppatore esperto, Bootstrap è sicuramente un potente strumento per lo sviluppo di qualsiasi tipo di sito web o web application che tu abbia in mente di creare. Le voci del web dicono che stia arrivando (anche se non è ben chiaro quando…) una nuova “Mayor Relase”; dal rilascio della v.1 Twitter Bootstrap (19.08.2011) sono passati quasi 7 anni per arrivare alla v.4 (18.01.2018). Attualmente la versione stabile è la 4.4.1 ma il Team di sviluppo di Bootstrap ha annunciato che la v.5 è in arrivo e porta con se significative modifiche.

In questo breve articolo proveremo a raccogliere alcune delle modifiche più significative che siamo riusciti a reperire, se sei un appassionato del settore, un professionista o semplicemente curioso, qui sotto troverai i link al repository ufficiale del progetto Bootstrap 5.

Bootstrap 5 on Git
Download Bootstrap 5

Quando arriva Bootstrap 5?

Ad oggi non è ancora chiara la data di uscita della v.5 di Bootstrap. Stando a quanto possiamo vedere dal branch principale del progetto, ci sono ancora 22 Tasks aperte contro le 821 già portate a termine. Dovremmo essere in dirittura di arrivo ma non c’è nulla di ufficiale anche se svariate fonti del web azzardano dichiarando che per la fine del 2020 potremmo avere la versione stabile di Bootstrap 5 a disposizione.

Le modifiche significative di Bootstrap 5

Attualmente alcuni dei principali cambiamenti previsti nella v. 5 includono:

  • Rimozione di jQuery

  • Sospensione del supporto per IE10

  • Rimozione di .form-row e .form-inline
  • Rimozione della classe .card

  • Passaggio a Vanilla JS

  • Responsive Font Size con RFS

  • Modifica unità di misura della larghezza colonne

  • Ottimizzazione della navbar

jQuery espulso! Entra Vanilla Js

jQuery è una libreria JavaScript ricca di funzionalità che semplifica molte delle comuni funzioni che gli sviluppatori utilizzano sui loro siti web. Tuttavia, vista la tendenza di scrittura di App Single Page con altri framework Javascript come React, Angular e Vue, negli ultimi anni jQuery aveva già perso molta popolarità poiché la maggior parte di questi framework moderni funziona attraverso il DOM virtuale, il che porta inevitabilmente a prestazioni più performanti.

Nonostante sia possibile affermare che jQuery abbia contribuito a cambiare il modo in cui milioni di persone scrivono Javascript, il team di sviluppo di Bootstrap 5 ha definitivamente eliminato la dipendenza di jQuery interrompendone il supporto a favore di Vanilla JavaScript.

JavaScript è il linguaggio di programmazione per il Web più universale al mondo. La rimozione del supporto jQuery consentirà comunque agli sviluppatori la possibilità di utilizzarlo all’interno di Bootstrap 5 ma con Vanilla Javascript si avrà modo di scrivere codice efficiente senza preoccuparsi delle dimensioni o di funzioni non essenziali.

In definitiva, se sai come funziona JavaScript dalla radice, per quanto questa modifica a Bootstrap sia importante, non influirà sul tuo modo di lavorare. Per quegli sviluppatori che invece sapevano utilizzare solo jQuery… forse questa sarà l’occasione per imparare JavaScript come si deve.

Internet Explorer verso il tramonto definitivo

Il 12/01/2016 la stessa Microsoft annunciava la sospensione del supporto per le versioni di Internet Explorer precedenti alla IE11, pensare che nel 2003 era ul Browser Web più utilizzato al mondo con una quota del 95% degli utenti. Andando avanti fino ai giorni nostri, Internet Explorer, a dispetto di Browser come Chrome, Firefox ed Edge non supporta i moderni standard Javascript.

Se per far funzionare JavaScript su IE11 è necessario compilare il codice in ES5 anziché ES6 (con un aumento delle dimensioni dei progetti di circa il 30%) e considerando che molte proprietà CSS non sono supportate, limitando quindi il design dei moderni siti web, si può affermare che la sospensione del supporto Bootstrap per Internet Explorer 10 e 11 è solo la fine di un’incubo.

Tutto questo consentirà agli sviluppatori di concentrarsi maggiormente sulla progettazione moderna senza doversi preoccupare di riscrivere parte di codice solo per soddisfare l’obsolescenza di Internet Explorer.

I cambiamenti sul layout

Questa è sicuramente la parte più eccitante per i Web Designer e i cambiamenti apportati a Bootstrap 5 e al CSS non sono pochi, quindi evidenzieremo quelli che abbiamo ritenuto siano interessanti dal punto di vista della funzionalità del framework.

RFS – Responsive Font Size

Progettare un sito web che si adatti automaticamente a qualsiasi finestra su qualsiasi dispositivo è sicuramente la sfida di ogni sviluppatore front-end. Certamente le @media queries sono state un ottimo strumento per raggiungere l’obiettivo ma con Bootstrap 5 cambia tutto.

Le dimensioni responsive dei caratteri saranno abilitate per impostazione predefinita grazie al meccanismo RFS che calcolerà in automatico la dimensione dei caratteri in base alle dimensioni della finestra del browser del dispositivo utilizzato.

Selettori CSS rimossi: .font-size-sm,.font-size-lg,.font-size-xl,.font-size-base
Selettori CSS aggiunti: .text-sm,.text-lg,.text-xl,.text-base

Con RFS sarà inoltre possibile il ridimensionamento della maggior parte delle proprietà CSS con valori unitari come margin, padding, border-radius, box-shadow

Miglioramento della griglia Bootstrap

Possiamo affermare che la griglia a 12 colonne di Bootstrap sia sempre stato il tratto distintivo di questo framework. Il Team di sviluppo si è dedicato notevolmente al suo miglioramento soprattutto sotto il punto di vista delle caratteristiche responsive.

Il CSS permette di utilizzare molteplici unità di misura per definire le dimensioni come px, em, rem, %, vw e vh. Bootstrap fino alla v.4 ha utilizzato i pixel ma in Bootstrap 5 non sarà più così. La larghezza della griglia sarà definita in rem e non in px.

rem sta per “root em” significa quindi che il valore viene calcolato in base al valore di Root e non di un valore “genitore”

Inoltre, grazie all’aggiunta di 3 nuove classi gutter che potranno essere aggiunte a .row

  • gx-* controlla la larghezza orizzontale
  • gy-* controlla la larghezza verticale
  • g-* controlla la larghezza orizzontale e verticale

Migliore supporto per la “nidificazione”

Nella v.4 di Bootstrap la classe (.row) non può essere nidificata all’interno di una classe ( .col-*). Se provi a farlo ti renderai conto che margin e  padding causano dei conflitti. Bootstrap 5 rimuove i margin e padding delle righe nidificate (.row > .row) consentendo così una maggiore gestione della nidificazione all’interno delle colonne.

Possiamo dire “addio” alle .card

I miglioramenti rilasciati sulla gestione della griglia e la possibilità di nidificare all’interno della classe .col-* sono probabilmente il motivo per il quale non avremo più bisogno di utilizzare la famosa classe .card per ottenere colonne con stessa altezza ed equal distanza l’una dall’altra.

Anche la classe .form  cambia

.form-row aveva una larghezza minore della .row all’interno di un form, con l’aggiunta delle classi .g*- la gestione della dimensione riga relative ai form non è più indispensabile.

.form-inline viene rimosso sempre grazie ad una maggiore flessibilità nell’utilizzo della griglia. Se necessario i “child” potranno essere inseriti all’interno di un div .col-md-auto

Ottimizzazione della Navbar

Navbar è sicuramente uno tra i componenti principali di Bootstrap e per quanto nella v.4 fosse già stato semplificato, in Bootstrap 5 sono state effettuate ulteriori migliorie che consentono un migliore utilizzo:

  • Rimozione della ridondanza del parametro display: inline-block dagli elementi flex children
  • Rimozione del valore line-height: inerit;
  • Usi delle proprietà abbreviate “shorthand”
  • Rimozione dei margini della classe .brand
  • Aggiunta di un dropdown scuro mediante la classe .dropdown-menu-dark

Nuova libreria di icone SVG

Se nella v.4 di Bootstrap erano stati soppressi i 250 componenti icona nel formato “Glyphicons“, presenti nella v.3, costringendo i Web Designers al caricamento di risorse esterne come Font Awesome o all’utilizzo delle proprie risorse SVG, in Bootstrap 5 sarà presente una nuovissima libreria di icone SVG realizzata con cura da Mark Otto il co-fondatore di Bootstrap.

Questa forse è l’unica feature rilasciata ancor prima del rilascio ufficiale di Bootstrap 5, se sei curioso puoi dare un’occhiata al set di icone qui

Conclusioni

Bootstrap, nell’ultimo decennio, ha cambiato il modo di disegnare sul Web. Certamente ci sarà sempre chi preferirà compilare l’HTML e il CSS autonomamente senza le dipendenze di un framework, ma la maggior parte di noi, sono certo che non veda l’ora che Bootstrap 5 venga rilasciato ufficialmente. In questo caso non esistono il bene e il male, ognuno è libero di utilizzare gli strumenti che preferisce a prescindere che lo faccia per lavoro o per diletto. Resta il fatto che, il Team Bootstrap, con poche scelte mirate, punta i piedi per rimanere sul mercato e questo ci da la certezza che le novità non finiranno.