Bootstrap è il framework front-end Open Source più popolare per creare interfacce moderne, reattive e dinamiche per pagine Web professionali. 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.
Il 16 Giugno 2020 è stata rilasciata la versione Alpha di Bootstrap 5, ciò significa che continueranno a verificarsi cambiamenti fino alla prima versione Beta.
Le principali modifiche di Bootstrap 5
Rimozione di JQuery e passaggio a Vanilla JS
La novità più importante riguarda l’abbandono definitivo di JQuery, una libreria JavaScript ricca di funzionalità che semplifica molte delle comuni funzioni che gli sviluppatori utilizzano sui loro siti web.
Tuttavia, il team di sviluppo di Bootstrap 5 si è reso conto che negli ultimi anni JQuery aveva perso molta popolarità vista la tendenza di scrivere App Single Page con altri framework come: React, Angular e Vue, di cui abbiamo parlato nell’articolo I migliori Framework per le PWA.
Nonostante sia possibile affermare che jQuery abbia contribuito a cambiare il modo in cui milioni di persone scrivono Javascript, Bootstrap 5 ha definitivamente eliminato la dipendenza di jQuery interrompendone il supporto a favore di VanillaJS.
VanillaJS permette di scrivere codici efficienti senza preoccuparsi delle dimensioni o di funzioni non essenziali, ciò dovrebbe tradursi in applicazioni caratterizzate da file molto più leggeri e da tempi di caricamento anche nettamente inferiori rispetto alle precedenti versioni di Bootstrap .
Addio Internet Explorer
Il team di Bootstrap ha deciso di sospendere il supporto per le versioni Internet Explorer precedenti alla IE11 poiché non supporta i moderni standard Javascript a differenza di altri Browser come Chrome, Firefox ed Edge.
Per far funzionare JavaScript su IE11 è necessario compilare il codice in ES5 anziché ES6 ciò comporta un aumento delle dimensioni dei progetti di circa il 30%. Inoltre molte proprietà CSS non sono supportate, limitando quindi il design dei moderni siti web.
In conclusione la sospensione di Internet Explorer 10 e 11 è la fine di un incubo per tutti gli sviluppatori che ora potranno concentrarsi maggiormente sulla progettazione di pagine Web senza doversi preoccupare di riscrivere parte di codice.
I cambiamenti sul layout
I cambiamenti su Bootstrap 5 e al CSS non sono pochi, perciò vi elenchiamo quelli che abbiamo ritenuto essere i più interessanti:
Miglioramento della griglia Bootstrap
Il tratto distintivo di Bootstrap è sempre stato la griglia a 12 colonne pertanto il team di sviluppo ha deciso di migliorare le sue caratteristiche responsive.
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” che significa uguale al valore calcolato di font-size sull’elemento root. Ad esempio, 1 rem è uguale alla dimensione del carattere dell’elemento HTML.
Inoltre sono state aggiunte 3 nuove classi che potranno essere aggiunte a .row :
- gx-* controlla la larghezza orizzontale
- gy-*controlla la larghezza verticale
- g-* controlla la larghezza orizzontale e verticale
RFS – Responsive Front Size
Bootstrap 5 permette di impostare le dimensioni responsive, cioè che si adatta automaticamente a qualsiasi finestra su qualsiasi dispositivo, dei caratteri in modo predefinito grazie al meccanismo RFS che calcolerà in automatico la dimensione dei caratteri in base alle dimensioni della finestra del browser del dispositivo utilizzato.
Inoltre, RFS permette di ridimensionare la maggior parte delle proprietà CSS con valori unitari come margin, padding, border-radius e box-shadow
Ottimizzazione della Navbar
Navbar, uno dei componenti principali di Bootstrap, in questa versione 5 è stato migliorato e reso ancora più semplice da utilizzare grazie alle seguenti modifiche:
- 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
Le icone SVG in Bootstrap hanno subito diversi cambiamenti nel corso degli anni. Nella versione 3 erano state implementate 250 componenti icona nel formato “Glyphicons“ che poi sono state soppresse nella versione 4 e hanno costretto i Web Designers al caricamento di risorse esterne come Font Awesome o all’utilizzo delle proprie risorse SVG.
Tuttavia per la prima volta in assoluto Bootstrap 5 avrà una nuovissima libreria di icone SVG realizzata con cura da Mark Otto il co-fondatore di Bootstrap.
Le icone sono già disponibile e pronte per essere utilizzate nei progetti, per conoscere il nuovo set di icone clicca qui
Conclusione
Una delle esperienze frustranti di essere uno sviluppatore è reinventare l’HTML, CSS e JavaScript di base per ciascun progetto ma certamente ci sarà sempre chi preferirà compilare l’HTML e il CSS autonomamente senza le dipendenze di un framework.
D’altro canto Bootstrap, nell’ultimo decennio, ha cambiato il modo di disegnare sul Web e il team di sviluppo sta compiendo enormi sforzi per rendere il framework leggero, semplice, utile e più veloce a vantaggio dello sviluppatore.
Perciò non esiste una soluzione corretta poiché ognuno è libero di utilizzare gli strumenti che preferisce. Resta il fatto che Bootstrap con la versione 5 punta i piedi per rimanere uno dei migliori sul mercato e ciò significa che le novità non finiranno qui.
Hai bisogno di semplificare il Web design del tuo sito?
Se vuoi creare un tuo sito Web o migliorare il tuo Web Design puoi rivolgerti a noi.
Per altre informazioni consulta anche la nostra pagina dedicata.