em
CSS Grids

Guia definitivo – Comparação de Grids em CSS

Neste post quero convidá-lo a pensar um pouco sobre as GRIDs css atuais.

Para quem não conhece o conceito ou nunca usou uma, a proposta é: pensar desde o wireframe, desenhar o layout e chegando na implementação frontend em divisões de um mesmo múltiplo.

Assim, o site ou sistema web que iremos desenvolver, terá padronização de espaçamentos, tamanhos de blocos, apenas utilizando regras css pré definidas, agilizando o desenvolvimento e facilitando a manutenção, mágico não ?

grid

Hoje em dia, existem diversos sistemas de grid no mercado. Tanto aqueles que já vem incorporados dentro de frameworks como Bootstrap ou Foundation, ou projetos específicos, apenas para sistema de grid, como o Gridiculous, 960.gs ou o SemanticGS (não confunda com o Semantic UI que é um outro projeto diferente).

Eu testei mais de 10 sistemas de grids diferentes. Fiz um mesmo layout, e coloquei neste projeto no git: Comparação Grids by wbruno, vamos então às conclusões que cheguei:

Escolha um ou crie o seu

O conceito não é complicado, e sempre terão algumas coisas nesse ou naquele que irão te agradar, ou te farão não querer usar tal grid.

O reset css

A maioria deles já vem com um tipo de reset ou normalize css embutido. E esse foi um dos pontos que mais me atrapalhou ao tentar deixar todos os layouts iguais (não consegui) independente do Grid System que usei.

Grids semânticos

Chamam-se semânticos aqueles que não sujam o html, colocando classes de estrutura nas tags. Coisas como:

.fleft { float: left; }
.column-half { width: 460px; }

São abominados pelos que usam esse conceito.

Geralmente, usam algum pré-processador para “extender” os poderes do html, e sem tocar no html, e nem se preocupar com o css final gerado. Usando o semantic em less, o meu css ficou assim:

.content-eye {
    .column(4);
}
.box-text {
    .column(6);
}

E depois o que o browser executa é:

.content-eye {
   display: inline;
   float: left;
   width: 300px;
   margin: 0 10px;
}
.box-text {
   display: inline;
   float: left;
   width: 460px;
   margin: 0 10px;
}

Hum.. ninguém faz css na mão dessa forma, ne?!

Grids com pré-processadores

Usei nesse experimento 1 grid com LESS e outro com SAAS. O JeetFW que ainda não cheguei a testar, tem uma proposta um pouco diferente, e vi algumas pessoas usando um fork dele, tentando corrigir esse tipo de duplicação de css, usando extends do pré-processador e tudo mais.

Aqui sempre cabe observar qual pré-processador sua equipe já usa, e ai sim procurar um grid que use o mesmo.

Grids engessados

Frameworks como Bootstrap e Foundation, possuem uma grande adoção nos dias de hoje. Eu vejo esse tipo de fw perfeito para sistemas, mas não usaria para fazer um site de pequeno porte, ou um site institucional, onde a otimização e o tempo de carregamento fossem pontos cruciais do projeto.

Não estou dizendo que eles são pesados, mas sim, que como qualquer FW, estes possuem muito mais ferramentas do que eu usaria em um site, e mesmo customizando retirando as partes desnecessárias, ainda ficaria pesado ao comparar com outras opções que vão mais direto ao ponto, ou que sanam exatamente o tipo de necessidade que temos para tal site.

Além disso, conversei com alguns colegas desenvolvedores, e esse tipo de grid não foi pensado para hotsites com layouts “não tão quadrados” quanto um sistema, por exemplo. É nisso que digo, que eles são “engessados”, pois mesmo isolando o grid system, não é possível reproduzir de forma fácil certas coisas, já que a inversão de controle do framework, te obriga a trabalhar de uma forma diferente.

Grids com conceitos de linha

Alguns dos grids que testei como o Gumby e o Bootstrap, possuem uma classe .row. Eu pessoalmente acho muito estranho pensar em linhas com colunas, me faz voltar ao pensamento de <table>, quando na verdade, tudo o que queremos é posicionar elementos com larguras, e não fazer uma tabela com divs.

Ok, sei o motivo deles usarem esse tipo de artimanha, mas não é tão natural assim desenvolver um site pensando nos encaixes horizontais.

E a classe row ainda possui um display: table; para cuidar dos efeitos colaterais dos floats dentro do container row. O que me incomoda nisso, é que aparentemente, esses sistemas de grids não foram projetados para serem usados por Desenvolvedores FrontEnds. Sabemos como resolver o esvaziamento do container, e as vezes nem precisamos, pois o layout mesmo já dá conta de fazer isso, sem a criação dessas linhas.

Grids que absorveram o conceito de colunas

O grid do PureCSS, é bem fácil de usar. Se eu quiser 3 colunas, cada uma terá a classe: .pure-u-1-3, ou seja, 1 coluna de 3. Se eu quiser 2 nessa linha, serão dois elementos com .pure-u-1-2.

Um pouco mais simples do que o 960gs faz, que é contar a quantidade de partes de doze que queremos. Para 2 colunas iguais, as classes no 960gs são: grid_6.

