2

Estou começando agora há pesquisar por esses "definidores de layout css", e os que eu mais ouço falar é: 960 Grid System (http://960.gs/) e twitter bootstrap (http://getbootstrap.com/css/). Gostaria de saber, em que situação um é mais adequado que o outro?

Eu cheguei a utilizar o Grid System em projeto que eu fiz.

1 Resposta 1

3

Vamos lá, primeiramente o que seria um Grid?

Um grid é uma malha composta essencialmente por linhas guias, colunas e margens. Esta rede serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout. A intenção do grid é facilitar a diagramação de grandes quantidades de informação e guiar o olhar do leitor.

Por que utilizar um Grid?

São muitas as vantagens na criação baseada em grids. Organizar informações é a principal função, mas podemos citar orientação da atenção do leitor através de focos visuais, simplificação do processo de criação, estruturação de hierarquia e agilidade de produção como outros benefícios. Grids aumentam a precisão de um layout e são ótimas ferramentas para criar dinamismo.

Referência: http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/

Sobre o 960 Grid System:

Diversas pessoas usam e aprovam o sistema porém ele está ultrapassado já que foi desenvolvido em um período onde a resolução mais popular era 1024x768px.

Outro ponto é que ele é limitado a simplesmente 960 pixels, ou seja, se você for trabalhar com larguras maiores você terá que praticamente refazer o grid, pois não é tão simples ajustar as larguras das colunas e margens.

O maior problema (em meu ponto de vista) é a semântica. Se você é preocupado com semântica e padrões web, inserir classes como container_12 ou grid_7 prefix_1 em seu código é algo que o polui e não é nada semântico.

Exemplo retirado do próprio site (http://960.gs/):

<div class="container_12">
  <div class="grid_7 prefix_1">
    <div class="grid_2 alpha">
      ...
    </div>
    <div class="grid_3">
      ...
    </div>

    <div class="grid_2 omega">
      ...
    </div>
  </div>
  <div class="grid_3 suffix_1">
  ...
  </div>
</div>

E como você pode notar ao entrar no site o aviso:

If you want a responsive grid framework, check out Unsemantic.com

Ou seja, ele não é um grid fluído e nem responsivo. O 960gs recomenda o Unsemantic mas é outro sistema de grid que carrega os mesmo problemas do 960gs.

Sobre o bootstrap:

É um sistema de GRID incrível que permite trabalhar com as resoluções mais atuais.

Ele não tem a mesma limitação do 960gs e você pode trabalhar com larguras maiores utilizando suas classes XS SM MD LG, ele é fluído e pensado para mobile first.

Mas possui o mesmo problema do anterior. Ele é completamente baseado em classes e muitas delas nada semânticas o que pode acontecer de ficar assim col-md-xs-lg-motherfucker.

Outro ponto negativo é todas aplicações que usam o bootstrap acabam tendo a mesma identidade, isso faz com que você não se destaque no meio de várias interfaces praticamente iguais.

Conclusão:

Acho que o bootstrap é o mais adequado já que o 960gs tem bem mais limitações e o bootstrap atende bem ao inicio já que ele foi criado para ser um framework de inicialização.E le faz esse trabalho muito bem, mas ele não foi criado para ser a base de interfaces customizáveis.

O que recomendo realmente é que você siga as boas práticas (variáveis, módulos e estrutura de arquivos) que esses frameworks trazem e construir o seu próprio framework se for necessário.

Mas o que eu acho é que você deve buscar alternativas mais semânticas já que não se faz necessário o uso de classes e não será necessário "sujar" o seu código, e os Grids semânticos fazem isso muito bem pois eles utilizam pré-processadores SASS, LESS, Stylus que calculam matematicamente o valor das colunas em pixels e transformam estes valores em porcentagens. Ou seja, através de mixins e variáveis eles definem através do próprio CSS a largura dos elementos.

Um exemplo seria o Semantic GS onde você define a largura da coluna, a margem e o número de colunas e o pré-processador gera o código com as devidas larguras, sem a necessidade de se utilizar classes.

Uma alternativa é o Jeet GS que é o melhor grid na minha opinião pois, você pode trabalhar com medidas como 1/3 (1 terço) ou 2/3 (2 terços) da largura do site e tem muitos utilitários que facilitam o desenvolvimento e ambos Jeet e Semantic são fluídos e responsivos.

Agora basta escolher o que mais se adequar a sua necessidade.

1
  • Muito obrigado pela resposta e pelas sugestões. Serão de muita utilidade. Commented 20/02/2015 às 16:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .