Hyojun Guideline

Conceitos e aplicações da Hyojun.guideline, utilizada nos projetos da equipe de tecnologia F.biz

Transcript

1. Hyojun Guideline Marcelo Miranda Carneiro 04/04/2014 F.biz | COMPANY CONFIDENTIAL
2. O que é? • Metodologia de trabalho • Site com todos os módulos e páginas mock-up do projeto • Documento com explicações de funcionamento ou construção, variações e estados dos módulos • O “ambiente de trabalho do front-end” 01 F.biz | COMPANY CONFIDENTIAL
3. Por que usar? • Incentiva análise mais detalhada do projeto • Melhora qualidade, flexibilidade e manutenção do código • Cria legado, pois ajuda designers e desenvolvedores em novas implementações • Testes dos módulos são mais fáceis • Páginas mock-up ajudam a trabalhar com variações em páginas dinâmicas 02 F.biz | COMPANY CONFIDENTIAL
4. Conceitos principais • Construção modular ou o bom e velho “Atomic design” • Comportamento visual do módulo por escopo • Módulos primeiro, páginas por último / o trabalho começa pela guideline • “Menos é mais” — descrição apenas do que é necessário • Testes ocorrem na guideline 03 F.biz | COMPANY CONFIDENTIAL
5. Atomic design F.biz | COMPANY CONFIDENTIAL
6. Atomic design Objetivos principais no desenvolvimento modular: • Análise dos elementos e do projeto como um todo • Abstração • Flexibilidade • Melhor manutenção e qualidade do código 04 F.biz | COMPANY CONFIDENTIAL
7. Atomic design Tudo é módulo, alguns com nível mais baixo ou alto. Roubando a explicação do Brad Frost sobre Atomic Design, metáfora organizada em: • átomos - nível mais baixo do módulo, maior abstração • moléculas - nível intermediário, pequenos módulos • organismos - agrupamento ou “componentes” standalone • templates - layouts ou “páginas” 05 F.biz | COMPANY CONFIDENTIAL
8. Atomic design Exemplos de cada “nível”: • átomo - título, texto, botão, link • molécula - input + label + botão, paginação, breadcrumb • organismo - header, footer, galeria de foto • template - estrutura de diagramação 06 F.biz | COMPANY CONFIDENTIAL
12. Layouts F.biz | COMPANY CONFIDENTIAL
13. Layouts • Layouts ou templates contém as regras de diagramação de uma página do projeto • Espaços definidos no template podem ser consideradas como “escopos” para comportamento visual de um módulo, ex.: width, margin, float, position, etc. • No final, módulos são apenas “inseridos” nestes espaços • Normalmente temos um template por área do projeto 07 F.biz | COMPANY CONFIDENTIAL
16. Análise F.biz | COMPANY CONFIDENTIAL
17. Análise Análise de exemplo com a home de netshoes.com.br: • Identificação da grid • Identificação dos módulos • Definição de cores • Definição de unidades e espaçamentos 08 F.biz | COMPANY CONFIDENTIAL
18. Grids F.biz | COMPANY CONFIDENTIAL
24. Módulos F.biz | COMPANY CONFIDENTIAL
29. Cores F.biz | COMPANY CONFIDENTIAL
33. Unidades F.biz | COMPANY CONFIDENTIAL
38. Como usar F.biz | COMPANY CONFIDENTIAL
39. Configuração inicial • Faça download do Hyojun.bootstrap em: bitbucket.org/fbiz/hyojun.bootstrap • Utilize o bower para baixar o Hyojun.Guideline: b o w e r i n s t a l l • Caso ache necessário, configure as cores base e as grids de acordo com o seu projeto 09 F.biz | COMPANY CONFIDENTIAL
40. Configuração inicial Para sobrepor a grid padrão da guideline, customize em s o u r c e / c o m m o n / c o r e / c o n f i g / _ g r i d s . s c s s: $ g l - d o - o v e r r i d e - g r i d s : t r u e ; @ m i x i n g l - o v e r r i d e - g r i d s ( ) { @ i n c l u d e g s - c l e a r - g r i d - l i s t ( ) ; @ i n c l u d e g s - r e g i s t e r - g r i d ( g l - w i d e , 9 6 0 p x , 1 0 , 1 0 p x , a u t o ) ; @ i n c l u d e g s - r e g i s t e r - g r i d ( g l - n o r m a l , 9 6 0 p x , 1 0 , 1 0 p x , a u t o ) ; @ i n c l u d e g s - r e g i s t e r - g r i d ( g l - m o b i l e , 1 0 0 % , 4 , 1 0 p x , 9 5 9 p x ) ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 10 F.biz | COMPANY CONFIDENTIAL
41. Configuração inicial Para sobrepor as cores da guideline, customize em s o u r c e / c o m m o n / c o r e / c o n f i g / _ c o l o r s . s c s s: $ g l - d o - o v e r r i d e - t h e m e - c o l o r s : t r u e ; @ m i x i n g l - o v e r r i d e - t h e m e - c o l o r s { $ g l - t h e m e - m a i n - c o l o r : # 8 0 8 0 7 8 ; $ g l - t h e m e - n e u t r a l - c o l o r : # 3 3 3 ; $ g l - t h e m e - h i g h l i g h t - c o l o r : # 3 A 8 7 A D ; $ g l - t h e m e - c o d e - c o l o r : # C 7 2 5 4 E ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 11 F.biz | COMPANY CONFIDENTIAL
42. Elementos da guideline • O CSS da guideline é standalone para evitar que influencie os estilos do projeto • Todos os elementos que fazem parte do Hyojun.Guideline recebem classes • Na maioria dos casos, apenas a classe g l é necessária. Alguns casos específicos levam g l - e um prefixo, como g l - h e a d e r, g l - l e g e n d, etc. 12 F.biz | COMPANY CONFIDENTIAL
43. Elementos mais usados • Texto: h 2 . g l - h e a d e r e h 3 . g l, p . g l • Holder para módulos: d i v . g l - e x a m p l e, d i v . g l - e x a m p l e - f u l l • Código fonte: p r e . g l > c o d e • Notas no código: . g l - n o t e - 1, . g l - n o t e - 2 … • Listas: u l . g l, o l . g l • Mensagem importante: d i v . g l - c a l l o u t 13 F.biz | COMPANY CONFIDENTIAL
44. Organização Existem algumas áreas com elementos pré-definidos na guideline: • Tipografia - com famílias, tamanhos e pesos • Cores - com a listagem de cores • Grids - com a listagem de grids • Forms - com elementos de formulário • Módulos - com espaçamentos, z-index 14 F.biz | COMPANY CONFIDENTIAL
45. Tipografia Os elementos padrões da página de tipografia utilizam HTML Helpers para serem escritos mais facilmente: • Família tipográfica com todos os glyphs utilizados • Lista de ícones • Lista de tamanhos de fontes • Lista de pesos (normalização dos valores) 15 F.biz | COMPANY CONFIDENTIAL
49. Cores • A página lê todas as cores listadas no arquivo s o u r c e / c o m m o n / c o r e / c o n f i g / _ c o l o r s . s c s s e lista em forma de paleta • Para evitar duplicadas ou valores desnecessários, existe uma ferramenta para comparar as cores • Para criar uma cor nova, utilize a mesma ferramenta • Todas as cores são criadas com valores relativos 16 F.biz | COMPANY CONFIDENTIAL
52. Grids e Forms • Todas as grids listadas nesta página são inseridas utilizando HTML Helper • Como a maioria dos projetos podem ter formulários, já existe uma página feita com texto explicativo e os elementos montados, sendo necessário apenas estilizar • A página de forms pode ser apagada, alterada ou complementada, existe apenas como uma referência 17 F.biz | COMPANY CONFIDENTIAL
56. Módulos • Lista de espaçamentos • Lista de z-index • Todos os módulos globais do projeto • Módulos específicos podem ser categorizados e separados em outras páginas 18 F.biz | COMPANY CONFIDENTIAL
59. Como colaborar? F.biz | COMPANY CONFIDENTIAL
60. Como colaborar? • O projeto Hyojun.guideline está hospedado em: bitbucket.org/fbiz/hyojun.guideline • A página de exemplo está em: fbiz.bitbucket.org/hyojun.guideline 19 F.biz | COMPANY CONFIDENTIAL
61. Como colaborar? Formas de ajudar com o projeto: • Identifique e sinalize problemas • Abra issues com bugs, idéias de melhorias, etc. • Leia, revise e ajude com a documentação • Dê um watch no Bitbucket e discuta sobre os novos recursos, funcionalidades, organização, layout, etc. 20 F.biz | COMPANY CONFIDENTIAL
62. Como colaborar? • Faça um fork, crie um branch e envie um pull request deste branch • Envie referências • Participe! 21 F.biz | COMPANY CONFIDENTIAL
63. A WPP Company / thank you