Style Guide Concepts

Transcript

1. STYLE GUIDE CONCEPTS Ivan Banov
2. @BANKFACIL IVAN BANOV FRONTEND ENGINEER
3. O QUE É? STYLE GUIDE
6. STYLE GUIDES RESOLVEM PROBLEMAS
7. STYLE GUIDES
 NÃO LIMITAM
8. STYLE GUIDES
 EVITAM PROBLEMAS
10. W
 H
 A
 T
 ?
15. STYLE GUIDES
 DEFAULTS
16. ▸Reset ▸Tipografia ▸Paleta de cores ▸Grid ▸Botões ▸Forms ▸Listas ▸Tabelas
18. ▸Toda e qualquer especificação que defina como os estilos do produto em desenvolvimento devem ser
19. POR QUE? STYLE GUIDE
20. ▸Facilidade de testar e encontrar pontos de inconsistência dos seus estilos
21. ▸Cuida para que o desenvolvimento de componentes seja parte de um todo
22. ▸Linguagem visual e contextual integrada no projeto
23. QUAL COMPONENTE?
24. QUAL COMPONENTE?
25. ▸Pode ser complicado no começo, mas te trará paz a longo prazo
27. X
28. E POR ONDE EU COMEÇO? FRONTEND
30. UX / UI * FRONTEND * BACKEND
31. FRAMEWORK FRONTEND DEVE SUPORTAR A UI
35. FRAMEWORK É O CÓDIGO DO STYLE GUIDE
36. ADAPTAR UM FRAMEWORK
41. SOLUÇÃO PRONTA PRÓS
42. ▸Comunidade (- menos bugs + soluções)
43. ▸Comunidade (- menos bugs + soluções) ▸Documentação
44. ▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes
45. ▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes ▸Plug and play
46. ▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes ▸Plug and play ▸Ferramentas para n00bs leigos
48. MENOS É MAIS
51. SOLUÇÃO PRONTA CONTRAS
52. ▸Aprendizado de como utilizar
53. ▸Aprendizado de como utilizar ▸Se adaptar códigos desnecessário
54. ▸Aprendizado de como utilizar ▸Se adaptar a códigos desnecessário ▸Sem controle sobre o core do código
55. // vendor @import 'vendor/bootstrap'; // overrides @import 'override/fancy-theme'; // custom @import 'mixins'; @import 'components';
56. DO IT YOURSELF
57. SOLUÇÃO CUSTOM PRÓS
58. ▸Autonomia sobre o código
59. ▸Autonomia sobre o código ▸Código pensado nos seus estilos
60. ▸Autonomia sobre o código ▸Código pensado nos seus estilos ▸Produtividade a longo prazo
61. ▸Autonomia sobre o código ▸Código pensado nos seus estilos ▸Produtividade a longo prazo ▸Flexibilidade
62. SOLUÇÃO CUSTOM CONTRAS
63. ▸Tempo
64. ▸Tempo ▸Pode virar uma bomba-relógio
65. ▸Tempo ▸Pode virar uma bomba-relógio ▸Vai sentir como se o CSS te odiasse
66. ▸Tempo ▸Pode virar uma bomba-relógio ▸Vai sentir como se o CSS te odiasse ▸Documentação - criar e manter
67. { CSS } CODING
68. DESIGN » PROTÓTIPO » ESTRUTURA » CÓDIGO
70. TÉCNICAS E ESTRATÉGIAS
71. OOCSS OBJECT ORIENTED CSS
72. ▸Foco no reuso de classes
73. ▸Foco no reuso de classes ▸Classes "globais"
74. ▸Foco no reuso de classes ▸Classes "globais" ▸Separação de estrutura dos estilos
75. ▸Foco no reuso de classes ▸Classes "globais" ▸Separação de estrutura dos estilos ▸Aumenta especificidade
76. .box { width: 200px; margin: 0 auto; } .error { background: red; } .big { width: 400px; }
77. // HTML <div class="box error big"> FAIL </div> // CSS .box.error { background: darkred; } .box.big { width: 400px; } .box.error.big { background: black; width: 100%; }
78. BEM BLOCK ELEMENT MODIFIER
79. ▸Módulos independentes
80. ▸Módulos independentes ▸Muito verboso
82. .element__block--modifier { prop: value; }
83. <div class="box box--fixed"> <div class="box__head box__head--big"> Hello world! </div> <div class="box__content"> BiiirL ! </div> </div>
84. .box { width: 100px; } .box--fixed { position: fixed; } .box__head { font-size: 2em; } .box__head--big { font-size: 5em; }
85. // Pré-processadores .box { width: 100px; &--fixed { position: fixed; } &__head { font-size: 2em; } &__head--big { font-size: 5em; } }
86. SMACSS SCALABLE AND MODULAR ARCHITECTURE FOR CSS
87. ▸Organização do scafolding
 e responsabilidades
