SASS Standards

Hyojun SASS
Standards 1/2
Marcelo Miranda Carneiro
19/02/2014
F.biz | COMPANY CONFIDENTIAL

Hyojun
Hyojun é a coleção dos padrões de trabalho da F.biz.
É nossa iniciativa open source de compartilhar o jeito de
trabalhar, idéias e ferramentas.


Excelência como padrão


Hyojun
Características que o definem:
• Projeto público
• Sempre em desenvolvimento
• Trabalho em comunidade
• Bitbucket como plataforma de discussão


Como contribuir?
• Utilizando e testando
• Identificando necessidades e problemas
• Abrindo issues
• Fork + pull requests


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


SASS Standards

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


Estrutura de diretórios
Organização baseada em:
• Configuração
• Módulos
• Layouts
• Sites responsivos / temas


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.: % l c h l e - a e.
paeodrnm

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.: % n m n m .
ai-ae

Módulos

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


Organização dos diretórios

Níveis dos Módulos
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

Níveis dos Módulos
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


Módulos - organização
• Não colocar @ m o t dentro de módulos
ipr
• 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

Layouts

Layouts
• Layouts ou templates contém as regras de diagramação
de uma página do projeto
• No final, módulos são “inseridos” nos espaços definidos
no template
• Normalmente temos um template por área do projeto
• Cada template tem seu arquivo próprio. Ex.:
• _structure.scss, _home.scss, _search.scss

Output

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 - exemplo
Um arquivo de output fica muito parecido com isso:
0. @mot".suc/2-oiewapr/i"
1
ipr ./ore30mbl/rpeslb,
0.
2
".suc/2-oiewapr/oe,
./ore30mbl/rpescr"
0.
3
".suc/2-oiewapr/tutr"
./ore30mbl/rpessrcue,
0.
4
".suc/omnmdlsmdl1,
./orecmo/oue/oue"
0.
5
".suc/omnmdlsmdl2,
./orecmo/oue/oue"
0.
6
".suc/omnmdlsmdl3,
./orecmo/oue/oue"
0.
7
..
.
0.
8
".suc/2-oiemdlsmdl1,
./ore30mbl/oue/oue"
0.
9
".suc/2-oielyushm"
./ore30mbl/aot/oe;


Wrappers

Wrappers
Objetivos dos “wrappers”:
• Agrupamento de imports comuns
• Evitar replicação de código
• Controle melhor sobre o que é importado evitando
duplicatas


Exemplo
O output de um projeto com mixins e configuração ficaria:
0. @mot".suc/omncr/ofgclr"
1
ipr ./orecmo/oecni/oos,
0.
2
".suc/omncr/ofguis,
./orecmo/oecni/nt"
0.
3
".suc/omncr/iismxn"
./orecmo/oemxn/ii1,
0.
4
".suc/omncr/iismxn"
./orecmo/oemxn/ii2,
0.
5
..
.
0.
6
".suc/omnmdlsbxsmdl1,
./orecmo/oue/oe/ouo"
0.
7
0.
8

arquivo ~/output/home.scss

Exemplo
Ao invés de jogar todos os imports em todos os outputs,
um wrapper c r pode ser criado:
oe
0. @mot".suc/omncr/ofgclr"
1
ipr ./orecmo/oecni/oos,
0.
2
".suc/omncr/ofguis,
./orecmo/oecni/nt"
0.
3
".suc/omncr/iismxn"
./orecmo/oemxn/ii1,
0.
4
".suc/omncr/iismxn"
./orecmo/oemxn/ii2;

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


Exemplo
E importado para o output:
0. @mot".suc/omnwapr/oe,
1
ipr ./orecmo/rpescr"
0.
2
0.
3
0.
4
".suc/omnmdlsbxsmdl3;

arquivo ~/output/home.scss


Wrappers - organização
É possível importar wrappers recursivamente para facilitar
a organização de sites responsivos.
• c m o tem conteúdo importado em todas as versões
omn
• 3 0 m b l por exemplo na versão específica
2 - o i e,
• Import de c m o para dentro de 3 0 m b l
omn
2-oie
• Output recebe apenas 1 import

Cores

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


Localização do arquivo _colors.scss.

Cores - como funciona
• 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

Roda de cores (HUE)

Cores - nomenclatura
• 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 - Exemplo
0.
1
0.
2
0.
3
0.
4
0.
5
0.
6
0.
7
0.
8
0.
9
1.
0
1.
1
1.
2
1.
3

$hm-anclr #008
teemi-oo: 887;
$hm-eta-oo:#3;
teenurlclr 33
$hm-ihih-oo:#A7D
teehglgtclr 38A;
$ru-ihet #FFF
goplgts: FFF;
$ru-aks:#000
gopdret 000;
$ru-anlgt0 #573
gopmi-ih1: 649;
$ru-andr1:#3F2
gopmi-ak0 426;
$ru-andr2:#873
gopmi-ak0 325;
$aebre-oo:$ru-eta-ih2;
bs-odrclr gopnurllgt0
$aeb-ih-oo:$ru-eta-ih3;
bs-glgtclr gopnurllgt0
$aeb-akclr $ru-eta-ih2;
bs-gdr-oo: gopnurllgt0


Unidades

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


Localização do arquivo _units.scss.

Unidades - Exemplo (fonts)
0.
1
0.
2
0.
3
0.
4
0.
5
0.
6
0.
7
0.
8
0.
9
1.
0

$otfn-ie $aefn-ie
ro-otsz: bs-otsz;
$edfn-ie 6p;
ha-otsz: 0x
$il-otsz:3p;
ttefn-ie 6x
$u-il-otsz:3p;
sbttefn-ie 0x
$tmttefn-ie 2p;
ie-il-otsz: 4x
$edfn-ie 2p;
la-otsz: 1x
$icetttefn-ie 1p;
dsre-il-otsz: 8x
$otn-otsz:1p;
cnetfn-ie 6x
$icetfn-ie 1p;
dsre-otsz: 4x
$otoefn-ie 1p;
font-otsz: 2x


Unidades - Exemplo (space)
0.
1
0.
2
0.
3
0.
4
0.
5
0.
6

$aesaesz:1p;
bs-pc-ie 0x
$obesaesz:(bs-pc-ie*2;
dul-pc-ie $aesaesz
)
$eaao-pc-ie (bs-pc-ie*4;
sprtrsaesz: $aesaesz
)
$ihih-pc-ie (bs-pc-ie*8;
hglgtsaesz: $aesaesz
)
$afsaesz:(bs-pc-ie/2;
hl-pc-ie $aesaesz
)
$io-pc-ie (bs-pc-ie/5;
mnrsaesz: $aesaesz
)

Exemplo de aplicação:
0. .aeoytle{
1
ctgr-it
0.
2
mri-o:$obesaesz -1p;
agntp dul-pc-ie
2x
0. }
3

Resumo

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) e
específicos (320-MOBILE, 760-TABLET, etc.)
• MODULES recebe todos os elementos com regras de
CSS 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ão
escritas na saída
• Toda configuração no core
• Cores apenas declaradas em COLORS. Módulos apenas
usam as variáveis


Resumo
• Unidades base declaradas em UNITS
• Tamanho de fontes apenas em UNITS. Módulos apenas
usam as variáveis
• Para espaçamentos, módulos podem fazer o cálculo para
ajustes finos de line-height, por exemplo


Próxima apresentação
• Aprofundamento na organização responsiva
• Boas-práticas no SASS - extends, mixins, functions,
animations
• Grid System
• Bower


Documentação

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


/ thank you


SASS Standards

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie SASS Standards

Ähnlich wie SASS Standards (20)

SASS Standards