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
180
Grids Everywhere
ivanbanov
3
410
Other Decks in Technology
See All in Technology
Microsoft の SSE の現在地
skmkzyk
0
240
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
160
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
1
570
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
220
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
16
4.8k
React ABC Questions
hirotomoyamada
0
580
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
360
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
840
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
530
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
280
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
130
AZ 名とAZ ID の違いを 何度でも言うよ
miu_crescent
PRO
0
110
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Adopting Sorbet at Scale
ufuk
76
9.3k
Building Applications with DynamoDB
mza
94
6.3k
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
We Have a Design System, Now What?
morganepeng
52
7.5k
The Cult of Friendly URLs
andyhume
78
6.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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!