Hyojun Sass Standards 1/2

50 %
50 %
Information about Hyojun Sass Standards 1/2
Technology

Published on February 21, 2014

Author: marcelomirandacarneiro

Source: slideshare.net

Description

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.

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. F.biz | COMPANY CONFIDENTIAL

Excelência como padrão F.biz | COMPANY CONFIDENTIAL

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

Como contribuir? • Utilizando e testando • Identificando necessidades e problemas • Abrindo issues • Fork + pull requests F.biz | COMPANY CONFIDENTIAL

O Bitbucket é o nosso principal canal de comunicação F.biz | COMPANY CONFIDENTIAL

SASS Standards F.biz | COMPANY CONFIDENTIAL

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

Estrutura de diretórios Organização baseada em: • Configuração • Módulos • Layouts • Sites responsivos / temas 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.: % l c h l e - a e. paeodrnm 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.: % n m n m . ai-ae F.biz | COMPANY CONFIDENTIAL

Módulos F.biz | COMPANY CONFIDENTIAL

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

Organização dos diretórios F.biz | COMPANY CONFIDENTIAL

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

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

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

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

Layouts F.biz | COMPANY CONFIDENTIAL

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

Organização dos diretórios F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

Output F.biz | COMPANY CONFIDENTIAL

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

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

Organização dos diretórios F.biz | COMPANY CONFIDENTIAL

Wrappers F.biz | COMPANY CONFIDENTIAL

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

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

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

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

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

F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

Cores F.biz | COMPANY CONFIDENTIAL

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

Localização do arquivo _colors.scss. F.biz | COMPANY CONFIDENTIAL

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

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

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

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

Unidades F.biz | COMPANY CONFIDENTIAL

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

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

Localização do arquivo _units.scss. F.biz | COMPANY CONFIDENTIAL

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

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

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

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

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

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

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

Documentação bitbucket.com/fbiz/hyojun bitbucket.com/fbiz/hyojun.sass-standards F.biz | COMPANY CONFIDENTIAL

/ thank you F.biz | COMPANY CONFIDENTIAL

Add a comment

Related presentations

Related pages

Hyojun Sass Standards 1/2 // Speaker Deck

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 ...
Read more

Presentations by Marcelo Miranda Carneiro // Speaker Deck

Hyojun Sass Standards 2/2. Feb 27, ... Hyojun Sass Standards 1/2. Feb 19, 2014 by Marcelo Miranda Carneiro. Speaker Details Marcelo Miranda Carneiro.
Read more

Sass - Syntactically Awesome Style Sheets - Technology

1. Syntactically Awesome Style Sheets "Folhas de Estilo Sintaticamente Impressionantes" 2. Sass & Compass . 3. Pré-processadores de CSS *.scss *.sass ...
Read more

Sass: Estilo levado à sério - Technology

Sass Estilo levado à sério Gabriel Nunes Graduando de Ciência da Computação Técnico em Informática Núcleo de Tecnologia da ...
Read more

The Journal of Systems and Software - University of Utah

Table of contents for issues of The Journal of Systems and Software ... 285--294 Anonymous Setting Standards in Mainframe ... Number 1--2, July / August ...
Read more

raw.githubusercontent.com

{"packages_cache": {"https://raw.githubusercontent.com/vkocubinsky/sublime_packages/master/packages.json": [{"donate": "https://www.paypal.com/cgi-bin ...
Read more

traumatic event exposure: Topics by Science.gov

Sample records for traumatic event exposure ... 1; 2; 3; 4; 5 » « 1; 2; 3; 4; 5 » Traumatic ...
Read more