Twitter Bootstrap 3

Twitter Bootstrap 3

1284
2
CONDIVIDI

Era già nell’aria da diverso tempo e finalmente è diventata una notizia ufficiale. Gli sviluppatori del framework grafico originariamente uscito da twitter stavano lavorando per migliorare la prima versione. Cosi nasce Twitter Bootstrap 3.

Twitter bootstrap è un “framework” grafico rilasciato dal team di sviluppo di Twitter. Oggi permette di sviluppare pagine web i quali layout, grazie all’integrazione del Grid System rasentano la precisione millimetrica.

Questo è quanto affermavo circa un anno fa nel primo articolo che recensiva Bootstrap (puoi leggerlo qui), se è la prima volta lo utilizzi, il mio consiglio è quello di dare una lettura poiché non ripeterò le parti teoriche bensì, mi limiterò a descriverne le novità.

Mobile al centro di tutto

responsive design
La nuova versione è progettata per essere “mobile friendly“. Adesso tutto ciò che basta per realizzare un progetto responsive lo troviamo incluso nella libreria core di Bootstrap.

A differenza della versione 2, cambiano le classi di accesso al dispositivo:

Versione 2 Versione 3
visible-phone visible-sm
visible-tablet visible-md
visible-desktop visible-lg
hidden-phone hidden-sm
hidden-tablet hidden-md
hidden-desktop hidden-lg

Design rivisto

TWITTER BOOTSTRAP 3
Confrontando le due versioni avrete notato un cambio di tendenza nei confronti del design: sono stati eliminati i gradienti, la grafica è piatta ma al contempo pulita. De gustibus. Si cerca di seguire le tendenze! Potrei passare le ore a parlare dei piccoli cambiamenti inseriti in questa nuova release. Preferisco concentrarmi su quelli principali, quelli che apportano delle vere modifiche.

La personalizzazione è tornata, le sue funzionalità sono state riscritte e verranno man mano sviluppate dai programmatori ufficiali.

E’ stata aggiunta una nuova menzione ai documenti relativi alla compatibilità dei browser, sottolineando un espediente per risolvere i problemi di Internet Explorer 10 con Windows Phone 8 ed una nuova sezione alla pagina “Getting Started” in merito ai documenti di terze parti ed i problemi di compatibilità.

Per ciò che concerne la nuova sezione dedicata all’Accessibilità, sono state apportate delle modifiche agli attributi ed è stata migliorata la 508 e la WCAG compliancy, insieme alla possibilità di un maggiore utilizzo di semantica HTML5. E’ stato inoltre aggiunto un test di validazione HTML.

Tra i cambiamenti generali CSS troviamo un update dei gradienti orizzontali e verticali, per migliorare la colorazione grafica è stato inserito l’uso delle classi .pull-right e .pull-left con il codice !important per evitare problemi di specificità nella barra di navigazione ed in altri elementi. Altre variabili e gradienti sono stati migliorati per non includere il codice “background-color” e migliorare l’uso dei colori rgba().

Gestione del Grid System

Anche la gestione delle griglie ha subito delle modifiche in bootstrap 3. Gli ordini sono passati dai tre della precedente release ai quattro di quella attuale. Ora abbiamo .col-xs (per i telefoni) .col-sm (per i tablets), .col-md (per i desktops), e .col-lg(per i desktop wide screen).

Ora .row ha solo dei margini negativi sinistri e destri se inserito all’interno di .container. Questo espediente risolve i problemi relativi alla scrollbar orizzontale. I bottoni e gli input, insieme a buona parte delle componenti a loro collegate sono un tantino più corti. Vi sono dei nuovi stili a più alto contrasto.

E voi, avete già utilizzato bootstrap 3?

  • Fabiana

    trovo bootstrap molto utile per la personalizzazione grafica di base. Lo uso spesso per software gestionali o anche per parti front-end.
    Ovviamente un sito realizzato con bootstrap è più o meno ingabbiato in uno standard grafico e sarà sempre simile ad altri sito realizzati con bootstrap, per questo prediligo utilizzarlo in backend.

  • Enzo

    Ciao Mario! Complimenti per le grandi risorse che metti a disposizione.
    MI sono avvicinato a Bootstrap3 da poco ed sto già litigando con il sistema di navigazione e le ancore.
    Ho trovato moltissime discussioni in lingua inglese ma in italiano sembra che se ne discuta poco.

    L’argomento è il problema della precisione quando si utilizza un menù fissato al ‘top’.
    L’utilizzo delle ancore sembra avere un problema di allineamento con l’ancora stessa e quindi a volte la visualizzazione del contenuto viene coperta in parte dal menù stesso – Es. (http://www.servermule.com.au/help/bootstrap-anchors-fixed-nav/)

    Aldilà di ‘aggirare’ il problema giocando con ‘padding negativi’ e ‘margin’ la mia domanda è: tutto ciò dipende dalla personalizzazione dei css ‘aggiunti’ in fase di creazione dei template o è un ‘problema’ che al momento bisogna accettare?