Este documento descreve uma metodologia chamada Hyojun Guideline para desenvolvimento de projetos front-end de forma modular. A guideline define padrões visuais e de construção para módulos reutilizáveis, além de documentar layouts, cores e outras especificações do projeto.

1. Hyojun Guideline
Marcelo Miranda Carneiro
04/04/2014
F.biz|COMPANYCONFIDENTIAL

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. 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. 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. Atomic design
F.biz|COMPANYCONFIDENTIAL

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. 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. 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

12. Layouts
F.biz|COMPANYCONFIDENTIAL

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
07F.biz|COMPANYCONFIDENTIAL

16. Análise
F.biz|COMPANYCONFIDENTIAL

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
08F.biz|COMPANYCONFIDENTIAL

18. Grids
F.biz|COMPANYCONFIDENTIAL

24. Módulos
F.biz|COMPANYCONFIDENTIAL

29. Cores
F.biz|COMPANYCONFIDENTIAL

33. Unidades
F.biz|COMPANYCONFIDENTIAL

38. Como usar
F.biz|COMPANYCONFIDENTIAL

39. 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

40. 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

41. 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

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 glé
necessária. Alguns casos específicos levam gl-e
um prefixo, como gl-header, gl-legend, etc.
12F.biz|COMPANYCONFIDENTIAL

43. 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

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
14F.biz|COMPANYCONFIDENTIAL

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)
15F.biz|COMPANYCONFIDENTIAL

49. 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

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
17F.biz|COMPANYCONFIDENTIAL

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
18F.biz|COMPANYCONFIDENTIAL

59. Como colaborar?
F.biz|COMPANYCONFIDENTIAL

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
19F.biz|COMPANYCONFIDENTIAL

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.
20F.biz|COMPANYCONFIDENTIAL

62. Como colaborar?
• Faça um fork, crie um branch e envie um pull request
deste branch
• Envie referências
• Participe!
21F.biz|COMPANYCONFIDENTIAL

63. A WPP Company
/ thank you