Construindo um framework CSS
-
Upload
diego-eis -
Category
Technology
-
view
2.178 -
download
1
description
Transcript of Construindo um framework CSS
FRAMEWORK CSSIniciando a construção de um framework
A TEORIA
Diego Eis
@diegoeis@tableless
Por que criar um framework?
PrototipaçãoA equipe precisa criar protótipos funcionais rápidos
com a estruturação parecida com a final.
PadronizaçãoPadronização de estrutura, elementos, código,
comportamentos, experiências etc etc etc.
ProdutividadeMenos tempo desenhando ou codificando cenários já
conhecidos.
ManutençãoFacilitar a manutenção diminuindo o tempo de
retrabalho.
Por que NÃO criar um framework?
Layouts muito diferentesLayouts 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.
TempoVocê 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 processoProcessos incompletos prejudicam a qualidade do
código, do produto e da entrega.
Excesso de projetosSão diversos projetos ao mesmo tempo, com equipes
trabalhando paralelamente.
Liberar gargalosOs 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 baseIrí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ódigoIniciamos 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 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.
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ênciaNã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ãoQuando 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 ProgressSeu framework nunca estará pronto. Você sempre vai
criar, refazer ou modificar as features.
AMPLEXOS
Diego Eis
@diegoeis @tablelesstableless.com.br