Web design: i 10 migliori CSS framework responsive

ottobre 05, 2013
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest1Share on Google+6
Come si sà il tempo è denaro, e usare un framework CSS Responsive per velocizzare ed automatizzare i tempi di avvio ed i settings iniziali dei propri lavori è diventata ormai una caratteristica fondamentale per qualsiasi web designer.

Ma cos’è un framework?

Un framework è una struttura logica di supporto su cui un software può essere progettato e realizzato, spesso facilitandone lo sviluppo

Fonte wikipedia

Nel mondo del web design, per essere più specifici, un framework è l’insieme strutturato di file (perlopiù HTML, CSS e Javascript), cartelle e codice standardizzato secondo una logica, che viene utilizzato come fondamenta o supporto per la creazione di un nuovo sito o applicazione web.

Lo scopo di un framework è quindi quello di fornire una base di partenza comune in modo tale che il web designer non debba riscrivere da zero i propri progetti ogni volta, ma possa affidarsi ad una logica di codice solida e comune.

In questo articolo voglio aiutare gli web designer che sono alla ricerca di un framework, ma che ancora non conoscono molto bene le caratteristiche di quelli più utilizzati, proponendo 10 dei migliori framework responsive CSS e open source per la creazione di interfacce grafiche.

Siccome i termini Mobile First e Responsive, con l’avvento e la diffusione di dispositivi mobili sono diventati un must, di seguito ho elencato solo quei Framework che presentano queste funzionalità.

Prima di iniziare

Molte volte, per mancanza di budget o di tempo, ci dobbiamo affidare a dei template responsive premium; prima di mostrarti la lista dei migliori framework responsive ti voglio segnalare questi ottimi temi responsive di altissima qualità che ho avuto l’occasione di usare per alcuni dei miei progetti:

Bootstrap

i-10-migliori-framework-responsive-CSS_01

E’ sicuramente il più famoso, e quello che ha bisogno di meno presentazioni; elegante, intuitivo e veloce. Dispone di un’ottima libreria di componenti javascript, un’ottima documentazione e dalla versione 3.0 è diventato mobile-first. Sviluppato da Twitter, Bootstrap 3 utilizza LESS e, compilato tramite Node.js, offre nella sezione Customize la possibilità di personalizzare quasi ogni aspetto grafico tramite delle variabili prima del download.

Foundation

i-10-migliori-framework-responsive-CSS_02

Si presenta come il più avanzato front-end framework responsive al mondo. Anch’esso mobile-first, fa della semanticità del codice uno dei suoi punti di forza, “per poter scrivere un markup pulito senza sacrificare l’utilità e la velocità del framework”. Come Bootstrap, presenta un’ottima libreria di componenti javascript.

Topcoat

i-10-migliori-framework-responsive-CSS_03

Framework CSS per applicazioni web pulite e veloci. Disegnato per garantire le massime performance, Topcoat presenta una bella collezione di componenti UI, è facilmente personalizzabile e permette anche il donwload in PSD degli elementi dell’interfaccia.

Pure

i-10-migliori-framework-responsive-CSS_04

Pure è si presenta come un set leggero di moduli CSS da utilizzare in ogni tipo di progetto web. Offre una buona documentazione ed effettivamente è molto leggero (il peso totale è di soli 6KB).

Skeleton

i-10-migliori-framework-responsive-CSS_05

Skeleton è un framework semplice e pulito per siti web e applicazioni HTML5. Mette a disposizione solamente gli elementi di cui hai bisogno, niente di più. Come Topcoat permette il download  di un template PSD per il mock up dei tuoi lavori.

YAML

i-10-migliori-framework-responsive-CSS_06

Framework CSS modulare per siti web flessibili, accessibili e responsive. Anche questo molto leggero (5.9 KB) e costruito utilizzando SASS, è testato and supportato dalla maggior parte dei browser come Chrome, Firefox, Opera, Safari ed Internet Explorer.

Gumby

i-10-migliori-framework-responsive-CSS_07

Framework CSS flessibile e responsive. Presenta una buona libreria di elementi UI e include diversi tipi di griglie con molte variazioni di colonne, che permettono di avere la massima flessibilità durante l’intero processo di realizzazione di qualsiasi progetto.

Kube

i-10-migliori-framework-responsive-CSS_08

Dai creatori di Redactor.js, Kube si presenta come un framework CSS per sviluppatori professionali. Dispone di un sistema di griglie rivoluzionario e offre molta libertà sulla codifica degli stili.

Groundwork

i-10-migliori-framework-responsive-CSS_09

Compilato anch’esso tramite SASS, Groundwork CSS è un buon toolkit HTML5 Responsive e Javascript.

Tuktuk

i-10-migliori-framework-responsive-CSS_10

Framework Responsive per dare flessibilità ai propri progetti facilmente. Usa funzionalità CSS 3, è leggero e veloce

Bella lista, ma quale dei framework scegliere?

