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
Construindo um framework CSS - A Teoria
Search
Diego Eis
April 22, 2013
Programming
4
290
Construindo um framework CSS - A Teoria
Entenda a teoria e o conceito de construção de um framework CSS.
Diego Eis
April 22, 2013
Tweet
Share
More Decks by Diego Eis
See All by Diego Eis
Carreira de Product Manager em 18 minutos
diegoeis
1
1.5k
O que é o Product Oversee
diegoeis
0
4.4k
Gestão Moderna de Produtos/Serviços Digitais
diegoeis
4
19k
Métricas, Indicadores e Comportamento do Usuário
diegoeis
2
4.8k
Service Dominant Logic - S-D Logic em Produtos Digitais
diegoeis
0
1.4k
Métricas para times Ágeis usando Estatística Básica
diegoeis
0
460
O básico sobre Web Semântica, JSON-LD e Linked Data
diegoeis
2
210
A falácia do Dev Full Stack e organização de quipes
diegoeis
0
240
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
diegoeis
2
190
Other Decks in Programming
See All in Programming
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
450
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
810
Formの複雑さに立ち向かう
bmthd
1
890
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
210
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
190
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
220
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
850
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Being A Developer After 40
akosma
89
590k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Faster Mobile Websites
deanohume
306
31k
Gamification - CAS2011
davidbonilla
80
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
Transcript
FRAMEWORK CSS Iniciando a construção de um framework A TEORIA
Diego Eis @diegoeis @tableless
None
Por que criar um framework?
Prototipação A equipe precisa criar protótipos funcionais rápidos com a
estruturação parecida com a final.
Padronização Padronização de estrutura, elementos, código, comportamentos, experiências etc etc
etc.
Produtividade Menos tempo desenhando ou codificando cenários já conhecidos.
Manutenção Facilitar a manutenção diminuindo o tempo de retrabalho.
Por que NÃO criar um framework?
Layouts muito diferentes Layouts ou elementos com a estrutura e
visual diferentes.
O código não para de crescer O código vai ficar
cada vez maior, cada vez mais pesado, com possibilidade de conflitos.
Tempo Você vai precisar dedicar sua equipe integralmente para cuidar
do framework. Pelo menos no início do projeto.
Por que já existem outros no mercado Os que existem
podem te ajudar melhor, além de contar com documentação e manual prontos.
Locaweb Style
Precisávamos resolver alguns problemas
O processo Processos incompletos prejudicam a qualidade do código, do
produto e da entrega.
Excesso de projetos São diversos projetos ao mesmo tempo, com
equipes trabalhando paralelamente.
Liberar gargalos Os times de design e de front-end eram
gargalos constantes. Precisávamos agilizar o processo.
Conversamos com o pessoal de UX O processo se inicia
lá. São eles que pensarão nos comportamentos, design etc.
Burocracia
Conversamos com o pessoal de Back-end Eles terão contato direto
com o código front-end e também poderão implementar algo sem depender de ninguém.
Escolhemos a base Iríamos usar Bootstrap e JQuery. Não iríamos
utilizar nenhum pré-processador como LESS ou SASS.
Customização de design e comportamentos Pegamos o layout criado por
UX e começamos a customizar ou criar elementos.
Padronização de código Iniciamos um trabalho de nomenclatura e padronização
de escrita de código.
Um exemplo: CSS incremental Incremente classes para ajudar na customização
de elementos.
.btn .btn .btn-large .btn .btn-large .btn-primary .btn .btn-large .btn-primary .ico-star
<a href=”#”>Um botão</a>
Outro exemplo: Javascript organizado Se o javascript não estiver bem
estruturado, ele vai puxar seu pé na cama.
$(window).load(function() { window.locastyle = new Locastyle(); locastyle.base.init($(document)); }); Aqui iniciamos
o objeto Locastyle, que vai carregar as funções do projeto. init.js
Locastyle = (function() { Locastyle.prototype.base = { init: function (dom_scope)
{ this.toggleTextOnClick(dom_scope); this.toggleTextOnHover(dom_scope); this.datePickerSetup(dom_scope, this.datePickerOptions); this.numbersOnly(dom_scope); this.activateCollapseOnShown(dom_scope); this.deactivateCollapseOnHide(dom_scope); this.htmlForceClass(dom_scope); this.disableClass(dom_scope); this.classParentLiMenu(dom_scope); this.modalAutoFocus(dom_scope); this.preventDefaultOnDisabled(dom_scope); this.openCollapsesWithError(dom_scope); this.autoOpenModal(dom_scope); this.pathWayStepCounter(dom_scope); this.setListDetailSeparator(); this.advancedSearchValueHandler(dom_scope); this.toggleChild(dom_scope); this.toggleChildValue(dom_scope); this.inputDataValue(dom_scope); this.carouselCounter(dom_scope); this.initCustomSelect(dom_scope); this.collapseSetAnchor(); this.notificationInfoSet(); this.notificationInfoHandler(); this.minShortcutsCookieSetter(); this.minShortcutsCookieHandler(); this.coverAllLink(dom_scope); this.linkPreventDefault(); this.popover(dom_scope); }, script.js Aqui chamamos e executamos todas as funções do projeto.
Cuidados
Escolha um bom framework para sua base Você não precisa
começar nada do zero. Mas sua base precisa ser firme para você crescer.
O designer é seu amigo Padrões visuais andam junto com
os padrões de código. Defina com o designer quais serão os padrões dos elementos básicos: GRID, botões, tipografia, espaços e medidas.
Nomenclatura bem definida Misturar nomes em inglês com portugues confunde.
Nomes grandes confundem. Vai usar traço, underline ou camelCase?
Faça código reutilizável desde o início Um framework é como
um quebra cabeças, onde você junta as peças para criar novas formas e estruturas.
Tenha uma documentação ou um manual Uma documentação ou um
manual com exemplos vai ajudar a adoção do framework em novos projetos.
Cresça com paciência Não coloque plugins que você ACHA que
vai usar. Não solucione problemas que você ACHA que vão surgir.
A exceção não é padrão Quando há muitas exceções, nenhum
padrão está sendo criado. Designers e devs front-end precisam usar elementos já criados para montar layouts.
Work in Progress Seu framework nunca estará pronto. Você sempre
vai criar, refazer ou modificar as features.
AMPLEXOS Diego Eis @diegoeis @tableless tableless.com.br