88. ▸Organização do scafolding
 e responsabilidades ▸base, layout, module, state, theme
90. |- 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
91. ATOMIC DESIGN
92. ▸Foco na UI
93. ▸Foco na UI ▸"Micro responsabilidades"
94. ▸Foco na UI ▸"Micro responsabilidades" ▸atoms, molecules, organisms, templates, pages
96. |- 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
97. // Modal $modalColor: red; $modalSize: 200px; // Dropdown $dropdownColor: blue; $dropdownSize: 20px;
98. $color: red; $size: 200px; .modal { background: $color; width: $size; } $color: blue; $size: 900px; .dropdown { color: $color; font-size: $size; }
99. // Pré-processadores ESPECIFICIDADE .element { prop: value; 1 // Modifier &--modifier {...} 1 // Partials &__partial {...} 1 &__partial--modifier {...} 1 // States &.is-hidden {...} 2 &__partial.has-status {...} 2 }
100. |- 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
103. COMPONENTES CODING
105. SDD STYLE GUIDE DRIVEN DEVELOPMENT
106. STYLE GUIDE COMO PRIORIDADE PARA TODAS AS TASKS DE FRONT E UX/UI
107. ANTES
108. ▸HTML e CSS engessados
109. ▸HTML e CSS engessados ▸Não escala
110. DEPOIS
111. ▸Componentes independentes
112. ▸Componentes independentes ▸Novos componentes são fácil de criar
113. ▸Componentes independentes ▸Novos componentes são fácil de criar ▸Novos componentes são construídos com base no style guide
114. WEB COMPONENTS
117. <script src="webcomponentsjs/webcomponents.js"> </script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="app-avatar.html"> <dom-module id="app-user"> <template> <app-avatar user="{{ name }}"></app-avatar> </template> <script> Polymer({ is: 'app-user' }); </script> </dom-module>
120. TEMPLATE ENGINES JADE, SLIM, HANDLEBARS, MUSTACHE, UNDERSCORE, ...
121. MV* FRAMEWORKS
123. DOCUMENTAÇÃO CODING
124. STATIC STYLE GUIDE
125. ▸HTML standalone
126. ▸HTML standalone ▸Refactors no código não geram alteração no style guide
127. ▸HTML standalone ▸Refactors no código não geram alteração no style guide ▸Bom no começo...
128. LIVING STYLE GUIDE
129. ▸HTML gerado automágicamente
130. ▸HTML gerado automágicamente ▸Integração contínua
131. Componente PRÉ-PROCESSADORES Código .sass / .styl / .less .hbs / .jade / .ejs .coffee
132. PRÉ-PROCESSADORES STYLE GUIDE APLICAÇÃO CÓDIGO COMPONENT
136. .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; } }
137. // 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
139. ENTÃO...
140. FAÇA ACONTECER
141. TODOS SÃO RESPONSÁVEIS
142. MANTENHA ESCALÁVEL
143. DEIXE VISÍVEL
144. FAÇA SER INCRÍVEL
145. OBRIGADO!