Scegliere il proprio framework non è sicuramente facile, e si può dire che per poter capire meglio quale fa al caso nostro bisogna  all’inizio provarli direttamente; tuttavia altri aspetti possono essere considerati nella scelta:

  • La grandezza e il tipo di progetto che devi realizzare
  • La facilità e la velocità di scrittura del codice
  • La documentazione (più dettagliata è, e più veloce riuscirai a capire come utilizzare il framework)
  • Con quale frequenza il framework viene aggiornato ed il supporto a lungo termine
  • La velocità di installazione
  • Il numero di opzioni disponibili
  • L’integrazione con altri sistemi
  • La leggerezza dei file inclusi

E tu quale utilizzerai? Se hai altre ottime soluzioni da segnalare, non esitare a segnalarle nei commenti!

Template responsive premium

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

  • Pingback: 8 mobile framework per la creazione di applicazioni in HTML5, CSS e Javascript | upCreative()

  • Pingback: Creare applicazioni HTML5, CSS3 e Javascript | upCreative()

  • Ibbatta

    Personalmente, io utilizzo bootstrap e mi trovo benissimo. Lo consiglio anche a chi inizia a mettere mano per la prima volta su un framework responsive

    • Giacomo Freddi

      Ciao e grazie per il commento! Si Bootstrap è molto comodo ed anche il più diffuso ed utilizzato, ma ci tengo a precisare che foundation non è da meno, in quanto offre ottimi tool per realizzare interfacce di alta qualità. Molte volte dipende dallo sviluppatore stesso e dalle sue abitudini. In tutti i casi consiglio vivamente di provarlo.

      • Ibbatta

        Beh ovvio, mi son limitato a commentare bootstrap perchè, oltra a essere uno dei più diffusi al momento, è l’unico framework, tra quelli elencati in pagina, che io abbia utilizzato fin’ora e vista la sua semplicità (mista al grande rendimento), mi sono sentito di consigliarlo (specialmente per il fatto che oggigiorno, molte aziende, chiedono l’effettiva conoscenza di bootstrap come framework js, per colloqui et simila).

        Rimango comunque con le orecchie tese per avere aggiornamenti / consigli sugli altri frameworks elencati, sono molto curioso di sapere le valutazioni personali degli utenti!

  • Luca Barone

    La lista comprende molti dei framework più famosi, ma mi permetto di segnalare http://semantic-ui.com/ è un framework molto ben fatto e a mio parere da proprio una pista a bootstrap (utilizzo entrambi nel mio lavoro), è un pò più acerbo di Bootstrap, ma la versione 1.0.0 è in fase di pre-release.

    In ogni caso anche alla versione attuale compre molto bene le esigenze di un Frontend Developer, anche la parte dei componenti javascript è scritta in modo tale da essere facilmente debuggabile, e la parte CSS è semplicemente un piacere da scrivere.

    • Giacomo Freddi

      Ciao Luca,

      grazie per il commento e la segnalazione. Sinceramente non conoscevo questo framework, e corro subito a provarlo ;) !!

      Giacomo

      • Luca Barone

        Ultimamente sono dovuto tornare a lavorare con Bootstrap, e sento proprio la mancanza di Semantic T_T

        Come ho detto è un pò acerbo e quindi alcune cose mancano, ma è proprio l’idea di fondo dell’intero framework che mi attrae e secondo me rende le cose troppo più semplici, intuitive e il codice più leggibile.

        Unico appunto: il creatore è un pò troppo fissato con queste classi semantiche, che però, a mio parere, in certe occasioni non possono sostituire le normali classi composte da più parole.

        • http://www.emanuelapitassi.it/ Emanuela Pitassi

          Se non lo avessi aggiunto tu, l’avrei segnalato io!
          Semantic UI è semplicemente fantastico: semplice ed intuitivo da usare.
          Sono d’accordo però sul fatto che sia forse ‘fin troppo’ semplificato…e che per creare un prodotto finito personalizzato, bisogna comunque aggiungere un po’ di regole css (io l’ho fatto per i colori, ad esempio).
          Ad ogni modo, ottima lista.
          Sarebbe bello vedere se c’è qualche novità da aggiungere.

          • Luca Barone

            :) Sarò un pò troppo fissato, ma quando si parla di framework CSS per quanto mi riguarda è in cima alla classifica, ora è pure alla versione 2.0 (io purtroppo in produzione sono ancora rimasto alla 0.9…

          • http://www.emanuelapitassi.it/ Emanuela Pitassi

            Ho appena avuto modo di analizzare Semantic UI 2.0!!!!
            Devo dire che ne hanno fatta di strada, ma speravo fossero diventati un pochino più flessibili su alcune personalizzazioni (vedi ‘spectrum’ dei colori), mentre non riesco più a visualizzare la parte dedicata agli effetti di animazione stile jquery…
            Comunque, ci metterò mano nei prossimi mesi, vi farò sapere ;)
            intanto…buon ferragosto a tutti i web*qualsiasi cosa*!

          • http://www.internetbusinesscafe.it/ Giacomo Freddi

            Ciao Emanuela, grazie per questo bellissimo commento, sicuramente c’è qualcosa da aggiungere, lo faccio non appena testo qualcosa di nuovo! ;)

            Saluti,
            Giacomo