Una varietà sempre crescente di framework è disponibile sia per i progettisti che per gli sviluppatori front-end, pronta per la prototipazione e l'implementazione rapida. C'è una vasta gamma di framework completi e leggeri, e praticamente tutto nel mezzo. Con così tante opzioni, potresti semplicemente scegliere il più popolare, ma potrebbe non essere ciò che è meglio per il tuo particolare progetto.
Ogni framework ha i suoi vantaggi e sta a te decidere quale sarà più adatto alle tue esigenze. Fortunatamente, ho fatto parte della ricerca e della sperimentazione per voi osservando da vicino quattro diversi framework. Li ho valutati su:
I framework che ho esaminato sono Bootstrap, Concise, Foundation e Gumby. Tieni presente che non ti consiglierò su quale scegliere o quale è il mio preferito, semplicemente spiegando i punti di forza di ogni struttura in modo che tu possa decidere quale sia la soluzione più adatta a te. Tuffiamoci dentro!
Nota: Sto usando il termine Struttura, ma alcuni potrebbero sentirsi Biblioteca o boilerplate sono più appropriati.
Ciascuno dei quadri che ho visto ha una curva di apprendimento relativamente amichevole e superficiale, ma ho trovato Concise il migliore per un principiante. Un framework più snello, Concise è leggero sulle funzionalità, consentendo alla documentazione di essere una lettura rapida e semplice.
Se stai cercando più delle funzionalità di base, ci sono un certo numero di componenti aggiuntivi che puoi includere nel tuo progetto.
Bootstrap e Foundation hanno entrambi una documentazione eccezionale per guidarti attraverso l'installazione, i moduli e le estensioni. L'ampia gamma di funzionalità rende inevitabilmente la documentazione un po 'più coinvolgente e scoraggiante per i principianti, rispetto a Concise. Foundation ha un file demo chiamato index.html per i neofiti da sperimentare e serve come punto di partenza.
Il download di Gumby include anche un file demo.html per mostrare la sua griglia in azione e ui.html con esempi di ogni elemento dell'interfaccia utente. Tuttavia, è più scoraggiante configurare con un forte incoraggiamento l'uso della compilazione di SASS e CSS nel terminale. Sebbene questi non siano essenziali per l'utilizzo di Gumby, costituiscono la maggior parte della documentazione introduttiva.
Gumby ha solo un'opzione di download, a differenza di Bootstrap e Foundation che ti danno la possibilità di scaricare diversi pacchetti in base alle tue esigenze e abilità.
Oltre alla documentazione, una rapida ricerca su Google ti fornirà ogni ulteriore aiuto di cui potresti avere bisogno lungo il percorso. La Fondazione, tuttavia, ha un proprio centro di formazione e video per un'esperienza di apprendimento senza soluzione di continuità. Se preferisci avere piccole annotazioni qua e là, un numero enorme di blog e tutorial sono stati scritti con suggerimenti per l'utilizzo di Foundation, incluso qui su Tuts+.
Come Foundation, Bootstrap è stato studiato dalla comunità di design e front-end sin dal suo concepimento. Tuts + ha diversi corsi e molti tutorial disponibili sull'argomento. Un framework immensamente popolare, ci sono un sacco di blog, articoli e forum a tua disposizione.
Gumby è stato anche trattato bene su blog e tutorial, anche se, non abbastanza estensivamente come Foundation e Bootstrap. La documentazione di Gumby ti indicherà anche la direzione delle risorse per imparare Sass e gli strumenti utili per la compilazione dei CSS.
Essendo appena arrivato sulla scena dei quadri, Concise deve ancora essere esaminato da vicino come gli altri tre. Risorse extra potrebbero non essere altrettanto necessarie, considerando le piccole dimensioni e la versatilità di questo framework.
Bootstrap e Foundation sono tutti framework molto completi, con un vasto numero di funzionalità e risorse disponibili. Ognuno di essi può essere personalizzato prima ancora di scaricare i file, il che significa un minor numero di sostituzioni CSS per te.
Sono anche versatili nel modo in cui possono essere utilizzati, ad esempio in combinazione con un CMS o per la creazione di prototipi di app. Tutti e tre hanno caratteristiche di interfaccia utente simili, anche se Bootstrap e Foundation hanno qualcosa in più di Gumby, come la tipografia, i lightbox e le fisarmoniche.
Conciso è costruito per essere un piccolo quadro, offrendo solo l'essenziale. A differenza degli altri tre, Concise ti dà solo ciò che è assolutamente necessario nel suo download, ma ti permette di basarti su quello che vuoi. Questo è grandioso se vuoi progettare da solo elementi dell'interfaccia utente, poiché saranno necessari meno sostituzioni CSS.
Tutti i quadri del nostro test sono abbastanza simili in questo settore, seguendo la maggior parte degli standard. Foundation è l'unico che non supporta IE8.
Compatibilità di baseBootstrap avvisa su alcune proprietà CSS3 che non sono supportate in IE8.
"Sono supportati anche Internet Explorer 8 e 9, tuttavia tieni presente che alcune proprietà CSS3 e gli elementi HTML5 non sono completamente supportati da questi browser. - Documenti Bootstrap
La documentazione di Bootstrap copre in dettaglio il supporto del browser e del dispositivo, nonché le differenze nel modo in cui alcune proprietà sono rese. La prossima sezione della documentazione di Bootstrap riguarda l'accessibilità. La Fondazione illustra anche le migliori pratiche sull'accessibilità, ma Concise e Gumby no.
Skeleton è un'altra struttura leggera, simile a Concise, e recentemente subì una revisione. È più efficiente per i siti più piccoli, concentrandosi principalmente sulla navigazione e la tipografia. Con ancora meno stili di Concise, è sottile, elegante, leggero e facile da usare. Non include Sass o CSS minificati, a differenza degli altri quattro framework esaminati.
Non c'è una scelta sbagliata per quale framework si dovrebbe usare, solo una scelta migliore. Il mio obiettivo qui era di aiutarti a capire qual è la scelta migliore per te, in base a criteri che potrebbero avere un impatto su un progetto e sul tuo flusso di lavoro. Che tu sia un neofita del framework o che abbia maggiore familiarità con il modo in cui lavorano, è importante determinare quale sarà adatto alle esigenze del tuo progetto.
Ecco un breve riassunto in forma tabellare. ★ suggerisce un vincitore assoluto, mentre ☆ mostra che il primo posto è stato condiviso.
bootstrap | Conciso | Fondazione | Gumby | |
---|---|---|---|---|
Semplicità da imparare | ★ | |||
Volume di risorse esterne | ★ | |||
Versatilità | ☆ | ☆ | ☆ | |
Supporto per il browser | ☆ | ☆ | ☆ | ☆ |
Accessibilità | ☆ | ☆ |
Tra i criteri considerati: semplicità di apprendimento, risorse esterne, versatilità e supporto e accessibilità del browser: uno o due saranno più importanti per te e dovresti scegliere il tuo framework di conseguenza. Per quelli di voi che hanno esperienza con Bootstrap, Concise, Foundation o Gumby, quali sono le aree in cui ritenete che il vostro quadro di riferimento abbia il meglio? Che tipo di progetti lo usi??
Per quelli di voi che si appoggiano ad altri quadri, come ritenete che la vostra scelta sia comparabile con questi?