I framework responsive piu popolari.

Hai intrapresso la strada di  Web Developer, vuoi diventare un mago nel Web Design, conosci CSS o semplicemente vuoi creare un sito web? Allora spero che la mia panoramica ti sara d'aiuto perche con questi framework potrai creare il tuo sito web gratis da solo.

E se ti ritrovi in difficolta nel creare  una pagina html potrai sempre consultare i nostri corsi "Sito web da zero" e "CSS pratica" e per renderlo resposivo dovresti utilizare questi  framework. Allora vediamo subbito quali ci sono e cosa propongono.
Tutti conoscono Bootstrap framework, almeno io lo penso cosi. Pero esistono anche altri magari meno potenti ma comunque in certi ocasioni potrebbero essere utili . Quindi ho deciso di scrivere una panoramica su  framework responsiv più diffusi.

 

Twitter Bootstrap

dis1
Mi scuso con coloro che lo odiano, ma  lo stesso in questo elenco non posso non nominarlo. Anche perche abbiamo creato una piccola guida al riguardo.
Un framework molto comune e diffuso, su quale sono già stati scritti un sacco di articoli, percio vorrei soltanto brevemente ricordare le sue caratteristiche:

    Lingua - Less
    12 colonna di layout adattivo, il supporto per i dispositivi mobili, tablet e monitor
    Molti componenti, pulsanti, menu a discesa, i propri stile per i campi di input, elenchi, intestazioni, etichette, icone, gli avvisi, le schede, barre di avanzamento, i suggerimenti, "a fisarmonica", "Carosello", e così via.
    Vari Javascript plugin
    documentazione completa
    Supporto Scaffolding , compreso l'uso di Bootstrap-stili alle pagine HTML gia creati
    Una grande comunità che scrive nuovi plug-in, si integra completamente nel design
Dopo questo ellenco, possiamo dire che framework Bootstrap - è all-in-one ed e in grado di soddisfare le esigenze di qualsiasi sviluppatore e per questo che è così popolare.

Responsive Grid System

dis2

Lo sviluppatore afferma che questo non è un framework, e non è nemeno una racolta di bozze ma è il modo più semplice e veloce per creare un sito web responsivo.
Il sito ufficiale indica dei seguenti vantaggi del suo utilizzo:

    È possibile specificare qualsiasi numero di colonne da 2 a 12.
    Facilità di connessione a un sito esistente
    Colonne restringibili vengono scalati a qualsiasi larghezza
   Per primo si sceglie il contenuto, e quindi si seleziona markup
    Utilizzo di punti di interruzione (per 480 pixel, di default)
    È possibile specificare specificare sequenza delle colonne sui dispositivi a picola risoluzione. Cio e non metere per forza una colonna sopra altra ma per esempio lascire in una riga 3 colonne e allora dividere una riga intera di 12 colonne per 4 rige sovrapposti una sopra altra  
    Non hai bisogno di una profonda conoscenza della matematica (deve essere in grado di contare fino a 12)
Layout e niente di più!

1140 CSS Grid

dis4 Marcatura a 1140px, progettato per i monitor a 1280px . Su monitor con una risoluzione inferiore, diventa responsiva e si adatta alla larghezza della finestra del browser. Dopo un certo punto di largezza, viene richiamata la versione per dispositivi  mobili, che riposiziona  colonne una sopra altra , in modo che le informazioni conservano il suo significato.

    12 colonne di layout,
    versioni per dispositivi mobili, adatte per tutti i dispositivi che supportano CSS o richieste multimediali
    Un modello disponibile in formato Photoshop
    Layout testato su nuovi e vecchi computer, computer portatili, netbook, tablet, smartphone e persino il vecchio Nokia
    Supporta Chrome, Safari, Firefox, IE 7, IE 8, supporto parziale per IE 6
    Fino  40px spazio vuoto  tra le colonne
    Le immagini vengono rideminsionati alla larghezza della colonna,  non sono raccomandati  specificazioni di larghezza e l'altezza dell'immagine

Se stai creando un sito con  1140 pixel di larghezza della pagina, è probabilmente quello che ti serve.

Skeleton

dis3

    Layout di 12 colonne, 960px di largezza masima
    Nel framework incluso tipografia, i pulsanti e le forme
    Framework  utilizza tanti  richieste al server
    Supporta Chrome, Safari, Firefox, IE 7 e superiori, i browser mobili
    Ci sono estensioni per WordPress, Drupal,

Gumby Framework

dis5
Questo framework   assomiglia tanto a Bootstrap.

    960-pixel layout "ibrido", 12 o 16 colonne
    Elementi che comprende: forme, pulsanti, menu a discesa e tab o scede
    Javascript toggles e drawers
    Disponibili template di Photoshop

Gridless

