Grid Systems

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

Transcript

1. Grid Systems Marcelo Miranda Carneiro 20/03/2014 F.biz | COMPANY CONFIDENTIAL
2. O que é? É a estrutura visual utilizada para organizar o conteúdo. Pode utilizar linhas retas, curvas, verticais, horizontais ou anguladas. 01 F.biz | COMPANY CONFIDENTIAL
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 02 F.biz | COMPANY CONFIDENTIAL
4. F.biz | COMPANY CONFIDENTIAL
5. F.biz | COMPANY CONFIDENTIAL
6. F.biz | COMPANY CONFIDENTIAL
7. F.biz | COMPANY CONFIDENTIAL
8. F.biz | COMPANY CONFIDENTIAL
9. F.biz | COMPANY CONFIDENTIAL
10. F.biz | COMPANY CONFIDENTIAL
11. F.biz | COMPANY CONFIDENTIAL
12. F.biz | COMPANY CONFIDENTIAL
13. F.biz | COMPANY CONFIDENTIAL
14. F.biz | COMPANY CONFIDENTIAL
15. F.biz | COMPANY CONFIDENTIAL
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 03 F.biz | COMPANY CONFIDENTIAL
17. A Semantic Grid System foi construída com base nas nossas necessidades e realidade. F.biz | COMPANY CONFIDENTIAL
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 04 F.biz | COMPANY CONFIDENTIAL
19. F.biz | COMPANY CONFIDENTIAL
20. F.biz | COMPANY CONFIDENTIAL
21. F.biz | COMPANY CONFIDENTIAL
22. F.biz | COMPANY CONFIDENTIAL
23. Usando a Gridsystem F.biz | COMPANY CONFIDENTIAL
24. Registrando a Grid Antes de tudo é necessário registrar a grid: @ i n c l u d e g s - r e g i s t e r - g r i d ( $ l a b e l : " s i t e - n o r m a l " , / / n o m e d a g r i d $ w i d t h : 9 6 0 p x , / / t a m a n h o m á x i m o $ c o l u m n - n u m : 1 0 , / / q u a n t i d a d e d e c o l u n a s $ g u t t e r : 1 0 p x ) ; / / t a m a n h o d o g u t t e r 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 05 F.biz | COMPANY CONFIDENTIAL
25. F.biz | COMPANY CONFIDENTIAL
26. Criando colunas Para captar o valor de uma coluna, utilize a função: w i d t h : g s - c o l u m n ( 1 , s i t e - n o r m a l ) ; O valor “all” pode ser usado para indicar “todas as colunas: w i d t h : g s - c o l u m n ( a l l , s i t e - n o r m a l ) ; 06 F.biz | COMPANY CONFIDENTIAL
27. F.biz | COMPANY CONFIDENTIAL
28. Utilizando gutters Para pegar o valor do gutter, utilize a função: m a r g i n - l e f t : g s - g u t t e r ( 1 , s i t e - n o r m a l ) ; com a vantagem de usar como for melhor para a situação: p a d d i n g - l e f t : g s - g u t t e r ( 1 , s i t e - n o r m a l ) ; 07 F.biz | COMPANY CONFIDENTIAL
29. F.biz | COMPANY CONFIDENTIAL
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. 08 F.biz | COMPANY CONFIDENTIAL
31. F.biz | COMPANY CONFIDENTIAL
32. Criando listas Para facilitar o box modelling em listas, é possível usar o mixin: @ i n c l u d e g s - r o w ( a u t o , s i t e - n o r m a l ) ; ou passar um tamanho fixo de colunas: @ i n c l u d e g s - r o w ( 6 , s i t e - n o r m a l ) ; 09 F.biz | COMPANY CONFIDENTIAL
33. F.biz | COMPANY CONFIDENTIAL
34. Forma “não semântica” Para gerar as classes baseadas na configuração da grid: @ i n c l u d e g s - c l a s s e s ( s i t e - n o r m a l , s n - ) ; Gerará classes de acordo com as configurações de “site- normal” com o prefixo “sn-“, resultando em: . s n - c o l - 1 , . s n - c o l - 2 . . . . s n - c o l - 1 0 10 F.biz | COMPANY CONFIDENTIAL
35. Media Queries Para projetos que usam a chamada da media-query dentro do CSS, é possível utilizar o mixin: @ i n c l u d e g s - m e d i a - q u e r y ( $ g r i d : s i t e - n o r m a l ) { . . . } Desde que um breakpoint tenha sido definido: @ i n c l u d e g s - r e g i s t e r - g r i d ( . . . $ b r e a k p o i n t : 9 5 9 p x ) ; 11 F.biz | COMPANY CONFIDENTIAL
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 12 F.biz | COMPANY CONFIDENTIAL
37. Bora usar grids em todos os projetos! F.biz | COMPANY CONFIDENTIAL
38. Onde está? Clone ou adicione via bower no seu projeto: https://github.com/mcarneiro/gs/ g i t c l o n e h t t p s : / / g i t h u b . c o m / m c a r n e i r o / g s . g i t ou b o w e r i n s t a l l g s - - s a v e - d e v 13 F.biz | COMPANY CONFIDENTIAL
39. A WPP Company / thank you