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
470
Style Guide Concepts
Ivan Banov
July 01, 2016
Tweet
Share
More Decks by Ivan Banov
See All by Ivan Banov
XSS
ivanbanov
0
170
Grids Everywhere
ivanbanov
3
410
Other Decks in Technology
See All in Technology
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
260
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
340
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
240
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
The XZ Backdoor Story
fr0gger
0
3.6k
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
20240912 JJUGナイトセミナー
mii1004
0
140
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Debugging Ruby Performance
tmm1
72
12k
Raft: Consensus for Rubyists
vanstee
135
6.5k
BBQ
matthewcrist
83
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Being A Developer After 40
akosma
84
590k
Code Review Best Practice
trishagee
62
16k
Unsuck your backbone
ammeep
667
57k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Code Reviewing Like a Champion
maltzj
517
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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!