960 grid. il primo esempio di grid per web

Un servizio per un web migliore? Un modo per aiutare gli sviluppatori ad imparare bene i css?

“960 Grid System”:http://960.gs è un sistema per organizzare lo svilupo web, fornendo delle dimensioni comuni basate sulla larghezza di 960 pixels.

bq. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

h4. Quindi… cosa ce ne facciamo?

Il css sviluppato insieme all’html fornisce la base per la creazione di un layout template da poter utilizzare nella realizzazione dei vostri siti web.

Abbiamo a disposizione in questo caso la struttura, che era utilizzata anche per Kreatore.it, a dodici colonne.
Quella da me proposta di seguito è una semplificazione che potete usare liberamente rispetto a quello preparata da 960 GS.

A .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,
 .grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{position: relative;}
 .grid_1{width:60px;}
 .grid_2{width:140px;}
 .grid_3{width:220px;}
 .grid_4{width:300px;}
 .grid_5{width:380px;}
 .grid_6{width:460px;}
 .grid_7{width:540px;}
 .grid_8{width:620px;}
 .grid_9{width:700px;}
 .grid_10{width:780px;}
 .grid_11{width:860px;}
 .grid_12{width:960px;}
 .clear{clear:both;display:block;}
 .center{margin:0 auto;clear:both;}
 .left{display:inline;float: left;}
 .margin{margin-left: 9.0px; margin-right: 9.0px;}
 .padding{padding-left: 9.0px; padding-right: 9.0px;}
 .right{display:inline;float: right

Ad oggi, con l’avvento della struttura Flex dei css3 questa griglia si può anche definire superata.

Leggi il contenuto originale su KREATORE.IT