×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
STYLE GUIDE CONCEPTS Ivan Banov
Slide 2
Slide 2 text
@BANKFACIL IVAN BANOV FRONTEND ENGINEER
Slide 3
Slide 3 text
O QUE É? STYLE GUIDE
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
STYLE GUIDES RESOLVEM PROBLEMAS
Slide 7
Slide 7 text
STYLE GUIDES NÃO LIMITAM
Slide 8
Slide 8 text
STYLE GUIDES EVITAM PROBLEMAS
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
W H A T ?
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
STYLE GUIDES DEFAULTS
Slide 16
Slide 16 text
▸Reset ▸Tipografia ▸Paleta de cores ▸Grid ▸Botões ▸Forms ▸Listas ▸Tabelas
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
▸Toda e qualquer especificação que defina como os estilos do produto em desenvolvimento devem ser
Slide 19
Slide 19 text
POR QUE? STYLE GUIDE
Slide 20
Slide 20 text
▸Facilidade de testar e encontrar pontos de inconsistência dos seus estilos
Slide 21
Slide 21 text
▸Cuida para que o desenvolvimento de componentes seja parte de um todo
Slide 22
Slide 22 text
▸Linguagem visual e contextual integrada no projeto
Slide 23
Slide 23 text
QUAL COMPONENTE?
Slide 24
Slide 24 text
QUAL COMPONENTE?
Slide 25
Slide 25 text
▸Pode ser complicado no começo, mas te trará paz a longo prazo
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
X
Slide 28
Slide 28 text
E POR ONDE EU COMEÇO? FRONTEND
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
UX / UI * FRONTEND * BACKEND
Slide 31
Slide 31 text
FRAMEWORK FRONTEND DEVE SUPORTAR A UI
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
FRAMEWORK É O CÓDIGO DO STYLE GUIDE
Slide 36
Slide 36 text
ADAPTAR UM FRAMEWORK
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
SOLUÇÃO PRONTA PRÓS
Slide 42
Slide 42 text
▸Comunidade (- menos bugs + soluções)
Slide 43
Slide 43 text
▸Comunidade (- menos bugs + soluções) ▸Documentação
Slide 44
Slide 44 text
▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes
Slide 45
Slide 45 text
▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes ▸Plug and play
Slide 46
Slide 46 text
▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes ▸Plug and play ▸Ferramentas para n00bs leigos
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
MENOS É MAIS
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
SOLUÇÃO PRONTA CONTRAS
Slide 52
Slide 52 text
▸Aprendizado de como utilizar
Slide 53
Slide 53 text
▸Aprendizado de como utilizar ▸Se adaptar códigos desnecessário
Slide 54
Slide 54 text
▸Aprendizado de como utilizar ▸Se adaptar a códigos desnecessário ▸Sem controle sobre o core do código
Slide 55
Slide 55 text
// vendor @import 'vendor/bootstrap'; // overrides @import 'override/fancy-theme'; // custom @import 'mixins'; @import 'components';
Slide 56
Slide 56 text
DO IT YOURSELF
Slide 57
Slide 57 text
SOLUÇÃO CUSTOM PRÓS
Slide 58
Slide 58 text
▸Autonomia sobre o código
Slide 59
Slide 59 text
▸Autonomia sobre o código ▸Código pensado nos seus estilos
Slide 60
Slide 60 text
▸Autonomia sobre o código ▸Código pensado nos seus estilos ▸Produtividade a longo prazo
Slide 61
Slide 61 text
▸Autonomia sobre o código ▸Código pensado nos seus estilos ▸Produtividade a longo prazo ▸Flexibilidade
Slide 62
Slide 62 text
SOLUÇÃO CUSTOM CONTRAS
Slide 63
Slide 63 text
▸Tempo
Slide 64
Slide 64 text
▸Tempo ▸Pode virar uma bomba-relógio
Slide 65
Slide 65 text
▸Tempo ▸Pode virar uma bomba-relógio ▸Vai sentir como se o CSS te odiasse
Slide 66
Slide 66 text
▸Tempo ▸Pode virar uma bomba-relógio ▸Vai sentir como se o CSS te odiasse ▸Documentação - criar e manter
Slide 67
Slide 67 text
{ CSS } CODING
Slide 68
Slide 68 text
DESIGN » PROTÓTIPO » ESTRUTURA » CÓDIGO
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
TÉCNICAS E ESTRATÉGIAS
Slide 71
Slide 71 text
OOCSS OBJECT ORIENTED CSS
Slide 72
Slide 72 text
▸Foco no reuso de classes
Slide 73
Slide 73 text
▸Foco no reuso de classes ▸Classes "globais"
Slide 74
Slide 74 text
▸Foco no reuso de classes ▸Classes "globais" ▸Separação de estrutura dos estilos
Slide 75
Slide 75 text
▸Foco no reuso de classes ▸Classes "globais" ▸Separação de estrutura dos estilos ▸Aumenta especificidade
Slide 76
Slide 76 text
.box { width: 200px; margin: 0 auto; } .error { background: red; } .big { width: 400px; }
Slide 77
Slide 77 text
// HTML
FAIL
// CSS .box.error { background: darkred; } .box.big { width: 400px; } .box.error.big { background: black; width: 100%; }
Slide 78
Slide 78 text
BEM BLOCK ELEMENT MODIFIER
Slide 79
Slide 79 text
▸Módulos independentes
Slide 80
Slide 80 text
▸Módulos independentes ▸Muito verboso
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
.element__block--modifier { prop: value; }
Slide 83
Slide 83 text
Hello world!
BiiirL !
Slide 84
Slide 84 text
.box { width: 100px; } .box--fixed { position: fixed; } .box__head { font-size: 2em; } .box__head--big { font-size: 5em; }
Slide 85
Slide 85 text
// Pré-processadores .box { width: 100px; &--fixed { position: fixed; } &__head { font-size: 2em; } &__head--big { font-size: 5em; } }
Slide 86
Slide 86 text
SMACSS SCALABLE AND MODULAR ARCHITECTURE FOR CSS
Slide 87
Slide 87 text
▸Organização do scafolding e responsabilidades
Slide 88
Slide 88 text
▸Organização do scafolding e responsabilidades ▸base, layout, module, state, theme
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
|- base/ |- _default.scss |- _reset.scss |- layout/ |- _grid.scss |-_header.scss |-_footer.scss |- modules/ |-_btn.scss |-_alert.scss |- states/ |-_is-disabled.scss |-_is-hidden.scss |- themes/ |-_blackfriday.scss _application.scss
Slide 91
Slide 91 text
ATOMIC DESIGN
Slide 92
Slide 92 text
▸Foco na UI
Slide 93
Slide 93 text
▸Foco na UI ▸"Micro responsabilidades"
Slide 94
Slide 94 text
▸Foco na UI ▸"Micro responsabilidades" ▸atoms, molecules, organisms, templates, pages
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
|- utilities/ |- reset.styl |- grid.styl |- atoms/ |- buttons.styl |- inputs.styl |- molecules/ |- alert.styl |- search-form.styl |- organisms/ |- header.styl |- footer.styl |- templates/ |- default.styl |- promo.styl |- about.styl |- pages/ |- index.styl application.styl
Slide 97
Slide 97 text
// Modal $modalColor: red; $modalSize: 200px; // Dropdown $dropdownColor: blue; $dropdownSize: 20px;
Slide 98
Slide 98 text
$color: red; $size: 200px; .modal { background: $color; width: $size; } $color: blue; $size: 900px; .dropdown { color: $color; font-size: $size; }
Slide 99
Slide 99 text
// Pré-processadores ESPECIFICIDADE .element { prop: value; 1 // Modifier &--modifier {...} 1 // Partials &__partial {...} 1 &__partial--modifier {...} 1 // States &.is-hidden {...} 2 &__partial.has-status {...} 2 }
Slide 100
Slide 100 text
|- mixins/ |- center.styl |- media.styl |- helpers/ |- visibility.styl |- base/ |- colors.styl |- images.styl |- components/ |- modal.styl |- dropdown.styl |- layout/ |- header.styl |- footer.styl |- pages/ |- about.styl |- map.styl |- themes/ |- blackfriday.styl
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
COMPONENTES CODING
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
SDD STYLE GUIDE DRIVEN DEVELOPMENT
Slide 106
Slide 106 text
STYLE GUIDE COMO PRIORIDADE PARA TODAS AS TASKS DE FRONT E UX/UI
Slide 107
Slide 107 text
ANTES
Slide 108
Slide 108 text
▸HTML e CSS engessados
Slide 109
Slide 109 text
▸HTML e CSS engessados ▸Não escala
Slide 110
Slide 110 text
DEPOIS
Slide 111
Slide 111 text
▸Componentes independentes
Slide 112
Slide 112 text
▸Componentes independentes ▸Novos componentes são fácil de criar
Slide 113
Slide 113 text
▸Componentes independentes ▸Novos componentes são fácil de criar ▸Novos componentes são construídos com base no style guide
Slide 114
Slide 114 text
WEB COMPONENTS
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
Polymer({ is: 'app-user' });
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
TEMPLATE ENGINES JADE, SLIM, HANDLEBARS, MUSTACHE, UNDERSCORE, ...
Slide 121
Slide 121 text
MV* FRAMEWORKS
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
DOCUMENTAÇÃO CODING
Slide 124
Slide 124 text
STATIC STYLE GUIDE
Slide 125
Slide 125 text
▸HTML standalone
Slide 126
Slide 126 text
▸HTML standalone ▸Refactors no código não geram alteração no style guide
Slide 127
Slide 127 text
▸HTML standalone ▸Refactors no código não geram alteração no style guide ▸Bom no começo...
Slide 128
Slide 128 text
LIVING STYLE GUIDE
Slide 129
Slide 129 text
▸HTML gerado automágicamente
Slide 130
Slide 130 text
▸HTML gerado automágicamente ▸Integração contínua
Slide 131
Slide 131 text
Componente PRÉ-PROCESSADORES Código .sass / .styl / .less .hbs / .jade / .ejs .coffee
Slide 132
Slide 132 text
PRÉ-PROCESSADORES STYLE GUIDE APLICAÇÃO CÓDIGO COMPONENT
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
.button { background: darkGrey; padding: 10px 20px; color: white; font: 16px Helvetica; border-radius: 3px; &:hover { background: grey; } &:disabled { background: lightGrey; } &.primary { background: green; } &.remove { background: red; } }
Slide 137
Slide 137 text
// Botão básico // // :hover - Botão ficara em highlight // :disabled - Cor cinza opaco com opacidade // // .primary - Botão para todas as ações básicas // .remove - Botão para negações ou remoções
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
ENTÃO...
Slide 140
Slide 140 text
FAÇA ACONTECER
Slide 141
Slide 141 text
TODOS SÃO RESPONSÁVEIS
Slide 142
Slide 142 text
MANTENHA ESCALÁVEL
Slide 143
Slide 143 text
DEIXE VISÍVEL
Slide 144
Slide 144 text
FAÇA SER INCRÍVEL
Slide 145
Slide 145 text
OBRIGADO!