Se ami il design basato sulla griglia, questo articolo è per te. Abbiamo setacciato il web e compilato tutte le risorse di rete che abbiamo potuto trovare. Abbiamo tutti i migliori quadri, costruttori di reti, guide pratiche e altro.
Inizia la navigazione e il bookmarking!
Hate Grid Frameworks?
Prima di iniziare, voglio solo dire che so perfettamente che molte persone che stanno leggendo questo sono già piene di rabbia per i mali delle strutture di layout.
In verità, c'è molto da dire contro i quadri della griglia. Sono ingombranti, hanno una curva di apprendimento e spesso lanciano semantiche fuori dalla finestra. Inoltre, ci sono un milione di queste cose, il che rende difficile iniziare le discussioni sulle pratiche standard.
Se cadi nel campo degli hacker del framework CSS, non preoccuparti, ci sono ancora molte risorse di progettazione della griglia che non hanno nulla a che fare con i framework. Nel frattempo, ecco alcune alternative alle strutture della griglia.
Rolling Your Own Grid Layouts al volo
Di recente ho pubblicato un articolo su come ottenere facilmente layout complessi a più colonne in modo rapido e tutto da solo senza complicati framework o nomi di classi non semantiche. È così facile che non si possa mai più usare un framework per il layout.
gridless
Gridless è uno standard HTML5 e CSS3 opzionato per rendere mobili i primi siti web reattivi e cross-browser con una bella tipografia. Non viene fornito con sistemi di griglia predefiniti o classi non semantiche.
Stack layout
Un sistema di layout CSS flessibile e basato su componenti flessibile che utilizza pesantemente gli elementi inline-block.
Caldaia HTML5
HTML5 Boilerplate sta rapidamente diventando il punto di partenza standard per i moderni progetti di web design. Ultimo ho controllato che ha tutto ciò che si potrebbe desiderare con l'esclusione di un sistema di rete.
Quadri di vecchia scuola
Queste sono le griglie del nonno che esistono da anni ormai. Alcuni di loro stanno davvero iniziando a mostrare la loro età, quindi puoi o non vuoi usarli oggi.
Planimetria
Blueprint è un framework CSS, che mira a ridurre il tempo di sviluppo. Ti dà una base solida per costruire il tuo progetto in cima, con una griglia facile da usare, tipografia sensibile, plugin utili e persino un foglio di stile per la stampa.
960.gs
960.gs è il luogo in cui la maggior parte delle persone inizia quando entra nei framework CSS e nei sistemi di grid. È ancora abbastanza popolare e molti dei nuovi framework sono basati almeno parzialmente sul lavoro qui.
Sistema a griglia Fluid 960
Una variante popolare di 960.gs con un layout fluido che regola automaticamente la larghezza in base alle dimensioni della finestra del browser.
YAML
? Ancora un altro layout a più colonne? (YAML) è un framework (X) HTML / CSS per la creazione di layout flottanti moderni e flessibili. La struttura è estremamente versatile nella sua programmazione e assolutamente accessibile per gli utenti finali.
Fantastici nuovi (er) framework
Perkins
Perkins combina la brillante novità di HTML5 e CSS3 con l'incredibile potenza di LESS.js per creare un framework CSS definitivo. Se ti piace sperimentare con soluzioni CSS futuristiche, questo è un ottimo framework per te. Usa una variante della griglia da 1KB.
Meno Framework
Less Framework è un sistema di griglia CSS reattivo per la progettazione di siti Web adattivi. Contiene 4 layout e 3 set di preset tipografici, tutti basati su una singola griglia. ?Di meno? in questo senso non deve essere confuso con LESS.js dall'alto. Lo so, è confuso. Devono nominare questo qualcos'altro!
Columnal
Un sistema di griglia CSS reattivo che aiuta i browser desktop e mobili a giocare bene insieme. Columnal utilizza il proprio sistema di griglia ibrido che prende in prestito da pochi altri.
Scheletro
Skeleton è un fantastico quadro reattivo che ho scritto un paio di volte prima. Se non sei sicuro del tempo extra e della curva di apprendimento coinvolti nella progettazione reattiva, dovresti verificarlo. Skeleton è costruito liberamente su 960.gs.
52Framework
Un framework che utilizza HTML5, CSS3 e JavaScript per massimizzare la compatibilità delle moderne pratiche di sviluppo web su tutti i principali browser. Si basa su una semplice griglia a 16 colonne.
G5 Framework
(X) HTML5, CSS3, PHP e jQuery Front End Framework. G5 Framework è iniziato come un progetto personale. Nel tentativo di accelerare il flusso di lavoro, riutilizzare le migliori pratiche di codifica e tecniche di codifica simili, il framework funge da file di avvio per i nuovi siti Web.
La griglia di G5 Framework è basata su Easy Grid.
Facile sistema a griglia percentuale con HTML5
Le caratteristiche principali di questo sistema a griglia sono che tutte le colonne hanno una larghezza basata sulla percentuale in modo che si adattino all'elemento contenitore. Significa che con l'uso di questo sistema non dovrai definire manualmente una larghezza di ogni colonna, puoi semplicemente lanciarla all'interno di qualsiasi contenitore e le larghezze delle colonne e le grondaie delle colonne verranno automaticamente impostate.
CSS di cabina
I framework CSS tendono ad essere super gonfiati. Cabin risolve questo problema con un sistema di estensione modulare che ti consente di aggiungere solo ciò di cui hai bisogno. Sono supportate varie estensioni di rete.
jQuery Massoneria
jQuery Masonry non è affatto un framework CSS, è un plug-in per JavaScript che consente progettazioni basate sulla griglia che utilizzano una sorta di sistema a virgola mobile. È uno strumento fantastico che è abbastanza popolare in questo momento.
InuitCSS
Questo quadro ha tutto: plugins tablet mobile flessibile progressivo sensibile estensibile accessibile pragmatico funzionale utile pronto per la produzione di più. Il sistema di rete è personalizzato in base alle tue esigenze.
Quadri di piccole dimensioni
1 riga CSS Grid Framework
Ho pensato che una singola riga della Griglia CSS suonasse pazzesca, ma questo ragazzo l'ha tolto. Non sono sicuro di quanto sia pratico nel mondo reale, ma sono impressionato dal pensiero che ci è entrato!
Griglia da 1 KB
Questo è uno dei miei vecchi preferiti.Si tratta di un sistema di rete spogliato al suo essenziale essenziale, non sono necessari video dettagliati della durata di sessanta minuti. Se non capisci i sistemi di griglia CSS, inizia qui.
Piccola griglia fluida
Proprio come la griglia di 1KB, solo fluido per un divertimento aggiunto.
CSS sottile
SlimCSS è un framework CSS leggero che costituisce una solida base per il cross-browser con molte funzionalità essenziali pur rimanendo il più piccolo possibile.
Altri quadri
Gravità
Gravity è un framework basato su SASS per la creazione di siti Web HTML5 potenti e facilmente gestibili. Ti aiuta a prototipare rapidamente le tue idee e generalmente ti semplificheranno la vita.
1140 Grid
La griglia 1140 si adatta perfettamente a un monitor 1280. Sui monitor più piccoli diventa fluido e si adatta alla larghezza del browser.
Oltre un certo punto utilizza le query multimediali per pubblicare una versione mobile, che essenzialmente impila tutte le colonne l'una sull'altra in modo che il flusso di informazioni abbia ancora senso.
The Square Grid
Un semplice framework CSS per designer e sviluppatori, basato su 35 colonne di uguale larghezza. Ha lo scopo di ridurre i tempi di sviluppo e aiutarti a creare siti Web di bella struttura.
Griglia fluida
Fluid Grid è un nuovo sistema a griglia che funziona allo stesso modo di Blueprint o 960, ma con qualsiasi larghezza di pagina, persino layout fluidi. Si basa solo su CSS.
EZ-CSS
EZ CSS è un tipo di framework di griglia completamente diverso. Utilizza un sistema modulare unico che consente di copiare, incollare e annidare semplici layout per creare pagine complesse. È un po 'difficile avvolgere la testa, ma un uso davvero brillante dei CSS.
FEM Framework CSS
FEM CSS Framework è un sistema a griglia di 960px larghezza + 12 colonne + stili comuni CSS, per sviluppare facilmente e velocemente i layout web.
Si basa sul sistema Grid 960, ma con una svolta nella filosofia per renderlo più flessibile e veloce da giocare con le scatole.
CSS elastico
Un semplice framework css per il layout di interfacce basate sul web, basato sulle tecniche di layout stampate di 4 colonne ma con capacità di combinazioni illimitate di colonne. e capacità di rendere facilmente la disposizione elastica, fissa e liquida.
CSS Atatonico
Questo framework è principalmente rivolto alla tipografia, ma esiste anche un sistema di grid molto leggero.
Baseline
Baseline facilita lo sviluppo di un sito Web con una griglia piacevole e una buona tipografia. La griglia in Baseline è composta da 4 colonne di base, per una maggiore flessibilità ogni colonna può essere divisa in 2 unità.
Emastic
Un framework CSS fluido e leggero con un focus sulla tipografia.
Griglia d'oro
The Golden Grid è un sistema di rete web. È un prodotto della ricerca del perfetto sistema di rete moderno. Dovrebbe essere uno strumento CSS per i siti web basati sulla griglia.
Frak
Frak è un framework CSS per la creazione di griglie fluide. Ha un concetto interessante che implicava l'utilizzo di moltiplicatori come nomi di classi.
Quadro facile
Facile è un framework CSS / HTML / JavaScript iniziato come progetto personale e poi cresciuto in qualcosa di più. L'idea alla base è quella di ridurre la quantità di tempo speso per impostare il modello HTML principale di base riutilizzando le stesse tecniche di codifica. Include un semplice sistema di griglia basato sulla percentuale.
Griglia
Grid un sistema a griglia fluido semplice e minimale che può fluire all'interno di qualsiasi contenitore fluido o fisso o giocare bene con un altro sistema Grid.
520 Grid
Un sistema a griglia per la progettazione di pagine Facebook, pazzo ma vero.
Strumenti e Grid Builders
Grid Calculator
Un fantastico calcolatore di griglia con supporto per template Photoshop e Illustrator.
Grid Calculator and Generator
GridCalc è un calcolatore di griglia facile da usare. Basta inserire la larghezza desiderata della pagina e un intervallo approssimativo per la larghezza della colonna e della grondaia e il calcolatore fornirà tutte le combinazioni possibili entro i limiti immessi.
GuideGuide
GuideGuide è il mio nuovo plugin di Photoshop preferito. Questo strumento gratuito posiziona automaticamente le guide nel documento di Photoshop in base all'input.
3? 4 Grid Builder
Grid Builder consente di creare facilmente una griglia HTML con un semplice trascinamento
e rilascia l'interfaccia. È uno strumento davvero interessante che ti consente di creare griglie personalizzate per ogni progetto.
Gridr Buildrrr
Un costruttore di griglia personalizzato super semplice ed efficace.
Boks
Uno strumento davvero eccezionale e sottovalutato che consente di creare implementazioni personalizzate di Blueprint. Dai un'occhiata al mio tutorial qui.
Sistema a griglia variabile
Il sistema a griglia variabile è un modo rapido per generare una griglia CSS sottostante per il tuo sito. Il file generato da CSS si basa sul sistema Grid 960.
ZURB CSS Grid Builder
Un grande costruttore di griglia che serve una griglia molto semplice con un ingombro minimo.
piastra
Vuoi utilizzare un design basato sulla griglia senza un framework? Questo strumento crea un'immagine di sfondo personalizzata che facilita il raggiungimento del layout della griglia da solo.
Basta inserire le tue dimensioni dopo il nostro URL per ottenere un'immagine guida in background con cui lavorare nel tuo browser. Le griglie sono create al volo, quindi qualsiasi combinazione dovrebbe funzionare.
Gridulator
Un altro strumento per immagini di sfondo come la piastra. La differenza principale è che Griddle genera un URL per il tuo ingresso e questo ti dà un'immagine reale (mi piace Griddle meglio).
Grid Lover Sites e Must-Read Articles
Basato sulla griglia
Una galleria di design web ricca di fantastici esempi di design basato sulla griglia.
Design By Grid
Un altro grande sito dedicato agli strumenti, agli articoli e ad altre risorse basate su griglia.
Il sistema di griglia
Un punto di riferimento per tutto ciò che riguarda la rete. È una vecchia fonte ma sembra che sia ancora aggiornata regolarmente.
Grid Based Design Simplified
Un primer imbattibile sui fondamenti del design basato sulla griglia. Questo dovrebbe essere il primo passo nella tua ricerca sulla griglia.
Il sistema di griglia 960 reso facile
Un'introduzione completa per principianti al sistema di griglia 960 da parte tua.
Progettazione con approccio basato su griglia
Un vecchio articolo di Smashing Mag, ma ha ancora tonnellate di grandi risorse e informazioni da verificare.
Ripensare le griglie CSS
Mark Boulton discute su come dovrebbe funzionare il supporto CSS nativo per le griglie. Una buona lettura!
Conclusione
Spero ti sia piaciuta questa enorme collezione e disponi di risorse di progettazione basate sulla griglia per tenerti occupato per mesi e mesi.
Lascia un commento qui sotto e facci sapere cosa pensi degli strumenti e delle risorse di cui sopra. Usi qualsiasi quadro di griglia? Quali e perché?