Bootstrap3, quando il re dei cssFramework diventa flat

Koala - sabato 24 Agosto

Era attesissimo, ogni singolo web-developer di questo mondo (e forse anche in qualcun’altro) si stava domandando quando sarebbe uscito e cosa in realtà sarebbe cambiado in bootstrap3.
Tolte le orribili persone che usano bootstrap clean solamente perchè credono che nessuno riconosca quel tipico bottone verde leggermente arrotondato e rialzato oppure la tipica navbar fixed in alto, a volte mascherata con un illegale .navbar-inverse, il 99% delle altre è solito sfrattare tutte quelle sfumature e ombre per far posto al re del momento, il FLAT.
Proprio per questo bootstrap ci da una mano: le ombre, le sfumature e tutto l’anti-flat per eccellenza è stato completamente smantellato per lasciar posto ad una tecnica ma mai banale piattezza.

Scherzi a parte, vediamo un po’ nel dettaglio cosa è cambiato (non parlerò di LESS, io sono uno che i codici li scrive alla vecchia maniera: CSS e tanta memoria).

La navbar

Eh si, la struttura della navbar è cambiata ed in meglio oserei dire:

<!-- BOOTSTRAP2 -->
<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Project name</a>
  </div>
</div>

<!-- BOOTSTRAP3 -->
<div class="navbar">
  <a class="navbar-brand" href="#">Project name</a>
</div>

e finalmente tolto quelo stupido wrapper .navbar-inner.

La grid

Il sistema di grid è stato diversificato e reso un po’ più dettagliato rispetto al semplice .span* di prima.
Ora abbiamo quattro tipi di grid per ogni tipo di grandezza di device:

  • .col-xs-*  per gli smartphone (< 768px)
  • .col-sm-* per gli smartphone (> 767px)
  • .col-md-* per i tablet (> 991px)
  • .col-lg-* per i desktop (> 1199px)

Non sarà più semplice, ma sicuramente è più performante.

I box

Dio grazie ora finalmente tutto ha box-sizing: border-box;

Supporto ai vecchi browser

Tasto dolente per i web-developers italiani, costretti a volte a lavorare per browsers come IE6 e giù di li, bootstrap toglie il supporto a IE7 e Firefox 3.6 basando la sua evoluzione alle ultime versioni di tutti i browser.

Abbandona questo supporto con una “””rassicurante””” frase presa dalla sua documentazione:

Unofficially, Bootstrap should look and behave well enough in Chromium for Linux and Internet Explorer 7, though they are not officially supported.

Si, grazie bootstrap.

Conclusione

Bhe, non ho elencato tutte le modifiche, solo quelle che credevo più importanti e che ho sfruttato maggiormente.
La maggior parte degli aggiornamenti si basano sul cambio nome di alcune classi come gli .hidden-* ed i .visible-* che si abbinano alla nuova grid e la .row-fluid che si tramuta semplicemente in .row.

Probabilmente scriverò un altro articolo sui prossimi aggiornamenti di questo fantastico framework che ad ogni upgrade mi da qualche motivo per usarlo al massimo.

 

Theme made by Koala