Bootstrap 4 caratteristiche nuove e fantastiche che adorerai

La prossima versione principale del framework Bootstrap è dietro l'angolo. La versione alpha può essere già scaricata dal sito Web di sviluppo di Bootstrap e il codice sorgente è disponibile anche su Github.

Twitter Bootstrap è attualmente il framework di frontend più popolare in circolazione. Permette agli sviluppatori di costruisci rapidamente siti web mobili e reattivi. Bootstrap consente di utilizzare in modo intelligente il trio standard di front end HTML5, CSS3 e Javascript. Attualmente è utilizzato da oltre 6 milioni di siti sul web.

Sebbene Bootstrap 4 sia ancora in fase di sviluppo (quindi non utilizzarlo ancora su un sito live), gli sviluppatori hanno fatto un lavoro favoloso. In questo post daremo un'occhiata alla nuova versione che include molte grandi funzionalità che sicuramente lo faranno snellire e migliorare il flusso di lavoro di sviluppo del frontend.

1. Sass invece di MENO

Fino ad ora Bootstrap ha usato LESS come suo principale preprocessore CSS, ma per la nuova major release, le regole di stile saranno refactored per Sass, che è molto più popolare tra gli sviluppatori di frontend, ha una base di contribuzione enorme, generalmente più facile da usare e offre di più possibilità. Grazie al potente Compass di Libsass Sass scritto in C / C++ Bootstrap 4 verrà compilato molto più velocemente di prima.

2. Nuovo livello griglia per schermate più piccole

Bootstrap ha un sofisticato sistema a griglia reattiva che consente agli sviluppatori di indirizzare i dispositivi con diverse finestre. Bootstrap 3 ha attualmente 4 classi di griglia per le colonne, .Col-XS-XX per telefoni cellulari, .col-sm-XX per compresse, .col-md-XX per i desktop e .col-lg-XX per desktop più grandi. Bootstrap 4 migliorerà il sistema di griglia con un quinto che faciliterà gli sviluppatori scegli come target dispositivi più piccoli con larghezza di visualizzazione di 480 px.

La nuova classe della griglia ha preso il nome della precedente più piccola e ha spinto i nomi correnti dei livelli della griglia verso l'alto di una tacca. In Bootstrap 4 i desktop di grandi dimensioni useranno il .col-XL-XX selettore di classe. È importante sapere che, nonostante il nuovo nome, non hanno aggiunto una nuova classe per gli schermi di grandi dimensioni ma per quelli più piccoli.

3. Presenta le unità CSS relative

Bootstrap 4 alla fine rilascia il supporto per Internet Explorer 8. Questo è davvero un passo intelligente in quanto consente loro di sbarazzarsi di polifagiosi fastidiosi e di convertirli in unità CSS relative. Invece dei pixel, lo farà la nuova major release usare REM e EM ciò lo rende possibile implementare la tipografia reattiva sui siti Bootstrap. Ciò aumenterà anche la leggibilità e renderà i siti più accessibili agli utenti disabili.

Se vuoi provare come funzionano le unità relative con il nuovo Bootstrap 4, controlla questa demo su Codepen.

4. Nuove carte Bootstrap

Il team di sviluppo ha deciso di unificare alcuni elementi precedenti dell'interfaccia utente di Bootstrap, quindi hanno deciso di introdurre un nuovo componente dell'interfaccia utente chiamato Cards. Le carte sostituiranno i vecchi pozzi, le miniature e i pannelli e offriranno agli utenti un flusso di lavoro più snello. Non preoccuparti, le carte manterranno elementi familiari, come titoli, intestazioni e piè di pagina di pozzi, miniature e pannelli.

Dato che le schede saranno più flessibili delle attuali componenti dell'interfaccia utente, permetteranno uno spazio maggiore per le implementazioni creative. Ci sono alcuni pionieri che hanno già condotto esperimenti su Codepen con carte Bootstrap. Puoi controllarli o creare le tue carte personali.

5. Nuovo modulo di riavvio

