Hyojun Sass Standards 1/2

F.biz | COMPANY CONFIDENTIAL

Hyojun SASSStandards 1/2

Marcelo Miranda Carneiro 19/02/2014

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Excelência como padrão

F.biz | COMPANY CONFIDENTIAL

Características que o definem:

• Projeto público

• Sempre em desenvolvimento

• Trabalho em comunidade

• Bitbucket como plataforma de discussão

Hyojun

F.biz | COMPANY CONFIDENTIAL

• Utilizando e testando

• Identificando necessidades e problemas

• Abrindo issues

• Fork + pull requests

Como contribuir?

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

SASS Standards

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Organização baseada em:

• Configuração

• Módulos

• Layouts

• Sites responsivos / temas

Estrutura de diretórios

F.biz | COMPANY CONFIDENTIAL

Estrutura completa.

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Agrupamento de imports para facilitar a replicação.

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Todas as definições de mixins do projeto.

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Módulos

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Organização dos diretórios

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

• 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

F.biz | COMPANY CONFIDENTIAL

Layouts

F.biz | COMPANY CONFIDENTIAL

• 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

F.biz | COMPANY CONFIDENTIAL

Organização dos diretórios

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

Output

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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.

F.biz | COMPANY CONFIDENTIAL

Organização dos diretórios

F.biz | COMPANY CONFIDENTIAL

Wrappers

F.biz | COMPANY CONFIDENTIAL

Objetivos dos “wrappers”:

• Agrupamento de imports comuns

• Evitar replicação de código

• Controle melhor sobre o que é importado evitandoduplicatas

Wrappers

F.biz | COMPANY CONFIDENTIAL

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.

F.biz | COMPANY CONFIDENTIAL

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.

F.biz | COMPANY CONFIDENTIAL

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.

F.biz | COMPANY CONFIDENTIAL

É 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

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

Cores

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Localização do arquivo _colors.scss.

F.biz | COMPANY CONFIDENTIAL

• 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

F.biz | COMPANY CONFIDENTIAL

Roda de cores (HUE)

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

• 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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Unidades

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

Localização do arquivo _units.scss.

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

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

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

Resumo

F.biz | COMPANY CONFIDENTIAL

• 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

F.biz | COMPANY CONFIDENTIAL

• 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

F.biz | COMPANY CONFIDENTIAL

• 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

F.biz | COMPANY CONFIDENTIAL

• Aprofundamento na organização responsiva

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

• Grid System

• Bower

Próxima apresentação

F.biz | COMPANY CONFIDENTIAL

Documentação

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

F.biz | COMPANY CONFIDENTIAL

/ thank you