Le regole da seguire per effettuare la migrazione a Bootstrap 5

di Morgan Pizzini, in HTML5, Boostrap,

Per ricapitolare questa serie di script che ci hanno fatto conoscere le novità riguardanti Bootstrap 5.0, facciamo un elenco di tutti i piccoli accorgimenti che dobbiamo tenere in considerazione per eseguire una corretta migrazione dalla versione precedente.

La prima grande novità la troviamo nel grid-system con l'introduzione di un nuovo breakpoint: xxl per le viewport maggiori di 1400px. La distanza tra le colonne è stata ridotta di circa un terzo passando da una dimensione di 30px a una più gestibile 1.5rem, adeguando il cambiamento a tutte le classe di utility, e aggiungendo anche .g-*, .gx-* e .gy-* per il controllo separato dei gutters verticali e orizzontali. Come conseguenza anche la classe .no-gutters è stata rinominato .g-0.

Tutte le classi di posizionamento che includevano le parole right* e left* sono state rinominate in favore di start e end. Per precisione dovremmo aggiornare il codice ovunque abbiamo utilizzato le seguenti classi:

  • .left- .right-
  • .float-*
  • .border-*
  • .rounded-*
  • .ml-*
  • .pl-*
  • .text-*

La tipografia subisce dei miglioramenti dietro le quinte con la riscrittura di molti mixin e maps. Per la nostra applicazione questo non comporta alcun cambiamento, ma è bene sapere che le classi .font-weight-* e .font-style-* sono state rinominate in .fw-* e .fst-* ed è stata invece completamente rimossa .text-hide. Inoltre le classi .text-* non applicheranno più effetti di hover o focus ai link, per i quali occorrerà invece utilizzare la classe .link-.

Con il rilascio della versione 5.0, i mixins, che nelle versioni precedenti erano stati segnati come deprecati, sono stati definitivamente rimossi. Tra questi troviamo:

  • hover
  • float()
  • text-hide()
  • visibility()
  • Molti mixins riguardanti le palette di colori e l'applicazione di color schemes

In conclusione anche i mixin delle media query hanno subito un grande cambiamento, applicando lo stile direttamente sulle classi in ingresso e non sulle successive. Dunque media-breakpoint-down() e media-breakpoint-between() dovranno essere corrette in base al contesto in quanto, se fino alla versione 4.X scrivavamo media-breakpoint-down(md) per specificare tutte le viewports minori di lg, ora possiamo farlo scrivendo media-breakpoint-down(lg).

Come sempre per ulteriori modifiche o approfondimenti la documentazione https://getbootstrap.com/docs/5.0/migration/ riporta tutti i dettagli e le casistiche d'uso.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi