O documento discute como iniciar a construção de um framework CSS, incluindo por que criar ou não criar um framework, como escolher uma boa base, padronizar nomenclatura e código, e cuidados como manter uma documentação atualizada à medida que o framework evolui.

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

2. Diego Eis
@diegoeis
@tableless

4. Por que criar um
framework?

5. Prototipação
A equipe precisa criar protótipos funcionais rápidos
com a estruturação parecida com a final.

6. Padronização
Padronização de estrutura, elementos, código,
comportamentos, experiências etc etc etc.

7. Produtividade
Menos tempo desenhando ou codificando cenários já
conhecidos.

8. Manutenção
Facilitar a manutenção diminuindo o tempo de
retrabalho.

9. Por que NÃO criar um
framework?

10. Layouts muito diferentes
Layouts ou elementos com a estrutura e visual
diferentes.

11. O código não para de
crescer
O código vai ficar cada vez maior, cada vez mais
pesado, com possibilidade de conflitos.

12. Tempo
Você vai precisar dedicar sua equipe integralmente
para cuidar do framework. Pelo menos no início do
projeto.

13. Por que já existem outros
no mercado
Os que existem podem te ajudar melhor, além de
contar com documentação e manual prontos.

14. Locaweb Style

15. Precisávamos
resolver alguns
problemas

16. O processo
Processos incompletos prejudicam a qualidade do
código, do produto e da entrega.

17. Excesso de projetos
São diversos projetos ao mesmo tempo, com equipes
trabalhando paralelamente.

18. Liberar gargalos
Os times de design e de front-end eram gargalos
constantes. Precisávamos agilizar o processo.

19. Conversamos com o
pessoal de UX
O processo se inicia lá. São eles que pensarão nos
comportamentos, design etc.

20. Burocracia

21. 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.

22. Escolhemos a base
Iríamos usar Bootstrap e JQuery. Não iríamos utilizar
nenhum pré-processador como LESS ou SASS.

23. Customização de design e
comportamentos
Pegamos o layout criado por UX e começamos a
customizar ou criar elementos.

24. Padronização de código
Iniciamos um trabalho de nomenclatura e
padronização de escrita de código.

25. Um exemplo:
CSS incremental
Incremente classes para ajudar na customização de
elementos.

26. .btn .btn
.btn-large
.btn
.btn-large
.btn-primary
.btn
.btn-large
.btn-primary
.ico-star
<a href=”#”>Um botão</a>

27. Outro exemplo:
Javascript organizado
Se o javascript não estiver bem estruturado, ele vai
puxar seu pé na cama.

28. $(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

29. 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.

30. Cuidados

31. 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.

32. 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.

33. Nomenclatura bem
definida
Misturar nomes em inglês com portugues confunde.
Nomes grandes confundem.
Vai usar traço, underline ou camelCase?

34. 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.

35. 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.

36. 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.

37. 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.

38. Work in Progress
Seu framework nunca estará pronto. Você sempre vai
criar, refazer ou modificar as features.

39. AMPLEXOS
Diego Eis
@diegoeis @tableless
tableless.com.br