framework css responsive

Framework CSS per un web design responsive

April 10, 2012

Ultimamente sto realizzando alcuni siti responsive e quindi mi trovo nel punto di passaggio da teoria a pratica, oggi voglio approfondire alcuni esempi delle migliori griglie in cui mi sono imbattuta durante la ricerca del perfetto framework CSS responsive.

Proprio come la maggior parte dei framework CSS, tutte le griglie citate di seguito vi aiuteranno a sviluppare rapidamente siti, accelerando notevolmente la fase di editing delle media query di base.

Foundation

Foundation

Foundation è  un framework a dodici colonne, è il mio preferito. Ha una griglia molto friendly e reattiva che comprende decine di stili ed elementi che consentono la rapida realizzazione di prototipi cliccabili, che possono poi essere adattati e ridisegnati in fase di produzione. Foundation consente anche di raggruppare rapidamente il layout di una pagina per i dispositivi mobili e il desktop tutto senza grandi sforzi o difficoltà in fase di adattamento.
Foundation Home | GitHub | Docs

Less Framework 4

Less Framework 4

Less Framework contiene ben quattro layout responsive e tre set di preset tipografici, tutto basato su una griglia unica, composta da 68 colonne di 24 px l’una. L’ideale è di realizzare prima il codice per il layout di default (992 px), e quindi utilizzare le media query per codificare diversi layout figli: 768 px, 480 px e 320 px. Il layout predefinito sarà utilizzato su tutti i browser che non supportano le media query, mentre i layout figli saranno pronti, se sarà il caso, per una corretta ottimizzazione.

Less Framework 4 | GitHub

Golden Grid System

Golden Grid System

Golden Grid System è un altro framework che mi attira molto anche se non l’ho ancora provato in modalità progettazione “hardcore”. Consiste in un sistema a griglia modello “volantino” per la progettazione di web responsive. Si divide lo schermo in 18 colonne. Le colonne più a sinistra e destra sono utilizzate come i margini esterni della griglia, e quindi lasciano 16 colonne adatte all’uso nella progettazione. Le 16 colonne possono essere combinate, o piegate, in 8 colonne per i tablet, e in 4 colonne per gli smartphone. In questo modo il framework può facilmente coprire tutte le dimensioni dello schermo da 240 px fino a 2560 pixel. Viene fornito con un piccolo script che aggiunge un pulsante nell’angolo superiore destro della pagina. Quando si fa clic viene visualizzata una griglia con colonne di 1.5 em nella pagina, rendendo molto più facile controllare visivamente l’allineamento degli elementi di design.

Golden Grid System | GitHub

Columnal

Columnal

Columnal è una griglia di 1140 px di larghezza, ispirata a cssgrid.net e a 960.gs. Rende il web design facile, cambiando dinamicamente in base alle dimensioni del browser e passando ad uno stile mobile utilizzando le media query. La griglia è divisa orizzontalmente in dodici colonne.

Columnal

Frameless

Frameless

Frameless | GitHub

Amazium

Amazium

Amazium

The Semantic Grid System

The Semantic Grid System

The Semantic Grid System

 

Tags: , , ,

Leave a Comment