1. Grid Systems Marcelo Miranda Carneiro 20/03/2014 F.biz|COMPANYCONFIDENTIAL

2. O que ? a estrutura visual utilizada para organizar o contedo. Pode utilizar linhas retas, curvas, verticais, horizontais ou anguladas. 01F.biz|COMPANYCONFIDENTIAL 3. O que ? O conceito aplicado organizao do CSS ajuda a criar consistncia da estrutura do layout Se torna referncia na construo das pginas Organizao ajuda na construo de sites responsivos ou flexveis Velocidade no desenvolvimento, maior preciso e garante qualidade 02F.biz|COMPANYCONFIDENTIAL 4. F.biz|COMPANYCONFIDENTIAL 5. F.biz|COMPANYCONFIDENTIAL 6. F.biz|COMPANYCONFIDENTIAL 7. F.biz|COMPANYCONFIDENTIAL 8. F.biz|COMPANYCONFIDENTIAL 9. F.biz|COMPANYCONFIDENTIAL 10. F.biz|COMPANYCONFIDENTIAL 11. F.biz|COMPANYCONFIDENTIAL 12. F.biz|COMPANYCONFIDENTIAL 13. F.biz|COMPANYCONFIDENTIAL 14. F.biz|COMPANYCONFIDENTIAL 15. F.biz|COMPANYCONFIDENTIAL 16. Por que? A grande maioria das grids consideram implementaes limitadas ou no semnticas A realidade de uma agncia de publicidade , digamos bem peculiar: Muitas vezes o lay-out no bate com uma nica grid Faa apenas os clculos, no faa box-modelling 03F.biz|COMPANYCONFIDENTIAL 17. A Semantic Grid System foi construda com base nas nossas necessidades e realidade. F.biz|COMPANYCONFIDENTIAL 18. Anlise Os layouts de criao devem vir dentro de grids visuais Muitas vezes a grid no est claramente definida no PSD Anlise do layout em busca das estruturas principais Nestes casos muito comum definir mltiplas grids: Uma global para estrutura (N) definies baseadas em mdulos 04F.biz|COMPANYCONFIDENTIAL 19. F.biz|COMPANYCONFIDENTIAL 20. F.biz|COMPANYCONFIDENTIAL 21. F.biz|COMPANYCONFIDENTIAL 22. F.biz|COMPANYCONFIDENTIAL 23. Usando a Gridsystem F.biz|COMPANYCONFIDENTIAL 24. Registrando a Grid Antes de tudo necessrio registrar a grid: @includegs-register-grid( $label:"site-normal",//nomedagrid $width:960px,//tamanhomximo $column-num:10,//quantidadedecolunas $gutter:10px);//tamanhodogutter 01. 02. 03. 04. 05. 05F.biz|COMPANYCONFIDENTIAL 25. F.biz|COMPANYCONFIDENTIAL 26. Criando colunas Para captar o valor de uma coluna, utilize a funo: 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. F.biz|COMPANYCONFIDENTIAL 28. Utilizando gutters Para pegar o valor do gutter, utilize a funo: margin-left:gs-gutter(1,site-normal); com a vantagem de usar como for melhor para a situao: padding-left:gs-gutter(1,site-normal); 07F.biz|COMPANYCONFIDENTIAL 29. F.biz|COMPANYCONFIDENTIAL 30. Utilizando gutters Uma das vantagens deste modelo a liberdade para usar a grid apenas quando necessrio, com a tcnica que for mais eficaz para a situao. Exemplo a seguir com coluna fixa e fluda, utilizando tcnica mista. 08F.biz|COMPANYCONFIDENTIAL 31. F.biz|COMPANYCONFIDENTIAL 32. Criando listas Para facilitar o box modelling em listas, possvel usar o mixin: @includegs-row(auto,site-normal); ou passar um tamanho fixo de colunas: @includegs-row(6,site-normal); 09F.biz|COMPANYCONFIDENTIAL 33. F.biz|COMPANYCONFIDENTIAL 34. Forma no semntica Para gerar as classes baseadas na configurao da grid: @includegs-classes(site-normal,sn-); Gerar classes de acordo com as configuraes de site- normal com o prefixo sn-, resultando em: .sn-col-1,.sn-col-2....sn-col-10 10F.biz|COMPANYCONFIDENTIAL 35. Media Queries Para projetos que usam a chamada da media-query dentro do CSS, possvel 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. Nota sobre grids flexveis Grids flexveis (com valores em %) consideram o gutter como valor separado e no fazem parte do clculo das colunas O valor do gutter normalmente usado como padding de wrappers que desenham a estrutura da grid Isso se d por visualmente no fazer sentido gutters baseados em porcentagem 12F.biz|COMPANYCONFIDENTIAL 37. Bora usar grids em todos os projetos! F.biz|COMPANYCONFIDENTIAL 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. A WPP Company / thank you