Download - Construindo um framework CSS
![Page 1: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/1.jpg)
FRAMEWORK CSSIniciando a construção de um framework
A TEORIA
![Page 2: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/2.jpg)
Diego Eis
@diegoeis@tableless
![Page 3: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/3.jpg)
![Page 4: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/4.jpg)
Por que criar um framework?
![Page 5: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/5.jpg)
PrototipaçãoA equipe precisa criar protótipos funcionais rápidos
com a estruturação parecida com a final.
![Page 6: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/6.jpg)
PadronizaçãoPadronização de estrutura, elementos, código,
comportamentos, experiências etc etc etc.
![Page 7: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/7.jpg)
ProdutividadeMenos tempo desenhando ou codificando cenários já
conhecidos.
![Page 8: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/8.jpg)
ManutençãoFacilitar a manutenção diminuindo o tempo de
retrabalho.
![Page 9: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/9.jpg)
Por que NÃO criar um framework?
![Page 10: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/10.jpg)
Layouts muito diferentesLayouts ou elementos com a estrutura e visual
diferentes.
![Page 11: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/11.jpg)
O código não para de crescer
O código vai ficar cada vez maior, cada vez mais pesado, com possibilidade de conflitos.
![Page 12: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/12.jpg)
TempoVocê vai precisar dedicar sua equipe integralmente para cuidar do framework. Pelo menos no início do
projeto.
![Page 13: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/13.jpg)
Por que já existem outros no mercado
Os que existem podem te ajudar melhor, além de contar com documentação e manual prontos.
![Page 14: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/14.jpg)
Locaweb Style
![Page 15: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/15.jpg)
Precisávamos resolver alguns
problemas
![Page 16: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/16.jpg)
O processoProcessos incompletos prejudicam a qualidade do
código, do produto e da entrega.
![Page 17: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/17.jpg)
Excesso de projetosSão diversos projetos ao mesmo tempo, com equipes
trabalhando paralelamente.
![Page 18: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/18.jpg)
Liberar gargalosOs times de design e de front-end eram gargalos
constantes. Precisávamos agilizar o processo.
![Page 19: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/19.jpg)
Conversamos com o pessoal de UX
O processo se inicia lá. São eles que pensarão nos comportamentos, design etc.
![Page 20: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/20.jpg)
Burocracia
![Page 21: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/21.jpg)
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.
![Page 22: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/22.jpg)
Escolhemos a baseIríamos usar Bootstrap e JQuery. Não iríamos utilizar
nenhum pré-processador como LESS ou SASS.
![Page 23: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/23.jpg)
Customização de design e comportamentos
Pegamos o layout criado por UX e começamos a customizar ou criar elementos.
![Page 24: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/24.jpg)
Padronização de códigoIniciamos um trabalho de nomenclatura e
padronização de escrita de código.
![Page 25: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/25.jpg)
Um exemplo: CSS incremental
Incremente classes para ajudar na customização de elementos.
![Page 26: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/26.jpg)
.btn .btn
.btn-large
.btn
.btn-large
.btn-primary
.btn
.btn-large
.btn-primary
.ico-star
<a href=”#”>Um botão</a>
![Page 27: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/27.jpg)
Outro exemplo: Javascript organizado
Se o javascript não estiver bem estruturado, ele vai puxar seu pé na cama.
![Page 28: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/28.jpg)
$(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
![Page 29: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/29.jpg)
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.
![Page 30: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/30.jpg)
Cuidados
![Page 31: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/31.jpg)
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.
![Page 32: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/32.jpg)
O designer é seu amigoPadrõ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.
![Page 33: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/33.jpg)
Nomenclatura bem definida
Misturar nomes em inglês com portugues confunde. Nomes grandes confundem.
Vai usar traço, underline ou camelCase?
![Page 34: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/34.jpg)
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.
![Page 35: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/35.jpg)
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.
![Page 36: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/36.jpg)
Cresça com paciênciaNão coloque plugins que você ACHA que vai usar. Não
solucione problemas que você ACHA que vão surgir.
![Page 37: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/37.jpg)
A exceção não é padrãoQuando há muitas exceções, nenhum padrão está
sendo criado. Designers e devs front-end precisam usar elementos já criados para montar layouts.
![Page 38: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/38.jpg)
Work in ProgressSeu framework nunca estará pronto. Você sempre vai
criar, refazer ou modificar as features.
![Page 39: Construindo um framework CSS](https://reader034.vdocuments.pub/reader034/viewer/2022042607/553942ff4a7959c36e8b4948/html5/thumbnails/39.jpg)
AMPLEXOS
Diego Eis
@diegoeis @tablelesstableless.com.br