Hyojun Sass Standards 1/2

F.biz | COMPANY CONFIDENTIAL

Hyojun SASSStandards 1/2

Marcelo Miranda Carneiro 19/02/2014


Hyojun é a coleção dos padrões de trabalho da F.biz.

É nossa iniciativa open source de compartilhar o jeito detrabalhar, idéias e ferramentas.

Hyojun


Excelência como padrão


Características que o definem:

• Projeto público

• Sempre em desenvolvimento

• Trabalho em comunidade

• Bitbucket como plataforma de discussão

Hyojun


• Utilizando e testando

• Identificando necessidades e problemas

• Abrindo issues

• Fork + pull requests

Como contribuir?


O Bitbucket é o nosso principal canal de comunicação


SASS Standards


Objetivos da criação de um padrão:

• Identidade entre projetos

• Evitar dúvidas e agilizar tomadas de decisões simples

• Facilitar manutenção

SASS Standards


Organização baseada em:

• Configuração

• Módulos

• Layouts

• Sites responsivos / temas

Estrutura de diretórios


Estrutura completa.


Output – apenas imports. Dão saída aos arquivos CSS; Source – toda a programação, lógica, módulos, etc;


Todas as regras globais vão em Common. As diferenças vão em cada versão responsiva seguindo a mesma estrutura.


Todos os elementos do projeto ficam neste diretório. Todos os arquivos daqui dão saída para o CSS.


A estrutura da página, diagramação ou “templates”. São os elementos que receberão os módulos.


Agrupamento de imports para facilitar a replicação.


Todas as configurações do projeto, definições de variáveis, funções, mixins, extends, etc. Só declarações, sem saída CSS.


Todas as configurações do projeto: cores, unidades definição de grids. Variáveis do projeto.


Todas as definições base de módulos no formato de placeholder para ser extendido no projeto. Ex.: %placeholder-name.


Todas as definições de mixins do projeto.


Todas as definições de função do projeto.


Todas as as animações utilizando CSS transition no formato de placeholder para ser extendido no projeto. Ex.: %anim-name.


Módulos


Objetivo da criação modular:

• análise dos elementos do projeto

• abstração

• flexibilidade na aplicação

• melhora manutanção e qualidade do código

Módulos


Organização dos diretórios


Tudo é 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

Níveis dos Módulos

http://pt.slideshare.net/bradfrostweb/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

Níveis dos Módulos





• Não colocar @import dentro de módulos

• 1 módulo + variações por arquivo

• Granulação depende do projeto

• Criar diretórios por categoria. Ex.:

• boxes, navigation, texts

• Módulos podem ser usados dentro de outros módulos

Módulos - organização


Layouts


• Layouts ou templates contém as regras de diagramaçãode uma página do projeto

• No final, módulos são “inseridos” nos espaços definidosno template

• Normalmente temos um template por área do projeto

• Cada template tem seu arquivo próprio. Ex.:

• _structure.scss, _home.scss, _search.scss

Layouts






Output


Objetivos do “output”:

• Centralizar as saídas CSS em um lugar

• Raíz do diretório que vai pra produção

• Apenas se alimenta dos módulos, layouts, etc. (somente import, sem regras de CSS)

Output


Um arquivo de output fica muito parecido com isso:

@import "../source/320-mobile/wrappers/lib", "../source/320-mobile/wrappers/core", "../source/320-mobile/wrappers/structure", "../source/common/modules/module1", "../source/common/modules/module2", "../source/common/modules/module3", ... "../source/320-mobile/modules/module1", "../source/320-mobile/layouts/home";

Output - exemplo

01.02.03.04.05.06.07.08.09.




Wrappers


Objetivos dos “wrappers”:

• Agrupamento de imports comuns

• Evitar replicação de código

• Controle melhor sobre o que é importado evitandoduplicatas

Wrappers


O output de um projeto com mixins e configuração ficaria:

@import "../source/common/core/config/colors", "../source/common/core/config/units", "../source/common/core/mixins/mixin1", "../source/common/core/mixins/mixin2", ... "../source/common/modules/boxes/modulo1", "../source/common/modules/boxes/modulo2", "../source/common/modules/boxes/modulo3",

arquivo ~/output/home.scss

Exemplo

01.02.03.04.05.06.07.08.


Ao invés de jogar todos os imports em todos os outputs,um wrapper core pode ser criado:

@import "../source/common/core/config/colors", "../source/common/core/config/units", "../source/common/core/mixins/mixin1", "../source/common/core/mixins/mixin2";

arquivo ~/source/common/wrappers/_core.scss

Exemplo

01.02.03.04.


E importado para o output:

@import "../source/common/wrappers/core", "../source/common/modules/boxes/modulo1", "../source/common/modules/boxes/modulo2", "../source/common/modules/boxes/modulo3";

