Download - Hyojun Guideline
O que é?• Metodologia de trabalho
• Site com todos os módulos e páginas mock-up do projeto
• Documento com explicações de funcionamento ouconstrução, variações e estados dos módulos
• O “ambiente de trabalho do front-end”
01F.biz | COMPANY CONFIDENTIAL
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 emnovas implementações
• Testes dos módulos são mais fáceis
• Páginas mock-up ajudam a trabalhar com variações empáginas dinâmicas
02F.biz | COMPANY CONFIDENTIAL
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çapela guideline
• “Menos é mais” — descrição apenas do que é necessário
• Testes ocorrem na guideline
03F.biz | COMPANY CONFIDENTIAL
Atomic designObjetivos 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 | COMPANY CONFIDENTIAL
Atomic designTudo é módulo, alguns com nível mais baixo ou alto.Roubando a explicação do Brad Frost sobre AtomicDesign, 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 | COMPANY CONFIDENTIAL
Atomic designExemplos 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 | COMPANY CONFIDENTIAL
Layouts• Layouts ou templates contém as regras de diagramação
de uma página do projeto
• Espaços definidos no template podem ser consideradascomo “escopos” para comportamento visual de ummó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 | COMPANY CONFIDENTIAL
AnáliseAná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 | COMPANY CONFIDENTIAL
Configuração inicial• Faça download do Hyojun.bootstrap em:
bitbucket.org/fbiz/hyojun.bootstrap
• Utilize o bower para baixar o Hyojun.Guideline: bower install
• Caso ache necessário, configure as cores base e as gridsde acordo com o seu projeto
09F.biz | COMPANY CONFIDENTIAL
Configuração inicialPara sobrepor a grid padrão da guideline, customize emsource/common/core/config/_grids.scss:
$gl-do-override-grids: true;@mixin gl-override-grids() { @include gs-clear-grid-list(); @include gs-register-grid(gl-wide, 960px, 10, 10px, auto); @include gs-register-grid(gl-normal, 960px, 10, 10px, auto); @include gs-register-grid(gl-mobile, 100%, 4, 10px, 959px);}
01.02.03.04.05.06.07.
10F.biz | COMPANY CONFIDENTIAL
Configuração inicialPara sobrepor as cores da guideline, customize emsource/common/core/config/_colors.scss:
$gl-do-override-theme-colors: true;@mixin gl-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 | COMPANY CONFIDENTIAL
Elementos da guideline• O CSS da guideline é standalone para evitar que
influencie os estilos do projeto
• Todos os elementos que fazem parte do Hyojun.Guidelinerecebem classes
• Na maioria dos casos, apenas a classe gl énecessária. Alguns casos específicos levam gl- eum prefixo, como gl-header, gl-legend, etc.
12F.biz | COMPANY CONFIDENTIAL
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 | COMPANY CONFIDENTIAL
OrganizaçãoExistem algumas áreas com elementos pré-definidos naguideline:
• 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 | COMPANY CONFIDENTIAL
TipografiaOs elementos padrões da página de tipografia utilizamHTML 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 | COMPANY CONFIDENTIAL
Cores• A página lê todas as cores listadas no arquivosource/common/core/config/_colors.scss e lista emforma de paleta
• Para evitar duplicadas ou valores desnecessários, existeuma 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 | COMPANY CONFIDENTIAL
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 oselementos montados, sendo necessário apenas estilizar
• A página de forms pode ser apagada, alterada oucomplementada, existe apenas como uma referência
17F.biz | COMPANY CONFIDENTIAL
Módulos• Lista de espaçamentos
• Lista de z-index
• Todos os módulos globais do projeto
• Módulos específicos podem ser categorizados eseparados em outras páginas
18F.biz | COMPANY CONFIDENTIAL
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 | COMPANY CONFIDENTIAL
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 novosrecursos, funcionalidades, organização, layout, etc.
20F.biz | COMPANY CONFIDENTIAL
Como colaborar?• Faça um fork, crie um branch e envie um pull request
deste branch
• Envie referências
• Participe!
21F.biz | COMPANY CONFIDENTIAL