FRAMEWORK CSS Iniciando a construção de um framework A TEORIA

Diego Eis @diegoeis @tableless

No content

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 Um botão

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