arquivo ~/output/home.scss

Exemplo

01.02.03.04.


É possível importar wrappers recursivamente para facilitara organização de sites responsivos.

• common tem conteúdo importado em todas as versões

• 320-mobile, por exemplo na versão específica

• Import de common para dentro de 320-mobile

• Output recebe apenas 1 import

Wrappers - organização




Cores


Objetivos da organização de cores:

• Centralizar todas as cores do projeto em um lugar

• Análise e criação de paleta de cores

• Cores relativas

• Nomenclatura e melhor manutenção

Cores


Localização do arquivo _colors.scss.


• Cores do “tema”• cores principais (bastante diferença no HUE)

• Cores da paleta• variações do tema para claro e escuro, que formam a paleta

de cores

• Exceções• não fazem parte da paleta como logos de terceiros e selos

Cores - como funciona


Roda de cores (HUE)










• Cores do “tema”• $theme-main-color, $theme-neutral-color

• Cores da paleta• $group-main-light10, $group-main-light20

• Exceções• $facebook-color, $success-color, $error-color

Cores - nomenclatura


Cores do projeto para fontes, elementos base:

• $base-font-color, $title-font-color

• $base-border-color, $table-border-color

• $table-bg-color, $table-bg-color-from, $table-bg-color-to

Mais informações na documentação oficial

Cores - nomenclatura

https://bitbucket.org/fbiz/hyojun.sass-standards/src/HEAD/sass/source/common/core/config/?at=master#markdown-header-padrao-de-nomenclatura-de-cores;


$theme-main-color: #808078;$theme-neutral-color: #333;$theme-highlight-color: #3A87AD; $group-lightest: #FFFFFF;$group-darkest: #000000;$group-main-light10: #654793;$group-main-dark10: #432F62;$group-main-dark20: #382753; $base-border-color: $group-neutral-light20;$base-bg-light-color: $group-neutral-light30;$base-bg-dark-color: $group-neutral-light20;

Cores - Exemplo01.02.03.04.05.06.07.08.09.10.11.12.13.


Unidades


Objetivos da organização de unidades:

• Centralizar todas as unidades estruturais em um lugar

• Análise e normalização de espaçamentos

• Análise e normalização de tamanhos de fontes

• Nomenclatura e melhor manutenção

Unidades


Exemplos de tipos de unidades:

• Tamanhos de fotos padrão de um projeto

• border-radius, border-width, font-weight

• z-index

• duration, timing-function, ease

Unidades


Localização do arquivo _units.scss.


$root-font-size: $base-font-size;$head-font-size: 60px;$title-font-size: 36px;$sub-title-font-size: 30px;$item-title-font-size: 24px;$lead-font-size: 21px;$discreet-title-font-size: 18px;$content-font-size: 16px;$discreet-font-size: 14px;$footnote-font-size: 12px;

Unidades - Exemplo (fonts)01.02.03.04.05.06.07.08.09.10.


$base-space-size: 10px;$double-space-size: ($base-space-size * 2);$separator-space-size: ($base-space-size * 4);$highlight-space-size: ($base-space-size * 8);$half-space-size: ($base-space-size / 2);$minor-space-size: ($base-space-size / 5);

Exemplo de aplicação:

.category-tilte { margin-top: $double-space-size - 12px;}

Unidades - Exemplo (space)01.02.03.04.05.06.

01.02.03.









Resumo


• Todo código fonte vai em SOURCE

• Arquivos que darão saída para produção em OUTPUT

• Apenas OUTPUTs e WRAPPERs podem ter imports

• Diretórios organizados por regras comuns (COMMON) eespecíficos (320-MOBILE, 760-TABLET, etc.)

• MODULES recebe todos os elementos com regras deCSS que são escritas na saída

Resumo


• Um módulo por arquivo, organizado por categorias

• Todas as diagramações em LAYOUTS, que também dãoescritas na saída

• Toda configuração no core

• Cores apenas declaradas em COLORS. Módulos apenasusam as variáveis

Resumo


• Unidades base declaradas em UNITS

• Tamanho de fontes apenas em UNITS. Módulos apenasusam as variáveis

• Para espaçamentos, módulos podem fazer o cálculo paraajustes finos de line-height, por exemplo

Resumo


• Aprofundamento na organização responsiva

• Boas-práticas no SASS - extends, mixins, functions,animations

• Grid System

• Bower

Próxima apresentação


Documentação

bitbucket.com/fbiz/hyojun bitbucket.com/fbiz/hyojun.sass-standards

https://bitbucket.org/fbiz/hyojun

https://bitbucket.org/fbiz/hyojun.sass-standards/src/HEAD?at=master


/ thank you

http://www.fbiz.com.br/

Technology

Hyojun Sass Standards 1/2