Criei esse sistema de GRID css de 12 colunas, para atender uma necessidade que tive durante o recorte de páginas de um site.

O sistema nasceu para ser diferente dos demais. Se aproveitando do expertise de cada um deles, e mesclando o que eu achei de melhor.

Peguei o PSD do projeto 960.gs e incorporei no meu projeto no github.

Já venho usando a alguns meses, e o sistema de grid me atende bem. Faço sites de todos os tipos.

Sem sujar o html, posicionamento elementos corretamente(com floats e margins), sem uso de elementos desnecessários e com classes intuitivas.

Strudel Folhadinho

Este site de venda de strudels em são paulo, é o meu primeiro usando o column.gs até para fazer a base do responsivo.

Feito para FrontEnds

Se você tem um sistema grande, e precisa de um layout “pre moldado”, então eu indico usar o Twitter Bootstrap. Mas se você tb não gosta de posicionar elementos com padding(assim como o 960.gs), então o column.gs é ideal para você.

São classes simples como: “coluna-um-terço”, “columa-metade”, “coluna-dois-terços”..

E toda a mágica será feita. O poder deve ficar com o desenvolvedor, e não ser limitado pelo framework.

A pequena inversão de controle que existe aqui, é: “não declare larguras no teu css”. Deixe os widths a cargo do column.gs. Todos eles.

Boas práticas

-> Não estilize no css do teu projeto, as classes da grid. Elas devem aparecer unicamente no html, e no css da grid.

-> Ao usar 2 colunas(column-half), lembre-se de não usar espaçamentos. Mas deixar isso pelo ganho natural do float: left e float: right.

O mesmo vale para 3, 4 colunas e demais. Coloque como fright a última coluna da direita, e a na esquerda anterior a esta, não coloque margin.

Column.GS no github

Subi para o github para que você pudesse me ajudar. Abra issues, use.

Me diga oque vc acha. Faz o seu fork lá.

=) Comente aqui! envie seu pull request.