Ainda nessa linha, eu criei um proprietário, o ColumnGS. Ele é independente da quantidade de colunas do container (12, 16, 24), e ainda me permite por exemplo, fazer 5 colunas, que apesar de não ser um número divisível por 12, pode ser sim uma necessidade da área de criação.

Ai as classes são: .column-third, .column-half, .column-fifth. Mas aqui, a preocupação de “sujar o html”, não existe. Por mais que digam que “grid é estilização e deve ficar inteira e completamente no css”, trabalhar com classes modulares no estilo OO CSS, possui ganhos de performance e tempo de desenvolvimento.

Qual é mais rápido ?

Impossível responder essa pergunta, assim como eu não consigo dizer qual deles é mais enxuto. Apenas medir o css gerado minimizado, não me pareceu suficiente para justificar se um é ou não melhor que outro, apenas por ter e resultar em menos linhas de css.

É questão de estilo

Eu tenho certeza de que existem ainda outros diversos grids que não testei, assim como aqueles que vocês mesmos podem ter criado.

O maior objetivo deste post, foi abrir a mente. Experimente grids novas, forme a sua própria opinião a respeito, e respeite a decisão dos outros ao adotar este ou aquele. Para mim, o mais importante é saber CSS e HTML tão bem, que você consiga trabalhar com qualquer sistema de grid que o encaixe melhor no projeto, ou que a equipe esteja utilizando no momento.

Comentários

  1. No caso acima, vc disse que os grids como Bootstrap e Foundation são um pouco “engessados”. Para o caso de sites institucionais, na qual se necessita de menos recursos, qual o framework que vc recomenda?

    por Samuel — Responder
    1. Oi Samuel, para sites institucionais eu não recomendo nenhum FrameWork.

      Mas sim, um sistema de grid simples, no caso o Skeleton é super fácil de usar, ou o que eu desenvolvi, o ColumnGS.

      por William Bruno Responder
      1. Oi Willian,

        tem site ou está no github a tua grid?

        Mateus

        por Mateus Avila Isidoro
      2. Oi Matheus,

        É este aqui:
        https://github.com/wbruno/column.gs

        Estou melhorando o gh-pages dele com documentação e tal. Mas é bem simples de usar.

        por William Bruno
  2. Fala Bruno, show de bola o post, parabéns.
    Vou desenvolver uma também para usar em meus projetos, acho bacana isso de criar um guia de estilo.

    por Palmer — Responder
  3. cara realmente eu to começando a estudar o bootstrap do twitter.. muito bom escrito em less… da pra fazer muita coisa … pegar muita coisa pronta e alterar bem rápido … eu acho que se tem muito a ganhar usando um framework … ainda mais se tipo tu programar em laravel .. ou yii ou rubyonrails… dai tu faz coisas muito rapido e tudo no template… e tem o html5bolerplate .. ja usasse ?

    por vini Responder
    1. Oi Vini,

      O html5boilerplate não possui um sistema de grid. No initializr ele usa o bootstrap.
      Acompanhei algumas versões dele, mas o intuito é diferente do que expus nesse post.

      por William Bruno Responder
  4. Muito bom o post.

    Particularmente, não gosto de pré-processadores então já descarto certos grids. Ultimamente o que mais tem me agradado é o Skeleton, então faço uso dele com algumas alterações de acordo com o projeto. Tem me atendido muito bem :)

    por Jucilaine Nogueira Responder
  5. Estou desenvolvendo meu próprio Framework Front-End :)

    https://github.com/gustavokuklinski/Scrath2

    por Gustavo Kuklinski Responder
  6. Legal seu post. Uso mto o foundation da zurb e gosto mto e como vc msmo disse, acho que é preciso analisar o projeto e fica por responsabilidade do front-end saber qual é o melhor fw para determinado projeto. As vezes nem precisa de nenhum :)

    por Joao Paulo Fricks — Responder
  7. Eu tenho um amigo que diz que ele fez um sistema de grid espetacular que funciona com qualquer layout que o designer enviar e é responsivo e fácil de usar. E o mais louco, não está sujeito a 12, 15, 17 colunas. Ele trabalhar com a largura mínima de 1px. ;)

    por Michael Responder
  8. Pingback: Sistemas de GRIDs CSS – Será que não estamos fazendo errado ?

  9. Excelente! Muito bom, parabéns!

    Pensar que todo artigo da web pudesse ir por essa linha de qualidade é quase uma utopia.

    Abs.

    por Flávio Micheletti Responder
  10. Muito legal o post… Eu uso um que se chama Stab. Ele é totalmente responsivo e atendeu bem as minhas necessidades. Se alguem quiser experimentar:

    http://www.stab.caiokawasaki.com

    por Pedro Correa — Responder
  11. Pingback: Quem é você ?

  12. Cara… a pergunta é simples. Pode me dar uma resposta simples também??????????????

    Quero saber qual é a melhor cor de fundo. fundo de tela e fonte.

    Não quero um texto explicativo sobre o assunto! Pode ser prático????????

    Agradeço

    Margarete

    por Margarete — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>