Hyojun Sass Standards 1/2

Padrão de desenvolvimento e organização de SASS para framework Hyojun, da F.biz. Esta primeira parte foca na estrutura de diretório e os conceitos por trás desta organização.

Transcript

1. F.biz | COMPANY CONFIDENTIAL Hyojun SASS Standards 1/2 Marcelo Miranda Carneiro 19/02/2014
2. F.biz | COMPANY CONFIDENTIAL 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. Hyojun
3. F.biz | COMPANY CONFIDENTIAL Excelência como padrão
4. 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
5. F.biz | COMPANY CONFIDENTIAL • Utilizando e testando • Identificando necessidades e problemas • Abrindo issues • Fork + pull requests Como contribuir?
6. F.biz | COMPANY CONFIDENTIAL O Bitbucket é o nosso principal canal de comunicação
7. F.biz | COMPANY CONFIDENTIAL SASS Standards
8. 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
9. F.biz | COMPANY CONFIDENTIAL Organização baseada em: • Configuração • Módulos • Layouts • Sites responsivos / temas Estrutura de diretórios
10. F.biz | COMPANY CONFIDENTIAL Estrutura completa.
11. F.biz | COMPANY CONFIDENTIAL Output – apenas imports. Dão saída aos arquivos CSS; Source – toda a programação, lógica, módulos, etc;
12. 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.
13. F.biz | COMPANY CONFIDENTIAL Todos os elementos do projeto ficam neste diretório. Todos os arquivos daqui dão saída para o CSS.
14. F.biz | COMPANY CONFIDENTIAL A estrutura da página, diagramação ou “templates”. São os elementos que receberão os módulos.
15. F.biz | COMPANY CONFIDENTIAL Agrupamento de imports para facilitar a replicação.
16. 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.
17. F.biz | COMPANY CONFIDENTIAL Todas as configurações do projeto: cores, unidades definição de grids. Variáveis do projeto.
18. F.biz | COMPANY CONFIDENTIAL Todas as definições base de módulos no formato de placeholder para ser extendido no projeto. Ex.: % p l a c e h o l d e r - n a m e.
19. F.biz | COMPANY CONFIDENTIAL Todas as definições de mixins do projeto.
20. F.biz | COMPANY CONFIDENTIAL Todas as definições de função do projeto.
21. F.biz | COMPANY CONFIDENTIAL Todas as as animações utilizando CSS transition no formato de placeholder para ser extendido no projeto. Ex.: % a n i m - n a m e.
22. F.biz | COMPANY CONFIDENTIAL Módulos
23. 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
24. F.biz | COMPANY CONFIDENTIAL Organização dos diretórios
25. F.biz | COMPANY CONFIDENTIAL 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
26. 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
27. F.biz | COMPANY CONFIDENTIAL
28. F.biz | COMPANY CONFIDENTIAL
29. F.biz | COMPANY CONFIDENTIAL
30. F.biz | COMPANY CONFIDENTIAL • Não colocar @ i m p o r t 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
31. F.biz | COMPANY CONFIDENTIAL Layouts
32. F.biz | COMPANY CONFIDENTIAL • 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 Layouts
33. F.biz | COMPANY CONFIDENTIAL Organização dos diretórios
34. F.biz | COMPANY CONFIDENTIAL
35. F.biz | COMPANY CONFIDENTIAL
36. F.biz | COMPANY CONFIDENTIAL Output
37. 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
38. F.biz | COMPANY CONFIDENTIAL Um arquivo de output fica muito parecido com isso: @ i m p o r t " . . / s o u r c e / 3 2 0 - m o b i l e / w r a p p e r s / l i b " , " . . / s o u r c e / 3 2 0 - m o b i l e / w r a p p e r s / c o r e " , " . . / s o u r c e / 3 2 0 - m o b i l e / w r a p p e r s / s t r u c t u r e " , " . . / s o u r c e / c o m m o n / m o d u l e s / m o d u l e 1 " , " . . / s o u r c e / c o m m o n / m o d u l e s / m o d u l e 2 " , " . . / s o u r c e / c o m m o n / m o d u l e s / m o d u l e 3 " , . . . " . . / s o u r c e / 3 2 0 - m o b i l e / m o d u l e s / m o d u l e 1 " , " . . / s o u r c e / 3 2 0 - m o b i l e / l a y o u t s / h o m e " ; Output - exemplo 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 .
39. F.biz | COMPANY CONFIDENTIAL Organização dos diretórios
40. F.biz | COMPANY CONFIDENTIAL Wrappers
41. F.biz | COMPANY CONFIDENTIAL Objetivos dos “wrappers”: • Agrupamento de imports comuns • Evitar replicação de código • Controle melhor sobre o que é importado evitando duplicatas Wrappers
42. F.biz | COMPANY CONFIDENTIAL O output de um projeto com mixins e configuração ficaria: @ i m p o r t " . . / s o u r c e / c o m m o n / c o r e / c o n f i g / c o l o r s " , " . . / s o u r c e / c o m m o n / c o r e / c o n f i g / u n i t s " , " . . / s o u r c e / c o m m o n / c o r e / m i x i n s / m i x i n 1 " , " . . / s o u r c e / c o m m o n / c o r e / m i x i n s / m i x i n 2 " , . . . " . . / s o u r c e / c o m m o n / m o d u l e s / b o x e s / m o d u l o 1 " , " . . / s o u r c e / c o m m o n / m o d u l e s / b o x e s / m o d u l o 2 " , " . . / s o u r c e / c o m m o n / m o d u l e s / b o x e s / m o d u l o 3 " , arquivo ~/output/home.scss Exemplo 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .
43. F.biz | COMPANY CONFIDENTIAL Ao invés de jogar todos os imports em todos os outputs, um wrapper c o r e pode ser criado: @ i m p o r t " . . / s o u r c e / c o m m o n / c o r e / c o n f i g / c o l o r s " , " . . / s o u r c e / c o m m o n / c o r e / c o n f i g / u n i t s " , " . . / s o u r c e / c o m m o n / c o r e / m i x i n s / m i x i n 1 " , " . . / s o u r c e / c o m m o n / c o r e / m i x i n s / m i x i n 2 " ; arquivo ~/source/common/wrappers/_core.scss Exemplo 0 1 . 0 2 . 0 3 . 0 4 .
44. F.biz | COMPANY CONFIDENTIAL E importado para o output: @ i m p o r t " . . / s o u r c e / c o m m o n / w r a p p e r s / c o r e " , " . . / s o u r c e / c o m m o n / m o d u l e s / b o x e s / m o d u l o 1 " , " . . / s o u r c e / c o m m o n / m o d u l e s / b o x e s / m o d u l o 2 " , " . . / s o u r c e / c o m m o n / m o d u l e s / b o x e s / m o d u l o 3 " ; arquivo ~/output/home.scss Exemplo 0 1 . 0 2 . 0 3 . 0 4 .
45. F.biz | COMPANY CONFIDENTIAL É possível importar wrappers recursivamente para facilitar a organização de sites responsivos. • c o m m o n tem conteúdo importado em todas as versões • 3 2 0 - m o b i l e, por exemplo na versão específica • Import de c o m m o n para dentro de 3 2 0 - m o b i l e • Output recebe apenas 1 import Wrappers - organização
46. F.biz | COMPANY CONFIDENTIAL
47. F.biz | COMPANY CONFIDENTIAL
48. F.biz | COMPANY CONFIDENTIAL Cores
49. 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
50. F.biz | COMPANY CONFIDENTIAL Localização do arquivo _colors.scss.
51. 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
52. F.biz | COMPANY CONFIDENTIAL Roda de cores (HUE)
53. F.biz | COMPANY CONFIDENTIAL
54. F.biz | COMPANY CONFIDENTIAL
55. F.biz | COMPANY CONFIDENTIAL
56. F.biz | COMPANY CONFIDENTIAL
57. F.biz | COMPANY CONFIDENTIAL
58. F.biz | COMPANY CONFIDENTIAL
59. F.biz | COMPANY CONFIDENTIAL
60. F.biz | COMPANY CONFIDENTIAL
61. 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
62. 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
63. F.biz | COMPANY CONFIDENTIAL $ t h e m e - m a i n - c o l o r : # 8 0 8 0 7 8 ; $ t h e m e - n e u t r a l - c o l o r : # 3 3 3 ; $ t h e m e - h i g h l i g h t - c o l o r : # 3 A 8 7 A D ; $ g r o u p - l i g h t e s t : # F F F F F F ; $ g r o u p - d a r k e s t : # 0 0 0 0 0 0 ; $ g r o u p - m a i n - l i g h t 1 0 : # 6 5 4 7 9 3 ; $ g r o u p - m a i n - d a r k 1 0 : # 4 3 2 F 6 2 ; $ g r o u p - m a i n - d a r k 2 0 : # 3 8 2 7 5 3 ; $ b a s e - b o r d e r - c o l o r : $ g r o u p - n e u t r a l - l i g h t 2 0 ; $ b a s e - b g - l i g h t - c o l o r : $ g r o u p - n e u t r a l - l i g h t 3 0 ; $ b a s e - b g - d a r k - c o l o r : $ g r o u p - n e u t r a l - l i g h t 2 0 ; 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 .
64. F.biz | COMPANY CONFIDENTIAL Unidades
65. 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
66. 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
67. F.biz | COMPANY CONFIDENTIAL Localização do arquivo _units.scss.
68. F.biz | COMPANY CONFIDENTIAL $ r o o t - f o n t - s i z e : $ b a s e - f o n t - s i z e ; $ h e a d - f o n t - s i z e : 6 0 p x ; $ t i t l e - f o n t - s i z e : 3 6 p x ; $ s u b - t i t l e - f o n t - s i z e : 3 0 p x ; $ i t e m - t i t l e - f o n t - s i z e : 2 4 p x ; $ l e a d - f o n t - s i z e : 2 1 p x ; $ d i s c r e e t - t i t l e - f o n t - s i z e : 1 8 p x ; $ c o n t e n t - f o n t - s i z e : 1 6 p x ; $ d i s c r e e t - f o n t - s i z e : 1 4 p x ; $ f o o t n o t e - f o n t - s i z e : 1 2 p x ; Unidades - Exemplo (fonts) 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .
69. F.biz | COMPANY CONFIDENTIAL $ b a s e - s p a c e - s i z e : 1 0 p x ; $ d o u b l e - s p a c e - s i z e : ( $ b a s e - s p a c e - s i z e * 2 ) ; $ s e p a r a t o r - s p a c e - s i z e : ( $ b a s e - s p a c e - s i z e * 4 ) ; $ h i g h l i g h t - s p a c e - s i z e : ( $ b a s e - s p a c e - s i z e * 8 ) ; $ h a l f - s p a c e - s i z e : ( $ b a s e - s p a c e - s i z e / 2 ) ; $ m i n o r - s p a c e - s i z e : ( $ b a s e - s p a c e - s i z e / 5 ) ; Exemplo de aplicação: . c a t e g o r y - t i l t e { m a r g i n - t o p : $ d o u b l e - s p a c e - s i z e - 1 2 p x ; } Unidades - Exemplo (space) 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 1 . 0 2 . 0 3 .
70. F.biz | COMPANY CONFIDENTIAL
71. F.biz | COMPANY CONFIDENTIAL
72. F.biz | COMPANY CONFIDENTIAL
73. F.biz | COMPANY CONFIDENTIAL
74. F.biz | COMPANY CONFIDENTIAL
75. F.biz | COMPANY CONFIDENTIAL
76. F.biz | COMPANY CONFIDENTIAL
77. F.biz | COMPANY CONFIDENTIAL Resumo
78. 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) 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
79. F.biz | COMPANY CONFIDENTIAL • 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
80. F.biz | COMPANY CONFIDENTIAL • 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 Resumo
81. 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
82. F.biz | COMPANY CONFIDENTIAL Documentação bitbucket.com/fbiz/hyojun bitbucket.com/fbiz/hyojun.sass-standards
83. F.biz | COMPANY CONFIDENTIAL / thank you