Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Style Guide Concepts
Search
Ivan Banov
July 01, 2016
Technology
6
480
Style Guide Concepts
Ivan Banov
July 01, 2016
Tweet
Share
More Decks by Ivan Banov
See All by Ivan Banov
XSS
ivanbanov
0
190
Grids Everywhere
ivanbanov
3
420
Other Decks in Technology
See All in Technology
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
270
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
270
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
210
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Applications with DynamoDB
mza
96
6.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Invisible Side of Design
smashingmag
301
51k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Docker and Python
trallard
46
3.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Transcript
STYLE GUIDE CONCEPTS Ivan Banov
@BANKFACIL IVAN BANOV FRONTEND ENGINEER
O QUE É? STYLE GUIDE
None
None
STYLE GUIDES RESOLVEM PROBLEMAS
STYLE GUIDES NÃO LIMITAM
STYLE GUIDES EVITAM PROBLEMAS
None
W H A T ?
None
None
None
None
STYLE GUIDES DEFAULTS
▸Reset ▸Tipografia ▸Paleta de cores ▸Grid ▸Botões ▸Forms ▸Listas ▸Tabelas
None
▸Toda e qualquer especificação que defina como os estilos do
produto em desenvolvimento devem ser
POR QUE? STYLE GUIDE
▸Facilidade de testar e encontrar pontos de inconsistência dos seus
estilos
▸Cuida para que o desenvolvimento de componentes seja parte de
um todo
▸Linguagem visual e contextual integrada no projeto
QUAL COMPONENTE?
QUAL COMPONENTE?
▸Pode ser complicado no começo, mas te trará paz a
longo prazo
None
X
E POR ONDE EU COMEÇO? FRONTEND
None
UX / UI * FRONTEND * BACKEND
FRAMEWORK FRONTEND DEVE SUPORTAR A UI
None
None
None
FRAMEWORK É O CÓDIGO DO STYLE GUIDE
ADAPTAR UM FRAMEWORK
None
None
None
None
SOLUÇÃO PRONTA PRÓS
▸Comunidade (- menos bugs + soluções)
▸Comunidade (- menos bugs + soluções) ▸Documentação
▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes
▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes
▸Plug and play
▸Comunidade (- menos bugs + soluções) ▸Documentação ▸Variedade de componentes
▸Plug and play ▸Ferramentas para n00bs leigos
None
MENOS É MAIS
None
None
SOLUÇÃO PRONTA CONTRAS
▸Aprendizado de como utilizar
▸Aprendizado de como utilizar ▸Se adaptar códigos desnecessário
▸Aprendizado de como utilizar ▸Se adaptar a códigos desnecessário ▸Sem
controle sobre o core do código
// vendor @import 'vendor/bootstrap'; // overrides @import 'override/fancy-theme'; // custom
@import 'mixins'; @import 'components';
DO IT YOURSELF
SOLUÇÃO CUSTOM PRÓS
▸Autonomia sobre o código
▸Autonomia sobre o código ▸Código pensado nos seus estilos
▸Autonomia sobre o código ▸Código pensado nos seus estilos ▸Produtividade
a longo prazo
▸Autonomia sobre o código ▸Código pensado nos seus estilos ▸Produtividade
a longo prazo ▸Flexibilidade
SOLUÇÃO CUSTOM CONTRAS
▸Tempo
▸Tempo ▸Pode virar uma bomba-relógio
▸Tempo ▸Pode virar uma bomba-relógio ▸Vai sentir como se o
CSS te odiasse
▸Tempo ▸Pode virar uma bomba-relógio ▸Vai sentir como se o
CSS te odiasse ▸Documentação - criar e manter
{ CSS } CODING
DESIGN » PROTÓTIPO » ESTRUTURA » CÓDIGO
None
TÉCNICAS E ESTRATÉGIAS
OOCSS OBJECT ORIENTED CSS
▸Foco no reuso de classes
▸Foco no reuso de classes ▸Classes "globais"
▸Foco no reuso de classes ▸Classes "globais" ▸Separação de estrutura
dos estilos
▸Foco no reuso de classes ▸Classes "globais" ▸Separação de estrutura
dos estilos ▸Aumenta especificidade
.box { width: 200px; margin: 0 auto; } .error {
background: red; } .big { width: 400px; }
// HTML <div class="box error big"> FAIL </div> // CSS
.box.error { background: darkred; } .box.big { width: 400px; } .box.error.big { background: black; width: 100%; }
BEM BLOCK ELEMENT MODIFIER
▸Módulos independentes
▸Módulos independentes ▸Muito verboso
None
.element__block--modifier { prop: value; }
<div class="box box--fixed"> <div class="box__head box__head--big"> Hello world! </div> <div
class="box__content"> BiiirL ! </div> </div>
.box { width: 100px; } .box--fixed { position: fixed; }
.box__head { font-size: 2em; } .box__head--big { font-size: 5em; }
// Pré-processadores .box { width: 100px; &--fixed { position: fixed;
} &__head { font-size: 2em; } &__head--big { font-size: 5em; } }
SMACSS SCALABLE AND MODULAR ARCHITECTURE FOR CSS
▸Organização do scafolding e responsabilidades
▸Organização do scafolding e responsabilidades ▸base, layout, module, state, theme
None
|- 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
ATOMIC DESIGN
▸Foco na UI
▸Foco na UI ▸"Micro responsabilidades"
▸Foco na UI ▸"Micro responsabilidades" ▸atoms, molecules, organisms, templates, pages
None
|- 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
// Modal $modalColor: red; $modalSize: 200px; // Dropdown $dropdownColor: blue;
$dropdownSize: 20px;
$color: red; $size: 200px; .modal { background: $color; width: $size;
} $color: blue; $size: 900px; .dropdown { color: $color; font-size: $size; }
// Pré-processadores ESPECIFICIDADE .element { prop: value; 1 // Modifier
&--modifier {...} 1 // Partials &__partial {...} 1 &__partial--modifier {...} 1 // States &.is-hidden {...} 2 &__partial.has-status {...} 2 }
|- 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
None
None
COMPONENTES CODING
None
SDD STYLE GUIDE DRIVEN DEVELOPMENT
STYLE GUIDE COMO PRIORIDADE PARA TODAS AS TASKS DE FRONT
E UX/UI
ANTES
▸HTML e CSS engessados
▸HTML e CSS engessados ▸Não escala
DEPOIS
▸Componentes independentes
▸Componentes independentes ▸Novos componentes são fácil de criar
▸Componentes independentes ▸Novos componentes são fácil de criar ▸Novos componentes
são construídos com base no style guide
WEB COMPONENTS
None
None
<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>
None
None
TEMPLATE ENGINES JADE, SLIM, HANDLEBARS, MUSTACHE, UNDERSCORE, ...
MV* FRAMEWORKS
None
DOCUMENTAÇÃO CODING
STATIC STYLE GUIDE
▸HTML standalone
▸HTML standalone ▸Refactors no código não geram alteração no style
guide
▸HTML standalone ▸Refactors no código não geram alteração no style
guide ▸Bom no começo...
LIVING STYLE GUIDE
▸HTML gerado automágicamente
▸HTML gerado automágicamente ▸Integração contínua
Componente PRÉ-PROCESSADORES Código .sass / .styl / .less .hbs /
.jade / .ejs .coffee
PRÉ-PROCESSADORES STYLE GUIDE APLICAÇÃO CÓDIGO COMPONENT
None
None
None
.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; } }
// 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
None
ENTÃO...
FAÇA ACONTECER
TODOS SÃO RESPONSÁVEIS
MANTENHA ESCALÁVEL
DEIXE VISÍVEL
FAÇA SER INCRÍVEL
OBRIGADO!