I 10 Migliori Framework Front-End

I Framework Front-End sono veri e propri Kit di progettazione dedicati al  Web che permettono di avviare un progetto in modo rapido ed efficiente. Essi sono dotati di tutte le basi di cui avete bisogno in fase di realizzazione. Ci sono una varietà di framework là fuori, così oggi ne vediamo alcuni tra quelli più utilizzati e proveremo ad andare oltre per capire quando si dovrebbe e non utilizzarli.

Bootstrap

Il Framework Front End Bootstrap

Forse il più famoso in circolazione Bootstrap è un “framework” front end rilasciato da Mark Otto e Jacob Thornton, nato nel nido di Twitter e ad oggi indipendente. Permette di sviluppare pagine web e  layout grazie all’integrazione di un set di elementi grafici, stilistici e di javascript pronti all’uso.

Vantaggi:

Il grid system offre la possibilità di organizzare i tuoi contenuti web all’interno di una griglia fissa o fluida basata su Grid960, in modo da suddividere la pagina attraverso l’uso di colonne.

Componenti – Sono presenti elementi di interazione con l’utente come ad esempio Dropdown menus, breadcrumbs, paginazione, Alerts, etichette e badges

Elementi Css di Base – Bootstrap mette a disposizione un set di elementi indispensabili per chi realizza un sito web. Bottoni, Forms, stili per la tipografia, icone, immagini.

Javascript – Nel file js del Bootstrap troviamo una serie di plugin jQuery pre-caricati in stile Twitter. Elementi tipo lightbox carousel, tab, accordion, transitions.

Tutto qui, davvero. Partendo con questa solida base potrete provare a sviluppare qualsiasi cosa, customizzare gli elementi grafici, aggiungere e mettere colonne, tab, elementi interattivi, direttamente intervenendo sul codice html aggiungendo o modificando le classi. Pur essendo un sistema molto completo permette ampi margini di personalizzazione.

Pure Css

Pure_CSS_framework_front_end

Pure CSS è simile all’ offerta di Bootstrap con l’affermazione che è stato progettato per essere estensibile e personalizzabile. E’ molto promettente, e dal sito ufficiale possiamo ammirare alcuni design convincenti che mostrano segni di individualità. Pure taglia fuori tutto il Javascript offrendo un kit CSS puro (come suggerisce il nome) che è certamente attraente per coloro che desiderano cominciare con leggerezza.

UI Kit

UI_Kit_framework_front_end

Un framework front-end leggero e modulare per lo sviluppo di interfacce web veloci e potenti. UIKit offre una raccolta completa di HTML, CSS, JS e componenti semplici da usare, facile da personalizzare ed estendibili.

Ha uno stile con similitudini generali al bootstrap, ma abbastanza diverso da fornire un pò di indipendenza nel design. E’ probabilmente il più vicino al bootstrap senza essere il bootstrap. Inoltre è dotato del pieno supporto per linguaggi scritti da destra verso sinistra.

UIKit è un framework open source creato per dare al web un bell’aspetto, può essere esteso con i temi ed è facile da personalizzare per creare il proprio look.

React

React framework front end

React è una libreria Javascript dedicata alla creazione di interfacce utente. Non è un Framework MVC e non fa uso di Modelli, ma utilizza Javascript per generare Markup. In un’applicazione JavaScript tradizionale, è necessario guardare ai dati modificati e apportare modifiche al DOM per tenerlo up-to-date. Anche AngularJS, che fornisce un’ interfaccia dichiarativa tramite direttive e l’associazione dati, richiede una funzione di collegamento per aggiornare manualmente i nodi DOM.

React offre un diverso approccio: quando il componente viene inizializzato, viene chiamato il metodo render generando una rappresentazione leggera della vostra vista. Da tale rappresentazione, una stringa di markup viene prodotta e iniettata nel documento. Quando i dati subiscono delle modifiche,il metodo render viene chiamato di nuovo. Per poter eseguire gli aggiornamenti nel modo più efficiente possibile, il valore restituito dalla precedente chiamata si differenzia rispetto a quello nuovo, generando un set minimo di modifiche da applicare al DOM.

