Grid systems

546 visualizações

Publicada em

Apresentação sobre a utilização de grid systems na F.biz, focando no micr-framework de cálculos usados pela equipe.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
546
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Grid systems

  1. 1. Grid Systems Marcelo Miranda Carneiro 20/03/2014 F.biz|COMPANYCONFIDENTIAL
  2. 2. O que é? É a estrutura visual utilizada para organizar o conteúdo. Pode utilizar linhas retas, curvas, verticais, horizontais ou anguladas. 01F.biz|COMPANYCONFIDENTIAL
  3. 3. O que é? • O conceito aplicado à organização do CSS ajuda a criar consistência da estrutura do layout • Se torna referência na construção das páginas • Organização ajuda na construção de sites responsivos ou flexíveis • Velocidade no desenvolvimento, maior precisão e garante qualidade 02F.biz|COMPANYCONFIDENTIAL
  4. 4. F.biz|COMPANYCONFIDENTIAL
  5. 5. F.biz|COMPANYCONFIDENTIAL
  6. 6. F.biz|COMPANYCONFIDENTIAL
  7. 7. F.biz|COMPANYCONFIDENTIAL
  8. 8. F.biz|COMPANYCONFIDENTIAL
  9. 9. F.biz|COMPANYCONFIDENTIAL
  10. 10. F.biz|COMPANYCONFIDENTIAL
  11. 11. F.biz|COMPANYCONFIDENTIAL
  12. 12. F.biz|COMPANYCONFIDENTIAL
  13. 13. F.biz|COMPANYCONFIDENTIAL
  14. 14. F.biz|COMPANYCONFIDENTIAL
  15. 15. F.biz|COMPANYCONFIDENTIAL
  16. 16. Por que? • A grande maioria das grids consideram implementações limitadas ou não semânticas • A realidade de uma agência de publicidade é, digamos … bem peculiar: • Muitas vezes o lay-out não bate com uma única grid • Faça apenas os cálculos, não faça box-modelling 03F.biz|COMPANYCONFIDENTIAL
  17. 17. A Semantic Grid System foi construída com base nas nossas necessidades e realidade. F.biz|COMPANYCONFIDENTIAL
  18. 18. Análise • Os layouts de criação devem vir dentro de grids visuais • Muitas vezes a grid não está claramente definida no PSD • Análise do layout em busca das estruturas principais • Nestes casos é muito comum definir múltiplas grids: • Uma global para estrutura • (N) definições baseadas em módulos 04F.biz|COMPANYCONFIDENTIAL
  19. 19. F.biz|COMPANYCONFIDENTIAL
  20. 20. F.biz|COMPANYCONFIDENTIAL
  21. 21. F.biz|COMPANYCONFIDENTIAL
  22. 22. F.biz|COMPANYCONFIDENTIAL
  23. 23. Usando a Gridsystem F.biz|COMPANYCONFIDENTIAL
  24. 24. Registrando a Grid Antes de tudo é necessário registrar a grid: @includegs-register-grid( $label:"site-normal",//nomedagrid $width:960px,//tamanhomáximo $column-num:10,//quantidadedecolunas $gutter:10px);//tamanhodogutter 01. 02. 03. 04. 05. 05F.biz|COMPANYCONFIDENTIAL
  25. 25. F.biz|COMPANYCONFIDENTIAL
  26. 26. Criando colunas Para captar o valor de uma coluna, utilize a função: width:gs-column(1,site-normal); O valor “all” pode ser usado para indicar “todas as colunas: width:gs-column(all,site-normal); 06F.biz|COMPANYCONFIDENTIAL
  27. 27. F.biz|COMPANYCONFIDENTIAL
  28. 28. Utilizando gutters Para pegar o valor do gutter, utilize a função: margin-left:gs-gutter(1,site-normal); com a vantagem de usar como for melhor para a situação: padding-left:gs-gutter(1,site-normal); 07F.biz|COMPANYCONFIDENTIAL
  29. 29. F.biz|COMPANYCONFIDENTIAL
  30. 30. Utilizando gutters • Uma das vantagens deste modelo é a liberdade para usar a grid apenas quando necessário, com a técnica que for mais eficaz para a situação. • Exemplo a seguir com coluna fixa e fluída, utilizando técnica mista. 08F.biz|COMPANYCONFIDENTIAL
  31. 31. F.biz|COMPANYCONFIDENTIAL
  32. 32. Criando listas Para facilitar o box modelling em listas, é possível usar o mixin: @includegs-row(auto,site-normal); ou passar um tamanho fixo de colunas: @includegs-row(6,site-normal); 09F.biz|COMPANYCONFIDENTIAL
  33. 33. F.biz|COMPANYCONFIDENTIAL
  34. 34. Forma “não semântica” Para gerar as classes baseadas na configuração da grid: @includegs-classes(site-normal,sn-); Gerará classes de acordo com as configurações de “site- normal” com o prefixo “sn-“, resultando em: .sn-col-1,.sn-col-2....sn-col-10 10F.biz|COMPANYCONFIDENTIAL
  35. 35. Media Queries Para projetos que usam a chamada da media-query dentro do CSS, é possível utilizar o mixin: @includegs-media-query($grid:site-normal){...} Desde que um breakpoint tenha sido definido: @includegs-register-grid(...$breakpoint:959px); 11F.biz|COMPANYCONFIDENTIAL
  36. 36. Nota sobre grids flexíveis • Grids flexíveis (com valores em %) consideram o gutter como valor separado e não fazem parte do cálculo das colunas • O valor do gutter normalmente é usado como padding de wrappers que desenham a estrutura da grid • Isso se dá por visualmente não fazer sentido gutters baseados em porcentagem 12F.biz|COMPANYCONFIDENTIAL
  37. 37. Bora usar grids em todos os projetos! F.biz|COMPANYCONFIDENTIAL
  38. 38. Onde está? Clone ou adicione via bower no seu projeto: https://github.com/mcarneiro/gs/ gitclonehttps://github.com/mcarneiro/gs.git ou bowerinstallgs--save-dev 13F.biz|COMPANYCONFIDENTIAL
  39. 39. A WPP Company / thank you

×