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
460
Style Guide Concepts
Ivan Banov
July 01, 2016
Tweet
Share
More Decks by Ivan Banov
See All by Ivan Banov
XSS
ivanbanov
0
160
Grids Everywhere
ivanbanov
3
390
Other Decks in Technology
See All in Technology
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
120
反実仮想機械学習とは何か
usaito
PRO
7
2.3k
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
340
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
0
220
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
0
170
0→1開発における技術選定において一番大切なこと
bicstone
1
330
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
オブザーバビリティの Primary Signals
onk
PRO
0
550
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Music & Morning Musume
bryan
41
5.6k
Designing Experiences People Love
moore
136
23k
A Tale of Four Properties
chriscoyier
150
22k
Gamification - CAS2011
davidbonilla
76
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
YesSQL, Process and Tooling at Scale
rocio
163
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
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!