framework css - static.eventials.com · prototipação a equipe precisa criar protótipos...
TRANSCRIPT
PrototipaçãoA equipe precisa criar protótipos funcionais rápidos
com a estruturação parecida com a final.
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.
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.
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.
.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.
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.