Il nuovo modulo di riavvio sostituisce il precedente normalize.css resetta il file. Non lo butta via; al contrario, costruisce più regole su di esso. L'obiettivo della mossa era includere tutti i selettori CSS generici e ripristinare gli stili in a file SCSS singolo e facile da usare. Puoi dare un'occhiata al codice sorgente qui se vuoi capire meglio come funziona il nuovo modulo.

È bello sapere che i nuovi stili di reset impostano in modo intelligente la proprietà CSS per il ridimensionamento della casella border-box sul elemento, che viene quindi ereditato da ogni elemento figlio nella pagina. La nuova regola di stile rende i layout reattivi più gestibili. Se vuoi sperimentare la differenza tra i tipi di layout content-box e border-box, dai un'occhiata a questa pratica demo fornita da CSS-Tricks.com (non è stata creata per Bootstrap 4, mostra solo come il dimensionamento della scatola generalmente funziona).

6. Supporto Flexbox opzionale

Bootstrap 4 rende possibile sfruttare il Flexbox Layout di CSS3, tuttavia - poiché Internet Explorer 9 non supporta il modulo flexbox - la versione predefinita di Bootstrap 4 è piuttosto usa il float e visualizza le proprietà CSS per implementare un layout fluido.

Flexbox ha un layout facile da usare che può essere ottimamente utilizzato nel design reattivo, in quanto fornisce un contenitore flessibile che si espande o si restringe per riempire lo spazio disponibile nel modo migliore. Usa la funzione flexbox opt-in solo se tu non necessità di fornire supporto per IE9.

7. Personalizzazione variabile semplificata

Tutte le variabili Sass utilizzate nella nuova versione di Bootstrap sono incluse in un singolo file chiamato _variables.scss, che semplificherà significativamente il processo di sviluppo. Non devi fare nient'altro se non copiare le impostazioni da questo file in un'altra chiamata _custom.scss per cambiare i valori predefiniti.

Puoi personalizzare molte cose come colori, spaziatura, stili di collegamento, tipografia, tabelle, punti di interruzione della griglia e contenitori, numero di colonna e larghezza della grondaia, e molti altri.

8. Nuove classi di utilità per la spaziatura

Bootstrap 3 ha già molte classi di utilità pratiche come quelle che modificano il floating o il clearfix, ma Bootstrap 4 ne aggiunge ancora di più. Il nuove classi di spaziatura consentire agli sviluppatori di modificare rapidamente paddings e margini sui loro siti.

La sintassi per le nuove classi è abbastanza semplice, ad esempio aggiungendo il .classe m-a-0 collega una regola di stile che imposta i margini su 0 su tutti i lati dell'elemento specificato (margin-all-0). Mentre i margini usano il m- prefisso, paddings sono in stile con il p- prefisso. Nei documenti di sviluppo puoi dare un'occhiata a tutte le nuove classi di utilità di spaziatura.

9. Tooltip e Popovers Powered by Tether

In Bootstrap 4 tooltip e popover fa uso della libreria Supercool Tether, un motore di posizionamento che consente di mantenere un elemento posizionato in modo assoluto proprio accanto a un altro elemento sulla stessa pagina. Questo significa tooltips e popover verrà automaticamente posizionato correttamente sui siti Web Bootstrap 4.

Non dimenticare che, poiché Tether è una libreria JavaScript di terze parti, devi includerla separatamente nell'HTML prima del tuo file bootstrap.js.

10. Plugin JavaScript refactored

Il team di sviluppo ha refactorato ciascun plug-in JavaScript per la nuova versione utilizzando EcmaScript 6. Con l'utilizzo intelligente delle specifiche più recenti e dei miglioramenti più recenti, intendono migliorare l'esperienza del frontend.

Il nuovo Bootstrap 4 ha subito anche altri miglioramenti JavaScript, come ad esempio controllo del tipo di opzione, metodi di demolizione generici, e Supporto UMD, ciò funzionerà tutti insieme per rendere il framework dei frontend più popolare più fluido che mai.

Ora Leggi: 10 alternative leggere a Bootstrap & Foundation