Hyojun Guideline

Hyojun Guideline

Marcelo Miranda Carneiro 04/04/2014

F.biz | COMPANY CONFIDENTIAL

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


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


Atomic design


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


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”


http://pt.slideshare.net/bradfrostweb/atomic-design

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


Layouts


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


Análise


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


http://www.netshoes.com.br/

Grids


Módulos


Cores


Unidades


Como usar


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


https://bitbucket.org/fbiz/hyojun.bootstrap

http://bower.io/

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.


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.


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.


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


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


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)


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


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


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


Como colaborar?


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


https://bitbucket.org/fbiz/hyojun.guideline

http://fbiz.bitbucket.org/hyojun.guideline

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.


Como colaborar?• Faça um fork, crie um branch e envie um pull request

deste branch

• Envie referências

• Participe!


A WPP Company / thank you

http://fbiz.com.br/

Hyojun Guideline

Technology

Transcript of Hyojun Guideline