advertisement

Hyojun Sass Standards 2/2

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

Published on February 27, 2014

Author: marcelomirandacarneiro

Source: slideshare.net

Description

Padrão de desenvolvimento e organização de SASS para framework Hyojun, da F.biz. Esta segunda parte foca em práticas, e alguns conceitos para construção do CSS.
advertisement

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

Nomenclatura F.biz | COMPANY CONFIDENTIAL

Nomenclatura • Classes com nomes em minúsculo, separados por hífens: • .eto-rpe .rdc-odr s c i n w a p r, p o u t h l e • Nomes em inglês: • .il-ihih .utndsre t t e h g l g t, b t o - i c e t • Nomes próprios na forma original: • . i l - a e c n s o, . e s p d d s c n e t ttefl-ooc mu-eio-otn F.biz | COMPANY CONFIDENTIAL

Nomenclatura • Sempre utilizar nomes que representem o módulo: • .aiainhle nvgto-odr • .ihih-odr hglgthle • .utndsre bto-icet • Não utilizar nomes com características visuais como cor, medidas, direção, etc.: • . o - e t, . i l - l e, . o - 2 p ← RUIM cllf ttebu cl20x F.biz | COMPANY CONFIDENTIAL

Nomenclatura • Estados de módulos: • .odn .ro .ucs l a i g, e r r, s c e s • Usados sempre em conjunto: . l s e l a i g cas.odn • Nomes reservados, uso composto: • “content”, “description”, “title”, etc. • “post-content”, “product-description”, “category-title”, etc. • Lista completa na documentação; F.biz | COMPANY CONFIDENTIAL

Nomenclatura • “Wrappers” para encapsular elementos em um novo escopo • “Holders” como a base dos módulos • w a p r e h l e são usados como sufixos, ex.: rpe odr • scinwapr eto-rpe • pouthle rdc-odr F.biz | COMPANY CONFIDENTIAL

Nomenclatura Exemplo de wrapper e holder: 0. <i cas"eto-rpe" 1 dv ls=scinwapr> 0. 2 <i cas"rdc-odr> dv ls=pouthle" 0. 3 <1cas"rdc-il"Ttl<h> h ls=pouttte>íuo/1 0. 4 <i cas"rdc-ecito" dv ls=poutdsrpin> 0. 5 Lrmismdlrstae.. oe pu oo i mt. 0. 6 <dv /i> 0. 7 <dv /i> 0. <dv 8 /i> Elementos filhos usam o nome do módulo como prefixo. F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

Organização das classes F.biz | COMPANY CONFIDENTIAL

Organização das classes Para melhorar a leitura, existe uma ordem a ser seguida: • @ x e de @ n l d etn icue • propriedades do elemento • pseudo elementos • filhos e pares • variações com classes adicionais F.biz | COMPANY CONFIDENTIAL

