7 griglie CSS per creare un sito web fluido e reattivo
Sviluppare siti web fluidi e responsive sono due tendenze assodate nel flusso di lavoro di un web designer, questo ha influito anche sull’impostazione delle griglie CSS che si sono adattate per fornire gli strumenti necessari a questo tipo di progettazione, se non sai cosa sono le griglie CSS e come si possono utilizzare prima di proseguire in questa raccolta ti consiglio di leggere questo articolo, nel caso invece le conoscessi già buona lettura.
Blu CSS
Imposta di default il layout ad una larghezza di 1000px, che chiaramente puoi modificare per i tuoi scopi, le colonne al suo interno si adatteranno per rientrare in questa dimensione, essendo fluide, BluCSS ne possiede nativamente di 10 tipi.
Grazie alla classe classe blu_ da aggiungere al tag img puoi rendere anche le immagini fluide.
Questa griglia contiene anche regole per un web design reattivo includendo 4 tipi di dimensioni: Desktop, laptop, tablet e mobile.
Negative Fluid Grid
Grazie a questo strumento potrai creare una griglia seguendo vari step nei quali impostare i valori che alla fine comporranno le regole CSS da usare per lo sviluppo, i valori da impostare sono: Il numero di colonne totali, la larghezza massima e quella minima del layout, la distanza tra le colonne, il bordo del layout e il margine interno delle colonne.
Il risultato saranno una serie di regole CSS pronte all’uso per la creazione di un layout fluido, ma non “responsive”.
Golden Grid System
Composto da 18 colonne di cui la prima e l’ultima sono adibite a creare uno spazio dal bordo della finestra browser, lasciando quindi 16 colonne da gestire per il design del layout web, che possono essere ridotte a 8 oppure 4 rispettivamente per adattare la struttura a dispositivi tablet o mobile, così facendo GGS può ricoprire un range da 240 a 2560px di larghezza.
Oltre alle normali griglie è presente anche un set di regole per facilitare la progettazione della parte tipografica del sito web che si dovrà adattare alle varie dimensioni.
Semantic.gs
The Semantic Grid System permette di creare facilmente layout fluidi, fissi e reattivi.
La grande differenza di questa griglia rispetto alle altre è l’utilizzo esclusivamente di pre-processor come Less.js ( o nel caso Sass o Stylus) per la creazione della struttura invece che le classiche classi CSS, rendendo lo sviluppo della griglia più veloce e semplice.
Per esempio potrai usare un comando come questo @columns:12 per impostare la griglia a 12 colonne, meglio no?
Simple grid
Pre impostata per un layout a 720px, 985px e 1235px, può essere composta assegnando agli elementi HTML delle classi chiamate slot che possono essere sommate tra di loro per aumentare la larghezza della colonna, ogni set di slot potrà essere rinchiuso in un elemento con classe row, in questa maniera potrai inserire facilmente una sotto l’altra dei set di slot, quindi di colonne, con larghezze differenti senza che questi possano interferire tra di loro.
Columnal
Un insieme di efficaci regole CSS per creare layout fluidi, questa griglia è molto utile soprattutto per chi vuole progettare colonne annidate tra loro, al suo interno quattro fogli di stile dedicati solamente alla correzione dei bug di IE garantiscono una solidità su tutti i browser.
Fluid Baseline Grid
Contiene tutto il necessario per costruire griglie usando anche HTML5 e CSS3 grazie a soluzioni come HTML5 Shiv, RespondJS e JQuery, grazie all’uso di percentuali e media-queries puoi ottenere una struttura fluida o reattiva, con particolare attenzione alla tipografia grazie a diversi stili dedicati.
All’interno del file style.css troverai impostate anche 7 regole media-queries per rendere il layout reattivo alle dimensioni di: Mobile portrait 320px, mobile landscape 480px, small tablet 600px, tablet 768px, landscape tablet 1024px e desktop 1280px.
FBG usa al suo interno invece che il classico reset degli stili il file normalize.css che esegue il reset solamente sulle regole che possono provocare danni lasciando intatte quelle utili.
Ancora nessuna risposta per 7 griglie CSS per creare un sito web fluido e reattivo