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