Nel vasto mondo della prototipazione rapida di framework e toolkit CSS, ci sono un sacco di opzioni tra cui scegliere, ma da quando Twitter Bootstrap ha colpito la scena sembra che abbia in gran parte inghiottito questo mercato. C'è spazio o ragione per qualcos'altro?
I ragazzi di Zurb la pensano così e non stanno per abbandonare il loro progetto di fondazione di grande successo. Avendo scritto su Bootstrap diverse volte in passato, oggi salterò in Foundation e vedrò cosa penso.
Meet Foundation
Allora, qual è la Fondazione? Zurb lo descrive come una struttura facile da usare, potente e flessibile per la creazione di prototipi e codice di produzione su qualsiasi tipo di dispositivo.
Proprio da quella descrizione si può dire che Zurb sta dando molta importanza all'aspetto cross-device della sua griglia di layout. È interessante notare che la parola "responsive"? non appare da nessuna parte sul sito della Fondazione (che io possa trovare), ma i benefici sono sicuramente simili: progettare un progetto che funziona ovunque.
È come Bootstrap?
Questi due progetti non sono certamente identici, ma sono più vicini ai concorrenti diretti che puoi ottenere. Fondamentalmente, sono abbastanza simili che se ne stai usando uno, quasi sicuramente non stai usando l'altro.
Sia Bootstrap che Foundation cercano di darti tutti gli strumenti necessari per eseguire rapidamente il layout basato su CSS e il lavoro di prototipazione con alcune chicche JavaScript lanciate. Sono anche entrambi commercializzati con una forte enfasi sul design pulito e minimale, che è un risultato del vasto stile predefinito su cose come la tipografia. Anche le loro pagine iniziali sembrano molto simili:
La griglia
La prima cosa a cui mi rivolgo con qualsiasi framework è la griglia. Il sistema di layout è spesso la pietra angolare su cui è costruita l'intera esperienza, quindi ottenere questo diritto è un grosso problema.
Con Foundation, si inizia con una griglia a dodici colonne flessibile, che risponde bene alle ridimensionazioni del browser e utilizza le query multimediali per gestire il passaggio a dispositivi più piccoli. In Bootstrap, hai anche una griglia di dodici colonne che fa un uso pesante delle query multimediali. Qui hai la possibilità di scegliere tra colonne fluide e statiche, il che è bello.
L'implementazione della griglia di Foundation dovrebbe essere immediata se prima hai utilizzato altri sistemi di grid. Sì, implica l'uso di nomi di classe non semantici, quindi se si odiano i framework per questo motivo, questo non sarà quello che cambia idea.
Il sistema qui è abbastanza facile da poterlo prelevare quasi immediatamente. Ogni volta che vuoi una nuova riga, crea un div con la riga? Row ?. Da qui hai dodici colonne da riempire. Puoi dividerlo a metà con due div da sei colonne, tagliarlo in tre con tre div di quattro colonne, ecc. Basta applicare una classe che corrisponde al numero di colonne che desideri riempire oltre alle colonne? classe.
Se ricreamo questo esempio in Bootstrap, la sintassi è estremamente simile, anche se più succinta. Bootstrap non richiede le colonne? classe così sarai in grado di ridimensionare il tuo markup un po '. Ammesso che sia, span6? certo non legge come sei colonne ?.
Entrambi i sistemi grid hanno tutte le funzionalità avanzate di cui hai bisogno: nesting, offset, push / pull, ecc. Come con il codice sopra, troverai che con queste funzionalità la sintassi di Foundation è un po 'più semplice e facile da leggere Bootstrap è più succinta.
Chi vince la battaglia della griglia?
Sono un fanatico della griglia e mi piace molto scavare e vedere cosa fa spuntare queste cose. Ho creato pagine con le griglie Bootstrap e Foundation e sinceramente le trovo entrambe eccellenti. Sono così simili nell'approccio che non penso che questa sarà la caratteristica decisiva per chiunque cerchi di scegliere tra i due.
Se odierne uno, probabilmente li odieresti entrambi e se ti piace uno di loro, non sarà difficile passare all'altro. Un tempo Bootstrap avrebbe perso questa battaglia senza pensarci due volte, ma ora che Bootstrap 2 è diventato reattivo, lo dichiaro un pareggio.
Elementi dell'interfaccia utente di base
Entrambe queste strutture contengono elementi dell'interfaccia utente pre-disegnati ma personalizzabili, in modo da poter eseguire rapidamente il rendering di un'app o di una pagina Web senza pensare troppo a come strutturare pezzi diversi.
Iniziamo guardando uno dei pezzi più semplici dell'interfaccia utente, un pulsante. In fondazione, tutto ciò di cui hai veramente bisogno per un pulsante è un tag di ancoraggio con il pulsante? classe applicata.
Tuttavia, questo sta per creare un pulsante incredibilmente semplice. Se vuoi renderlo più interessante, ogni pezzo aggiuntivo di stile ha un'altra classe associata. Per esempio, di seguito ho realizzato un piccolo pulsante blu lucido con angoli arrotondati.
La storia è la stessa qui con la griglia. Lo stile della Fondazione è più prolisso, ma soprattutto in questo caso, consente un'esperienza più facile da modificare. Invece di dividere le classi da ciò che fanno, Bootstrap assegna personalità diverse a ciascuna classe. Quindi puoi scegliere tra? Btn-info? e? btn-warning? per diverse opzioni di stile.
Per quanto riguarda lo stile, personalmente mi piace l'aspetto sfumato che Bootstrap usa meglio del lucido look di Foundation, ma può essere facilmente personalizzato in entrambi i framework, quindi è praticamente un problema.
Forme, schede ed etichette Oh My
Semplicemente non vale la pena passare attraverso ogni elemento dell'interfaccia utente e confrontando la sintassi, si dovrebbe ottenere l'immagine ormai. Entrambi i framework ti forniscono gli elementi dell'interfaccia utente più comuni, in modo che tu possa implementarli praticamente senza alcun sollevamento pesante.
Schede, navigazione, breadcrumb, moduli, etichette, tabelle; se li vuoi, li prendi, non importa quale di questi stai usando. Detto questo, se stai cercando la quantità, Bootstrap prende davvero il comando qui e sembra inserire solo un sacco di interessanti elementi dell'interfaccia utente. Ogni framework ha alcuni pezzi unici non nell'altro, ma Bootstrap vince il gioco dei numeri.
JavaScript Goodies
Foundation non è solo una libreria CSS, ha anche alcune grandi caratteristiche JavaScript. Una delle mie funzioni preferite è la presentazione di Orbit, che è davvero facile da implementare e personalizzare.
Tutto ciò che serve per impostare una presentazione è un div con alcune immagini in esso (usa i tag alt per i sottotitoli). Da qui devi solo puntare il tuo JavaScript su quel div e chiamare l'orbita? funzione. Se vuoi andare oltre, ci sono molte opzioni da modificare.
C'è anche un plug-in modale per la finestra modale, alcuni tooltip, funzionalità di tabulazione, menu a tendina, messaggi di avviso e qualche buona convalida del modulo. Saltando su Bootstrap vediamo la maggior parte degli stessi tipi di oggetti implementati in modi leggermente diversi. Ancora una volta però troviamo che l'offerta Bootstrap è un po 'più robusta.
Supporto preprocessore
Un'area in cui Foundation e Bootstrap sono andati separatamente è il supporto per il preprocessore. La fondazione è andata con Sass e Compass mentre Bootstrap è andato con LESS. Ho iniziato come fan di LESS ma da allora sono stato conquistato dalla potenza di Sass, quindi sono incline ad apprezzare la Fondazione in questo senso, specialmente in considerazione dell'integrazione di Compass.
Compass è un concentrato di bontà del preprocessore e rende davvero facile codificare CSS3 cross-browser con un minimo sforzo. Sono sempre stato abbastanza sorpreso dal fatto che Bootstrap abbia scelto il percorso MENO.
Detto questo, è interessante notare che Bootstrap è quasi come Compass per LESS. Proprio come con Compass, Bootstrap è dotato di tutti i tipi di utili mix che ti aiutano a utilizzare complicate funzioni CSS con una codifica manuale molto ridotta.
Sia che tu stia usando Foundation o Bootstrap, approfittare del supporto per il preprocessore renderà molto più facile personalizzare ed estendere il framework.
Taglia la merda, chi vince?
È difficile dichiarare un vincitore qui. Come accennato in precedenza, Bootstrap 1 era facilmente inferiore a Foundation semplicemente perché il layout era puramente statico e non reattivo. Con Bootstrap 2, tuttavia, Twitter ha davvero migliorato il proprio gioco e ha creato un set di strumenti eccezionale e Foundation ha del lavoro da fare se lo abbinerà.
Bootstrap ha semplicemente più da offrire da una prospettiva rigorosa dell'elenco delle funzionalità. È anche codificato più succintamente, meglio organizzato e documentato molto più accuratamente. Questo è dovuto al fatto che la comunità degli sviluppatori ha abbracciato Bootstrap al punto che è possibile trovare facilmente temi, plug-in e altri extra di terze parti.
Detto questo, c'è una domanda importante qui: è più grande meglio? Solo perché Bootstrap sembra avere più contenuti non significa necessariamente che sia superiore. Nel mondo del web design e dello sviluppo, meno è spesso di più. La Fondazione ha una sensazione più semplice, meno gonfia, che ho davvero apprezzato. È davvero incredibilmente facile scaricarlo e iniziare a scartare le pagine web in pochissimo tempo.
Gli utenti Bootstrap interverranno qui e faranno notare che l'argomento gonfiato non si applica perché esiste un builder di download Bootstrap personalizzato che ti consente facilmente di decidere cosa vuoi fare e cosa non vuoi nel tuo framework.
Quale pensi sia meglio?
Dovresti fornire a entrambi i framework un test drive per vedere quale gelifichi meglio. Comunque, sei venuto qui per un parere e ne ho uno per te. Se si desidera scaricare solo una di queste librerie, andare con Bootstrap. Non sono un fanboy di Bootstrap e, sinceramente, non l'ho nemmeno adottato nel mio flusso di lavoro personale. Inoltre, vedo Foundation come il perdente e mi piacerebbe dargli il premio qui, ma penso che abbia qualche rimedio da fare prima che ciò accada.
Ma cosa so? Voi ragazzi state usando questi tipi di strumenti ogni giorno e voglio sentire cosa ne pensate. La Fondazione è migliore di Bootstrap? Perché o perché no? Prenderesti in considerazione l'utilizzo di uno di questi nel tuo flusso di lavoro se non lo sei già?