Hyojun Sass Standards 1/2

716 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Hyojun Sass Standards 1/2

  1. 1. Hyojun SASS Standards 1/2 Marcelo Miranda Carneiro 19/02/2014 F.biz | COMPANY CONFIDENTIAL
  2. 2. 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. F.biz | COMPANY CONFIDENTIAL
  3. 3. Excelência como padrão F.biz | COMPANY CONFIDENTIAL
  4. 4. Hyojun Características que o definem: • Projeto público • Sempre em desenvolvimento • Trabalho em comunidade • Bitbucket como plataforma de discussão F.biz | COMPANY CONFIDENTIAL
  5. 5. Como contribuir? • Utilizando e testando • Identificando necessidades e problemas • Abrindo issues • Fork + pull requests F.biz | COMPANY CONFIDENTIAL
  6. 6. O Bitbucket é o nosso principal canal de comunicação F.biz | COMPANY CONFIDENTIAL
  7. 7. SASS Standards F.biz | COMPANY CONFIDENTIAL
  8. 8. 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 F.biz | COMPANY CONFIDENTIAL
  9. 9. Estrutura de diretórios Organização baseada em: • Configuração • Módulos • Layouts • Sites responsivos / temas F.biz | COMPANY CONFIDENTIAL
  10. 10. Estrutura completa. F.biz | COMPANY CONFIDENTIAL
  11. 11. Output – apenas imports. Dão saída aos arquivos CSS; Source – toda a programação, lógica, módulos, etc; F.biz | COMPANY CONFIDENTIAL
  12. 12. 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
  13. 13. Todos os elementos do projeto ficam neste diretório. Todos os arquivos daqui dão saída para o CSS. F.biz | COMPANY CONFIDENTIAL
  14. 14. A estrutura da página, diagramação ou “templates”. São os elementos que receberão os módulos. F.biz | COMPANY CONFIDENTIAL
  15. 15. Agrupamento de imports para facilitar a replicação. F.biz | COMPANY CONFIDENTIAL
  16. 16. 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
  17. 17. Todas as configurações do projeto: cores, unidades definição de grids. Variáveis do projeto. F.biz | COMPANY CONFIDENTIAL
  18. 18. 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 F.biz | COMPANY CONFIDENTIAL
  19. 19. Todas as definições de mixins do projeto. F.biz | COMPANY CONFIDENTIAL
  20. 20. Todas as definições de função do projeto. F.biz | COMPANY CONFIDENTIAL
  21. 21. Todas as as animações utilizando CSS transition no formato de placeholder para ser extendido no projeto. Ex.: % n m n m . ai-ae F.biz | COMPANY CONFIDENTIAL
  22. 22. Módulos F.biz | COMPANY CONFIDENTIAL
  23. 23. 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 F.biz | COMPANY CONFIDENTIAL
  24. 24. Organização dos diretórios F.biz | COMPANY CONFIDENTIAL
  25. 25. 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 F.biz | COMPANY CONFIDENTIAL
  26. 26. 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 F.biz | COMPANY CONFIDENTIAL
  27. 27. F.biz | COMPANY CONFIDENTIAL
  28. 28. F.biz | COMPANY CONFIDENTIAL
  29. 29. F.biz | COMPANY CONFIDENTIAL
  30. 30. 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 F.biz | COMPANY CONFIDENTIAL
  31. 31. Layouts F.biz | COMPANY CONFIDENTIAL
  32. 32. 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 F.biz | COMPANY CONFIDENTIAL
  33. 33. Organização dos diretórios F.biz | COMPANY CONFIDENTIAL
  34. 34. F.biz | COMPANY CONFIDENTIAL
  35. 35. F.biz | COMPANY CONFIDENTIAL
  36. 36. Output F.biz | COMPANY CONFIDENTIAL
  37. 37. 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) F.biz | COMPANY CONFIDENTIAL
  38. 38. 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; F.biz | COMPANY CONFIDENTIAL
  39. 39. Organização dos diretórios F.biz | COMPANY CONFIDENTIAL
  40. 40. Wrappers F.biz | COMPANY CONFIDENTIAL
  41. 41. Wrappers Objetivos dos “wrappers”: • Agrupamento de imports comuns • Evitar replicação de código • Controle melhor sobre o que é importado evitando duplicatas F.biz | COMPANY CONFIDENTIAL
  42. 42. 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 ".suc/omnmdlsbxsmdl2, ./orecmo/oue/oe/ouo" 0. 8 ".suc/omnmdlsbxsmdl3, ./orecmo/oue/oe/ouo" arquivo ~/output/home.scss F.biz | COMPANY CONFIDENTIAL
  43. 43. 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 F.biz | COMPANY CONFIDENTIAL
  44. 44. Exemplo E importado para o output: 0. @mot".suc/omnwapr/oe, 1 ipr ./orecmo/rpescr" 0. 2 ".suc/omnmdlsbxsmdl1, ./orecmo/oue/oe/ouo" 0. 3 ".suc/omnmdlsbxsmdl2, ./orecmo/oue/oe/ouo" 0. 4 ".suc/omnmdlsbxsmdl3; ./orecmo/oue/oe/ouo" arquivo ~/output/home.scss F.biz | COMPANY CONFIDENTIAL
  45. 45. 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 F.biz | COMPANY CONFIDENTIAL
  46. 46. F.biz | COMPANY CONFIDENTIAL
  47. 47. F.biz | COMPANY CONFIDENTIAL
  48. 48. Cores F.biz | COMPANY CONFIDENTIAL
  49. 49. 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 F.biz | COMPANY CONFIDENTIAL
  50. 50. Localização do arquivo _colors.scss. F.biz | COMPANY CONFIDENTIAL
  51. 51. 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 F.biz | COMPANY CONFIDENTIAL
  52. 52. Roda de cores (HUE) F.biz | COMPANY CONFIDENTIAL
  53. 53. F.biz | COMPANY CONFIDENTIAL
  54. 54. F.biz | COMPANY CONFIDENTIAL
  55. 55. F.biz | COMPANY CONFIDENTIAL
  56. 56. F.biz | COMPANY CONFIDENTIAL
  57. 57. F.biz | COMPANY CONFIDENTIAL
  58. 58. F.biz | COMPANY CONFIDENTIAL
  59. 59. F.biz | COMPANY CONFIDENTIAL
  60. 60. F.biz | COMPANY CONFIDENTIAL
  61. 61. 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 F.biz | COMPANY CONFIDENTIAL
  62. 62. 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 F.biz | COMPANY CONFIDENTIAL
  63. 63. 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 F.biz | COMPANY CONFIDENTIAL
  64. 64. Unidades F.biz | COMPANY CONFIDENTIAL
  65. 65. 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 F.biz | COMPANY CONFIDENTIAL
  66. 66. 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 F.biz | COMPANY CONFIDENTIAL
  67. 67. Localização do arquivo _units.scss. F.biz | COMPANY CONFIDENTIAL
  68. 68. 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 F.biz | COMPANY CONFIDENTIAL
  69. 69. 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 F.biz | COMPANY CONFIDENTIAL
  70. 70. F.biz | COMPANY CONFIDENTIAL
  71. 71. F.biz | COMPANY CONFIDENTIAL
  72. 72. F.biz | COMPANY CONFIDENTIAL
  73. 73. F.biz | COMPANY CONFIDENTIAL
  74. 74. F.biz | COMPANY CONFIDENTIAL
  75. 75. F.biz | COMPANY CONFIDENTIAL
  76. 76. F.biz | COMPANY CONFIDENTIAL
  77. 77. Resumo F.biz | COMPANY CONFIDENTIAL
  78. 78. 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 F.biz | COMPANY CONFIDENTIAL
  79. 79. 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 F.biz | COMPANY CONFIDENTIAL
  80. 80. 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 F.biz | COMPANY CONFIDENTIAL
  81. 81. Próxima apresentação • Aprofundamento na organização responsiva • Boas-práticas no SASS - extends, mixins, functions, animations • Grid System • Bower F.biz | COMPANY CONFIDENTIAL
  82. 82. Documentação bitbucket.com/fbiz/hyojun bitbucket.com/fbiz/hyojun.sass-standards F.biz | COMPANY CONFIDENTIAL
  83. 83. / thank you F.biz | COMPANY CONFIDENTIAL

×