New features from Bootstrap 4

Di recente si è parlato molto nel web riguardo le novità introdotte con la quarta big release di Bootstrap. Utilizzando questo framework per la maggior parte dei progetti, non ho potuto esimermi dall’andare a curiosare e sono rimasta piacevolmente colpita da quanto è stato introdotto. Innanzi tutto è bene sottolineare che la versione 4 ha comportato un rimaneggiamento sostanzioso del codice precedente; per questo motivo è impossibile vedere tutte le modifiche nel dettaglio, quindi elencherò di seguito i cambiamenti più importanti: • Si passa dal preprocessore Less a Sass per quanto riguarda il CSS. Oserei aggiungere un “finalmente”, dato che moltissimi sviluppatori preferiscono utilizzare sass. Oltre a questo molte configurazioni che prima erano distribuite nei file di stile dei singoli componenti (es: transizioni, ombre, gradienti) sono state rese variabili generiche, in modo da ampliare ancora di più la possibilità di modifica da parte degli sviluppatori. • La griglia è stata revisionata e migliorata, grazie all’aggiunta di un nuovo breakpoint per ottimizzare il rendering sui dispositivi mobile. Malgrado la sintassi sia rimasta invariata, le dimensioni si basano ora su unità rem(relazionate direttamente al tag html) invece che sui px. Rimane ancora possibile, ovviamente, utilizzare qualsiasi unità si preferisca. • Viene integrato il layout Flexbox, attivabile tramite un flag nel file _variables.scss. Il team bootstrap ha scelto di rendere opzionale l’attivazione in quanto Internet Exploer 9 non lo supporta. Una volta selezionato il flag, la griglia e tutti i componenti verranno ricompilati con un layout basato interamente su flexbox. Questa è forse la novità che mi ha colpita maggiormente, perchè Flexbox permette di risolvere semplicemente tutti i problemi legati all’allineamento verticale degli elementi. • I componenti Panel e Well vengono sostituti dal nuovo componente Cards: si tratta di un contenitore più generico che mantiene, come panels, la possibilità di avere un header e un footer, oltre a molte altre opzioni (fra cui uniformare le altezze di più card raggruppate, sia con supporto Flexbox che non). • Il file normalize.scss viene ampliato con ulteriori hack html, e rinominato in reboot.scss • Tutti i plugin javascript sono stati riscritti in ECMAScript 6, in modo da poter utilizzare tutte le nuove features del linguaggio. • Grazie all'introduzione della libreria Tether, migliorerà il posizionamento assoluto degli elementi (come tooltips e popover) • La documentazione è stata completamente riscritta in Markdown, con aggiunta di esempi e di una ricerca più performante. • Dalla versione 4 non ci sarà più supporto per IE8: questo permette al team di sviluppo di utilizzare appieno le potenzialità di CSS3 senza fallback. Chi vorrà mantenere la retrocompatibilità potrà comunque continuare ad utilizzare la versione 3. Attualmente Bootrstrap 4 è disponibile in versione alpha, ma il piano di release comunicato dal team di sviluppo è il seguente: • Brevi rilasci mentre si è ancora in Alpha • Due Beta • Due Release Candidate • Versione Finale! Nell’attesa della versione beta, oltre a dare un’occhiata alla documentazione già disponibile sul sito, vi consiglio la lettura di questo interessantissimo articolo di Carol Skelly che mettere a confronto i cambiamenti grafici dalla versione 3 alla 4.