Meu sistema de grade – turno sam
Postado em
Há muitas pessoas usando sistemas de grade CSS responsivos hoje em dia. O Bootstrap do Twitter e o sistema de grade 960 do Nathan Smith são dois realmente populares.
Eu nunca fui realmente fã de sistemas de grade. Ter toneladas de divs com classes que correspondem ao layout em todo o lugar parece errado e faz com que seu código pareça feio. De qualquer forma, tenho uma maneira realmente básica de fazer coisas que acho que é tecnicamente um sistema de grade, mas não gosto de pensar nisso.
Aqui está o layout básico:
Tudo tem 640px de largura. (Observe, sempre que eu referência 1px (um pixel), estou me referindo a como o CSS lida com pixels. Em um dispositivo retina, 1px no CSS é na verdade 2px na tela.) Nada é mais largo que 640px de todos os tempos. Isso faz com que o suporte à área de trabalho e do iPad funcione sem modificações. Tanto quanto possível, está em uma coluna e o conteúdo é flexível. Às vezes, a melhor maneira de estabelecer algo são as colunas. Nunca há mais de 2 colunas. Eles têm sempre 300px de largura (com uma calha de 40 px).
Escolher 300px é fundamental. A calha de 40px é agradável e oferece muito espaço, mas o principal motivo é que 300px funciona no iPhone com modificações zero. Aqui está a versão para iPhone da “grade”:
Isso torna muito fácil ser responsivo. Simplesmente faço as colunas empilhadas em vez de flutuar um ao lado do outro.
Eu realmente gosto de ter apenas 2 estados da grade. É um ao lado do outro ou empilhado. Isso torna o desenvolvimento e o teste em dispositivos são muito mais rápidos. Também acho as restrições bastante boas ao projetar.
Este é o sistema de grade que eu uso no Cheddar, na página de projetos e literalmente tudo o mais que faço. Nem todos eles usam colunas, mas tudo é 640px.
Eu pensei em fornecer o abre, mas há tão pouco código que quase parece bobo. Talvez uma vez que o Cheddar seja lançado, eu montarei algo e o jogarei no Github.