dis6
Sono presenti template in  HTML5 e CSS3 per la creazione di siti web adattivi, cross-browser con grande tipografia.

    DBY-approccio - un framework che  rimuove tutti i dettagli noiosi nel sviluppo di un sito web e applicazioni web
    Viene fornito con tutto ciò che già siete stanci di eseguire all'inizio di ogni nuovo progetto. Include CSS, tipografia, struttura delle cartelle ben organizzata, correzioni per IE e altre cose utili
    Mobile-first  layout adattivo, che si adatta alla larghezza del dispositivo
    Supporta IE 6/7/8 attraverso Respond.js
    E 'molto semplice e lineare

Compass (SUSY)

dis7
Pieno supporto per Ruby on Rails, richiede l'installazione di  «compass ». Molto semplice installazione e configurazione, possibilità di modificare la larghezza delle colonne e dei margini, qualsiasi numero di colonne.

The Goldilocks Approach

dis8
"Una buona partenza per la progettazione, in cui la questione di risoluzione del dispositivo viene rimossa subito dal inizio."

    Il Framwork utilizza una combinazione di Em-s, max-width, media query e varie template per rendere il design indipendente dalla risoluzione
    Contiene due ben annotati file CSS che definiscono i tre tipi di media query , a tante colonne  a colonne strette e a  una sola colonna.
    Esso comprende anche una buona tipografia "pronta per uso"
    È un tentativo di creare un layout adattivo che è completamente indipendente dal dispositivo
Sul sito ufficiale ci sono esempi di tutti e tre i tipi  di visualizzazione che utilizzano varie media query.

 

Foundation 3

dis9

Layout flessibile che permette di organizzare rapidamente elementi della pagina,  può essere adattato a qualsiasi dimensione, dai telefoni a schermi televisivi
Creazione rapida, ci sono molti stili ed elementi che accelerano la realizzazione di prototipi funzionanti che possono essere velocemente ridifiniti  e immediatamente inviati alla produzione
Forme, pulsanti, schede, e così via Inclusi
Non c'è bisogno di regolare la visualizzazione della tua pagina web per ogi  dimensione dello schermo da solo
Progettato per SASS

 

Amazium

dis10

1200 px di layout
Il design a 12 colonne adattivo.
Tipografia installata.
Diversi tipi di liste ordinate e non ordinate
La possibilità di nascondere alcuni elementi in varie risoluzioni
Moduli personalizzati e tabelle
Utilizzo di media query
Le immagini ed il video sono adattivi.

 

Initializr

di11
Non è un framework ma è uno strumento per la generazione di template sulla base di  HTML5, CSS3 e jQuery. Consente di creare template basati su HTML5 Boilerplate, Bootstrap, o template adattivi,  disponibile la documentazione in varie lingue.

 

Html5boilerplate

dis12
Come dicono autori: HTML5 Boilerplate ti aiuta a costruire applicazioni o siti web veloci, robusti e adattabili. Kick-start  e il tuo progetto sfrutterà  la conoscenza combinata e lo sforzo di 100  sviluppatori, e tutto in un piccolo pacchetto. Tante possibilità e strumenti.

ResponsiveAeon

dis13
Questa framework utilizza una struttura dativa espressa in percentuale, utilizzando media query, HTML5 e JS.
Supporta tutti gli elementi HTML5: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog, audio, canvas, video
Larghezza della Pagina 1104px
Ci sono  file CSS e JS per varie stili e altro...

Gridiculous

dis14

Supporta la larghezza della pagina 320-1200 px
È possibile impostare una larghezza massima di 960px, 640px, 320px fisso
Il supporto delle  colonne incorporate. Una nel altra.
Le immagini ed il video sono adattivi

Framework Kube

dis15
Anche se è minimalista ma è un framework  adattivo.
Ci sono diverse varietà di retina , le classi sono descritti come "mezzo", "terzo", ecc
 Include la tipografia e vari elementi: forme, pulsanti, tabelle,
Disponibili per il download imediato CSS-file o Less per sviluppatori esperti

inuit.css

dis16
Framework di riferimento per gli sviluppatori esperti. "
Si bazza su di SASS,
 Adatto per i progettisti che desiderano concentrarsi sulla progettazione piuttosto che sul codice,
 non sono  inclusi elementi di design, lo sviluppatore di questo framework consiglia di utilizare  Bootstrap
Utilizzo Less

960 Grid System

dis17

    Framework che supporta griglia a 12 e 16 colonne di 960px di larghezza.
    E 'possibile spostare gli elementi con l'aggiunta di ulteriori classi
    C'è una versione alternativa con griglia a 24 colonne.

 

Abbimo finito, sono sicuro che essistono anche gli altri framework ma meglio essere bravi nel utilizzare due o tre che essere dilitante in una decina. Perche allora nella mia raccolta ce ne sono quasi una ventina. perche sono un puo diversi e almeno provarli potete capire dove sarebbe meglio utilizare una monovolume che che un camion con rimorchio. In piu ho inserito dei framework che contengono gia dei template pronti per utilizzo basta agiungere il vostro contenuto.

 

 

Letto 1379 volte