Hyojun Guideline

529 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
529
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hyojun Guideline

  1. 1. Hyojun Guideline Marcelo Miranda Carneiro 04/04/2014 F.biz|COMPANYCONFIDENTIAL
  2. 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” 01F.biz|COMPANYCONFIDENTIAL
  3. 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 02F.biz|COMPANYCONFIDENTIAL
  4. 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 03F.biz|COMPANYCONFIDENTIAL
  5. 5. Atomic design F.biz|COMPANYCONFIDENTIAL
  6. 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 04F.biz|COMPANYCONFIDENTIAL
  7. 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” 05F.biz|COMPANYCONFIDENTIAL
  8. 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 06F.biz|COMPANYCONFIDENTIAL
  9. 9. Layouts F.biz|COMPANYCONFIDENTIAL
  10. 10. 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 07F.biz|COMPANYCONFIDENTIAL
  11. 11. Análise F.biz|COMPANYCONFIDENTIAL
  12. 12. 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 08F.biz|COMPANYCONFIDENTIAL
  13. 13. Grids F.biz|COMPANYCONFIDENTIAL
  14. 14. Módulos F.biz|COMPANYCONFIDENTIAL
  15. 15. Cores F.biz|COMPANYCONFIDENTIAL
  16. 16. Unidades F.biz|COMPANYCONFIDENTIAL
  17. 17. Como usar F.biz|COMPANYCONFIDENTIAL
  18. 18. Configuração inicial • Faça download do Hyojun.bootstrap em: bitbucket.org/fbiz/hyojun.bootstrap • Utilize o bower para baixar o Hyojun.Guideline: bowerinstall • Caso ache necessário, configure as cores base e as grids de acordo com o seu projeto 09F.biz|COMPANYCONFIDENTIAL
  19. 19. Configuração inicial Para sobrepor a grid padrão da guideline, customize em source/common/core/config/_grids.scss: $gl-do-override-grids:true; @mixingl-override-grids(){ @includegs-clear-grid-list(); @includegs-register-grid(gl-wide,960px,10,10px,auto); @includegs-register-grid(gl-normal,960px,10,10px,auto); @includegs-register-grid(gl-mobile,100%,4,10px,959px); } 01. 02. 03. 04. 05. 06. 07. 10F.biz|COMPANYCONFIDENTIAL
  20. 20. Configuração inicial Para sobrepor as cores da guideline, customize em source/common/core/config/_colors.scss: $gl-do-override-theme-colors:true; @mixingl-override-theme-colors{ $gl-theme-main-color:#808078; $gl-theme-neutral-color:#333; $gl-theme-highlight-color:#3A87AD; $gl-theme-code-color:#C7254E; } 01. 02. 03. 04. 05. 06. 07. 11F.biz|COMPANYCONFIDENTIAL
  21. 21. 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 glé necessária. Alguns casos específicos levam gl-e um prefixo, como gl-header, gl-legend, etc. 12F.biz|COMPANYCONFIDENTIAL
  22. 22. Elementos mais usados • Texto: h2.gl-header e h3.gl, p.gl • Holder para módulos: div.gl-example, div.gl-example-full • Código fonte: pre.gl>code • Notas no código: .gl-note-1, .gl-note-2 … • Listas: ul.gl, ol.gl • Mensagem importante: div.gl-callout 13F.biz|COMPANYCONFIDENTIAL
  23. 23. 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 14F.biz|COMPANYCONFIDENTIAL
  24. 24. 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) 15F.biz|COMPANYCONFIDENTIAL
  25. 25. Cores • A página lê todas as cores listadas no arquivo source/common/core/config/_colors.scsse 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 16F.biz|COMPANYCONFIDENTIAL
  26. 26. 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 17F.biz|COMPANYCONFIDENTIAL
  27. 27. 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 18F.biz|COMPANYCONFIDENTIAL
  28. 28. Como colaborar? F.biz|COMPANYCONFIDENTIAL
  29. 29. 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 19F.biz|COMPANYCONFIDENTIAL
  30. 30. 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. 20F.biz|COMPANYCONFIDENTIAL
  31. 31. Como colaborar? • Faça um fork, crie um branch e envie um pull request deste branch • Envie referências • Participe! 21F.biz|COMPANYCONFIDENTIAL
  32. 32. A WPP Company / thank you

×