Iniziamo tutti da qualche parte. Come nuovo designer, non avrei potuto preoccuparmi meno della struttura nei miei progetti. Aprerei Photoshop e spingo i pixel fino a quando non ho creato qualcosa che ritenevo bello. Come ho imparato a codificare, il mio processo è stato allo stesso modo casuale.
Non guardo indietro ai vecchi tempi con troppo affetto. Il mio lavoro era sciatto e sfocato. Non avevo obiettivi chiari. Come inizio, suppongo che non sia poi così male, considerando che la maggior parte della mia educazione al design proveniva dai siti di tutorial di Photoshop, il mio lavoro non era terribile.
Ma poi ho imparato a conoscere i sistemi di rete. Ho dimenticato esattamente quando e come sono diventati popolarmente usati nel web design, ma all'improvviso, ogni sito web-design in cui sono andato era pieno di articoli su 960.gs, o qualche altro sistema a griglia. L'importanza di fornire una struttura visiva coerente nei nostri layout è stata sottolineata da tutti i grandi nomi e trasformata in una tendenza.
Altrettanto rapidamente la tendenza è diventata uno standard del settore, e ora la maggior parte di noi non ci pensa due volte se implementeremo o meno un sistema di rete. L'unica domanda è, quale? Andremo con uno dei grandi nomi o con una variante meno conosciuta, o addirittura fare il nostro?
In questo articolo vorrei dare un'occhiata alla seconda opzione: nuovi e meno conosciuti sistemi di grid. C'è sempre qualcuno che viene fuori con nuovi modi per risolvere i vari problemi di layout, e penso che sia importante conoscere il maggior numero di approcci possibile, quindi diamo un'occhiata ad alcuni framework di base della griglia.
34Grid riguarda la distribuzione di colonne uguali. Può ospitare anche distribuzioni disuguali, ma questo non è lo scopo principale di questo sistema di grid. Per quelli di voi che vogliono dividere la maggior parte o tutte le vostre pagine in porzioni orizzontalmente uguali, questa è la vostra struttura.
Come funziona
Il framework è progettato per essere adattabile alle tue esigenze, quindi non solo scaricare e andare. Devi prima configurare la tua griglia sulla home page del progetto. Un modulo rapido consente di determinare quante colonne si adatteranno in una riga, quanto saranno grandi i margini e se applicare o meno le transizioni CSS3 alle colonne quando la vista cambia dimensione.
Il codice stesso è diviso in due file CSS: uno con il codice base e uno con tutte le query multimediali. Le classi CSS sono semplici. L'applicazione di ".col_1" a una colonna riempirà la riga al 100%. '.col_2' creerà una colonna con una larghezza del 50% e così via.
Inoltre img elementi, oggetti e alcuni altri vengono automaticamente ridimensionati. Esiste una classe extra per aiutare gli oggetti video a comportarsi. Il sito web del progetto fornisce consigli su come incorporare Facebook e Twitter per giocare bene.
svantaggi
Non sembra essere un modo per nidificare colonne o creare arrangiamenti di colonne più complessi all'interno di una singola riga. D'altra parte, se non hai bisogno di complessità e vuoi semplicemente un framework semplice che puoi modificare ogni volta che devi, 34Grid farà il lavoro.
Griglia semplice è un'opzione reattiva che arriva a una larghezza massima di 1140 pixel. In altre parole, mentre è progettato per giocare bene con tablet e telefoni, Simple Grid fa in modo che gli schermi più grandi non siano tralasciati.
Come funziona
Come suggerisce il nome, questo sistema di griglia è abbastanza leggero. Il tutto è contenuto in un file CSS non compresso di quattro kilobyte.
I nomi delle classi sono progettati per essere facilmente comprensibili: '.col-2-6' dividerà la riga in sei colonne e definirà la larghezza della colonna a due colonne di larghezza. Ogni riga può essere divisa in una colonna, ".col-1-1", o due, tre, quattro, ecc. Fino a dodici.
svantaggi
Come 34Grid, non sembra esserci alcuna disposizione per le colonne di nidificazione. Inoltre, il modo in cui i margini vengono gestiti per la prima e l'ultima colonna, può causare difficoltà durante la creazione, ad esempio, di una galleria fotografica.
Questo è per tutti coloro che preferiscono una griglia semplice con nomi di classi inglesi semplici. È reattivo, facilmente comprensibile e implementato rapidamente.
Come funziona
Dopo aver sistemato i soliti elementi ".container" e ".grid", le colonne vengono implementate alla vecchia maniera. Una classe ('.unit') viene utilizzata per definire gli attributi generali di una colonna e un'altra classe viene utilizzata per definire la larghezza. Le righe possono essere divise in 2-5 colonne, e i nomi delle classi sembrano tutti così: ".uno-di-tre,. Due-tre-tre".
Sono inclusi anche alcuni stili tipografici di base.
svantaggi
Ancora una volta, questo è un framework di griglia pensato per layout semplici, quindi nessuna disposizione per colonne annidate. Inoltre, esiste un solo punto di interruzione, impostato su una larghezza della finestra di 650 pixel, pertanto alcune delle colonne potrebbero finire in modo anomalo per dimensioni piuttosto ampie.
Matt (AKA Vantaggio ) è un po 'come me. Ama il design, ma non ama molto la matematica. Di conseguenza, il suo Griglie proporzionali sembra fare a meno di calcoli infiniti il più possibile a seconda del box-sizing proprietà. Il risultato è un sistema di griglia completo, ma comunque molto leggero, che copre le basi per un layout reattivo.
Come funziona
Quando dico che questo sistema dipende da box-sizing Voglio dire che alle colonne vengono date larghezze percentuali senza considerare le grondaie. Le grondaie a larghezza fissa sono definite da padding ; e box-sizing assicura che le colonne giochino bene insieme.
Le larghezze di gronda e la maggior parte delle altre misurazioni sono definite con "em". Fedele al nome di questa griglia, le classi di colonne sono proporzionali (es. .col-one-third , .col-two-thirds ), e le colonne sono più o meno infinitamente annidabili, che è qualcosa che mi piace molto.
Le classi sono incluse per cambiare le dimensioni della colonna in tre diversi punti di interruzione. Le domande dei media stesse sono strutturate in modo "mobile-first", in linea con le pratiche standard.
C'è un foglio di stile separato per Internet Explorer 8 e precedenti. Vedere come IE8 non supporta le query multimediali e le versioni precedenti non supportano box-sizing , sono forniti con un layout a larghezza fissa.
Sono inclusi anche i file SASS (entrambi .sass e .scss) per una personalizzazione rapida e semplice del sistema di grid.
svantaggi
Non mi dispiacerebbe avere più larghezze di colonne con cui lavorare (quinti, sesti, ottavi). Altrimenti, si tratta di un sistema di griglia in gran parte privo di errori e a tutto tondo.
Dei sistemi di rete avanzati in questo elenco, Uno% è il più semplice, ma non è affatto incompleto. È progettato per ospitare schermi un po 'più grandi e grandi elementi dell'interfaccia utente, se la sua home page è una indicazione.
Il nome deriva dal fatto che la larghezza della griglia e della colonna viene calcolata in modo che corrisponda sempre al 99% anziché al 100%. Ciò elimina la necessità di alcuni dei decimali e degli arrotondamenti numerici più complessi che i browser sono spesso costretti a fare.
Come funziona
La griglia stessa è suddivisa nelle dodici colonne classiche. Le classi sono semplici ( .onerow , .col1 , .col6 ), e mi piace il fatto che tu, per lo più, usi solo una classe per colonna.
Per impostazione predefinita sono inclusi due punti di interruzione: 768 pixel e 1024 pixel. Se sono onesto, quella prima sembra un po '... grande ... ma puoi sempre aggiungere un altro punto di rottura se ne hai bisogno. Sono inoltre forniti due esempi di larghezza del layout desktop: 1000 pixel e 1200 pixel.
Nella home page dei progetti è possibile scaricare file di azione e PSD di Photoshop adatti a simulare i layout con questo sistema di griglia.
svantaggi
I miei due grandi problemi qui sono i soliti. Primo: nessuna colonna di nidificazione. Le colonne di nidificazione sono buone, gente! Secondo: l'ultima colonna di ogni riga deve avere il .last classe applicata ad esso.
Un framework griglia CSS cross-browser che non nasconde i pixel nei margini! Questa è la tagline per Flurid, e un rapido sguardo alla documentazione ti spiegherà perché: il creatore di Flurid non vuole davvero che il tuo layout si spezzi. Mai.
Ecco la cosa, a causa del modo in cui funziona l'arrotondamento sub-pixel, un browser a volte dirà "avvitarlo" e posizionerà l'ultima colonna nella riga da qualche parte che non dovrebbe andare. Flurid è costruito per la stabilità, in modo che il tuo layout funzioni sempre, anche su versioni precedenti di IE. (La compatibilità è elencata come IE5 +.)
Come funziona
Flurid ha tutte le funzionalità di cui hai bisogno: colonne regolari, colonne miste, colonne nidificate e colonne spostate. L'elenco di possibili larghezze e classi di colonne è ampio e basato sul rapporto, quindi ti consigliamo di dedicare del tempo per familiarizzare con loro.
Una certa documentazione ragionevolmente completa è fornita tramite GitHub, così come un plugin jQuery che aggiunge funzionalità extra-sì, viene fornito con un proprio plugin jQuery, che fornisce colonne di altezza uguale, e può mettere classi alternative sulle colonne, per il piacere dello stile.
svantaggi
È fastidioso .last classe di nuovo. Tuttavia, secondo la documentazione, c'è una buona ragione per questa volta.