Organização das classes 0. .oue{ 1 mdl 0. 2 0. 3 / etnseicue / xed nlds 0. 4 @xed%lchle-ae etn paeodrnm; 0. 5 @nld mxnnm; icue ii-ae 0. 6 0. 7 / poreae d ojt / rpidds o beo 0. 8 clr rd oo: e; 0. 9 1. 0 / ped eeets / suo lmno 1. 1 &hvr{..} :oe . 1. 2 1. 3 .. . F.biz | COMPANY CONFIDENTIAL

Organização das classes 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 .. . / flo eprs / ihs ae .ouecid{..} mdl-hl . +.ibig{..} sbln . / vraõscmcassaiini / aiçe o lse dcoas &atv {.. .cie . / sbeoiã d flo / orpsço e ihs .ouecid{..} mdl-hl . } F.biz | COMPANY CONFIDENTIAL

Herança e estrutura F.biz | COMPANY CONFIDENTIAL

Estrutura do CSS • Estilos apenas em classes, IDs apenas para javascript • Atenção ao aplicar estilos em tags • Tags como H à H não devem aplicar estilos diretamente 1 6 • Escopos fechados podem, ex.: • .itnm >l ls-ae i • .al-ae>t tbenm r • Evitar o uso de HACKS • Não utilizar ! m o t n iprat F.biz | COMPANY CONFIDENTIAL

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 1. 4 1. 5 %omn-tm{..} cmetie . .omn-it>l, cmetls i .omn-tm{ cmetie @xed%omn-itie; etn cmetls-tm } .omn-it{ cmetls >l { i / ..oerd d vrã sadln / . vrie a eso tnaoe mri-o:1p; agntp 0x mri-otm 0 agnbto: ; &frtcid{ :is-hl mri-o:0 agntp ; } } } F.biz | COMPANY CONFIDENTIAL

Herança no CSS • Classes criadas de acordo com o módulo • Priorizar as medidas relativas E e R M M E • Orientação à objeto com base em módulos utilizando @xed etn • Múltiplas classes usadas para situações dinâmicas, como selos, ícones, etc, ex.: • <utncas"aebto io-u-oe> bto ls=bs-utn cnbymr" F.biz | COMPANY CONFIDENTIAL

F.biz | COMPANY CONFIDENTIAL

Box modelling F.biz | COMPANY CONFIDENTIAL

Box modelling • Priorizar tamanhos fluídos nos elementos: • Técnica coluna fixa + flexível • Técnica colunas flexíveis • Garantir que os elementos ocupem o espaço esperado: • float wrapper • u e l com margin bottom l i • padding + margin F.biz | COMPANY CONFIDENTIAL

Exemplo coluna fixa + flexível F.biz | COMPANY CONFIDENTIAL

Exemplo colunas flexíveis F.biz | COMPANY CONFIDENTIAL

Exemplo sem float wrapper F.biz | COMPANY CONFIDENTIAL

Exemplo com float wrapper F.biz | COMPANY CONFIDENTIAL

Exemplo da soma de margins F.biz | COMPANY CONFIDENTIAL

Exemplo da soma de margins F.biz | COMPANY CONFIDENTIAL

Lay-outs responsivos F.biz | COMPANY CONFIDENTIAL

Lay-outs responsivos • Análise do projeto para criação dos CSS: • Estrutura é leve? 1 request (estrutura + página) • Estrutura é pesada? 2 requests (estrutura, página) • Organização no SASS: • Quais são os breakpoints? • O que é comum entre os diferentes tamanhos? = common • O que é específico para um tamanho? = ###-label F.biz | COMPANY CONFIDENTIAL

Lay-outs responsivos • Definição de estrutura “leve”: • Pouca complexidade e quantidade de linhas; • Download dos KB não supera o tempo da abertura de conexão + latência; • Definição de estrutura “pesada”: • Muitas linhas, assets em base64; • Download de KB é maior, próximas páginas navegadas estarão no cache (max-age, expires, etc.); F.biz | COMPANY CONFIDENTIAL

Exemplo estrutura “leve” F.biz | COMPANY CONFIDENTIAL

Exemplo estrutura “pesada” F.biz | COMPANY CONFIDENTIAL

Lay-outs responsivos • Características “comuns”: • Existem entre todos os breakpoints, como cores, fontes, etc. • Definição das variáveis compartilhadas em COMMON • Características “específicas”: • Existem apenas no breakpoint atual, como posicionamento, espaçamentos, layout, etc. • Sobreposição de variáveis compartilhadas em ###-LABEL (ex.: 320-mobile) F.biz | COMPANY CONFIDENTIAL

Exemplo análise módulos responsivos F.biz | COMPANY CONFIDENTIAL

Exemplo análise módulos responsivos F.biz | COMPANY CONFIDENTIAL

SASS F.biz | COMPANY CONFIDENTIAL

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

Functions Funções são usadas em situações onde apenas lógica é necessária, como cálculos, conversão de valores, etc. Ex.: 0. $aefn-ie 1p !eal; 1 bs-otsz: 6x dfut 0. @ucint-m$au,$aep-au:0 { 2 fnto oe(vle bs-xvle ) 0. 3 $ae $aefn-ie!eal; bs: bs-otsz dfut 0. 4 @f$aep-au ! 0{ i bs-xvle = 0. 5 $ae $aep-au; bs: bs-xvle 0. 6 } 0. 7 @eun(vle/$ae *1m rtr $au bs) e; 0. } 8 F.biz | COMPANY CONFIDENTIAL

Mixins Mixins são usados em situações onde a saída de CSS e/ou lógica é necessária. Ex.: 0. @ii aslt-etr$ie $e:tu,$o:tu){ 1 mxn bouecne(sz, vr re hr re 0. 2 @f$e { i vr 0. 3 tp 5% mri-o:nh$ie 2 *-.; o: 0; agntp t(sz, ) 05 0. 4 } 0. 5 @f$o { i hr 0. 6 lf:5% mri-et nh$ie 1 *-.; et 0; agnlf: t(sz, ) 05 0. 7 } 0. } 8 F.biz | COMPANY CONFIDENTIAL

Extends Extensões de grandes blocos estáticos de código. O Hyojun usa apenas placeholder selectors. Ex.: 0. %aebto { 1 bs-utn 0. 2 pdig 08e; adn: .3m 0. 3 dsly iln-lc; ipa: niebok 0. 4 fn-ie 1m otsz: e; 0. 5 tx-eoain nn; etdcrto: oe 0. 6 clr $aebto-otclr oo: bs-utnfn-oo; 0. 7 bcgon-oo:$aebto-gclr akrudclr bs-utnb-oo; 0. } 8 F.biz | COMPANY CONFIDENTIAL

Extends Abaixo, os botões terão características do “base button”: 0. 1 0. 2 0. 3 0. 4 0. 5 0. 6 0. 7 0. 8 0. 9 1. 0 .ihih-utn{ hglgtbto @xed%aebto; etn bs-utn fn-ie 12e; otsz: .5m clr $ihih-utnfn-oo; oo: hglgtbto-otclr bcgon-oo:$ihih-utnb-oo; akrudclr hglgtbto-gclr } .icetbto { dsre-utn @xed%aebto; etn bs-utn fn-ie 07e; otsz: .5m } F.biz | COMPANY CONFIDENTIAL

Extends A saída será impressa no CSS como: 0. 1 0. 2 0. 3 0. 4 0. 5 0. 6 0. 7 0. 8 0. 9 1. 0 .ihih-utn .icetbto { hglgtbto, dsre-utn ..(otúod %aebto) . cned e bs-utn } .ihih-utn{ hglgtbto fn-ie 12e; otsz: .5m .. . } .icetbto { dsre-utn fn-ie 07e; otsz: .5m } F.biz | COMPANY CONFIDENTIAL

Animations Configurações de animação via placeholder selectors: 0. %nmpoutie { 1 ai-rdc-tm 0. 2 0. 3 / OT(EAL) / U DFUT 0. 4 .ht-odrig .au,.nmio { poohle m, vle ai-cn 0. 5 @nld tasto-iigfnto(bs-nmes) icue rniintmn-ucin$aeai-ae; 0. 6 @nld tasto-rprytasom; icue rniinpoet(rnfr) 0. 7 @nld tasto-uain$atai-uain; icue rniindrto(fs-nmdrto) 0. 8 @nld tasto-ea() icue rniindly0; 0. 9 } 1. 0 .. . F.biz | COMPANY CONFIDENTIAL

Animations 0. 1 0. 2 0. 3 0. 4 0. 5 0. 6 0. 7 0. 8 0. 9 1. 0 1. 1 1. } 2 .. . .nmio {@nld tasomoii(otmcne) } ai-cn icue rnfr-rgnbto etr; / O / N &hvr.nmio { :oe ai-cn @nld tasto-iigfnto(buc-nmes) icue rniintmn-ucin$oneai-ae; @nld tasto-uain$aeai-uain; icue rniindrto(bs-nmdrto) } &hvr.ht-odrig &hvr.au { :oe poohle m, :oe vle @nld tasto-uain$atai-uain; icue rniindrto(fs-nmdrto) } 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

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Hyojun Sass Standards 2/2 // Speaker Deck

Padrão de desenvolvimento e organização de SASS para framework Hyojun, da F.biz. Esta segunda parte foca em práticas, e alguns conceitos para ...
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 - Documents

Sass (Syntactically Awesome StyleSheets) (株)永和システムマネジメント サービスプロバイディング事業部 浦嶌 啓太 Problems ...
Read more

Skýrsla stjórnar SASS - Documents

Skýrsla stjórnar SASS. Sveinn Pálsson 13. september 2010. Skipan stjórnar. Í stjórn SASS: Sveinn Pálsson formaður, ...
Read more

Sass Henno - Education - documents.tips

Esitlus Sass Henno loomingust. Autor Tauri Taliaru. Juhendaja Helja Kirber. Tartu Forseliuse Gümnaasium 12.b klass. Esitlus Sass Henno loomingust.
Read more

St11 Sass 123sw PDF - Documents

Download St11 Sass 123sw PDF. Transcript.
Read more

Professional Teaching Standards Report - Education

SME6044 Assignment 2 ... Close Share Professional Teaching Standards Report. Embed
Read more