GroundworkCSS

GroundworkCSS framework front end

GroundworkCSS è stato costruito da zero con il potente preprocessore CSS, Sass. Sass è un’estensione di CSS3, che aggiunge regole annidate, variabili, mixin, eredità di selezione e altre risorse. GroundworkCSS offre le più avanzate tecniche di layout reattivo al mondo. Dotato di un sistema di griglia incredibilmente flessibile: il sistema di griglia GroundworkCSS supporta tutte le colonne in qualsiasi quantità frazionaria per dodicesimi. Il risultato è una struttura che funziona per praticamente qualsiasi layout moderno che si possa immaginare. Inoltre avete la possibilità di scaricare dal sito ufficiale dei modelli di layout Responsive già preimpostati. GroundworkCSS è open-source, ospitato su GitHub e 100% gratuito.

Workless

Workless framework front end

Workless è un mashup delle migliori risorse presenti in Bootstrap e HTML5Boilerplate. CSS standardizzato, migliora l’usabilità e l’interazione, imposta la tipografia di base per contribuire alla leggibilità e aggiunge facilmente classi di supporto per elementi di stile. Inoltre è estendibile con dei plugin jQuery dedicati.

Cardinal

Cardinal_framework_front_end

Cardinal è interessante in quanto si concentra principalmente sull’aspetto mobile design. Framework CSS “mobile first” con alcuni stili predefiniti , tipografia scalabile, moduli riutilizzabili e un semplice sistema di griglia reattivo. Un approccio interessante, e utilizza le unità REM! Il che è fantastico.

Foundation

Foundation framework front end

Foundation by ZURB è adatto a offrire un inizio “leggero” a qualsiasi progetto. Ti dà tutto il necessario per costruire le colonne di un sito web tra cui add-on per la progettazione canvas off su dispositivi mobili e molto di più. Foundation potrebbe rappresentare un esempio perfetto di aiuto verso i progettisti, senza essere invadente.

Con l’uso della griglia si possono costruire tonnellate di layout, senza l’utilizzo di una sola riga di CSS al di fuori di quello che appartiene a Foundation, con tredici layout per iniziare a costruire quello che vuoi. Questi semplici modelli HTML sono molto facili da utilizzare , basta prendere il codice e rilasciarlo tra i tag di una pagina Foundation. Tra le risorse offerte troviamo  Icon Fonts, Tabelle responsive, SVG social Icons, Modelli HTML, layout Canvas Off, elementi UI e tanto altro.

Topcoat

Topcoat_framework_front_end

Topcoat è il maestro del minimalismo, dando alternative alla vostra UI senza troppe preoccupazioni verso i dettagli. E’ veloce, pulito e soprattutto non vi impedirà di innovare il vostro design. Con più di 100 icone open source utilizzabili come SVG, PNG o icona (carattere semantico). Inoltre avete la possibilità di scaricare i PSD di tutti i componenti del codice di base.

Centurion

Centurion framework front end

Centurion è un framework snello, ma allo stesso modo potente, basato su HTML5 / CSS 3 semantico. Esce dalla scatola con caratteristiche predefinite che consentono di creare siti in facilità, per desktop e mobile, sfruttando uno standard di prossima generazione. Centurion è stato costruito utilizzando Sass, avete quindi la possibilità di agire sui file di base per soddisfare le vostre esigenze e rendere la propria versione personalizzata.

Il giusto utilizzo

Utilizzare i Framework è una scelta talvolta adeguata, ma generare l’intero sito utilizzandone uno probabilmente non è nel tuo interesse. Il consiglio è quello di prendere ogni progetto e di trattarlo in modo indipendente e decidere in che scenario un eventuale bootstrap sarebbe utile. Per esempio, su un grande progetto forse un framework front-end verrebbe in aiuto, ma renderebbe evidente che hai appena preso la strada più facile, perdendo magari di vista l’individualità del design. Quindi ok avviare un progetto in modo rapido ed efficiente, ma attenzione a non soffocare la creatività. Come risulta essere sempre vero, anche il troppo di una buona cosa può essere un male.

Per concludere, date un’occhiata a questa splendida collezione.