Construindo um framework CSS

3,033 views

Published on

Published in: Technology

Construindo um framework CSS

  1. 1. FRAMEWORK CSSIniciando a construção de um frameworkA TEORIA
  2. 2. Diego Eis@diegoeis@tableless
  3. 3. Por que criar umframework?
  4. 4. PrototipaçãoA equipe precisa criar protótipos funcionais rápidoscom a estruturação parecida com a final.
  5. 5. PadronizaçãoPadronização de estrutura, elementos, código,comportamentos, experiências etc etc etc.
  6. 6. ProdutividadeMenos tempo desenhando ou codificando cenários jáconhecidos.
  7. 7. ManutençãoFacilitar a manutenção diminuindo o tempo deretrabalho.
  8. 8. Por que NÃO criar umframework?
  9. 9. Layouts muito diferentesLayouts ou elementos com a estrutura e visualdiferentes.
  10. 10. O código não para decrescerO código vai ficar cada vez maior, cada vez maispesado, com possibilidade de conflitos.
  11. 11. TempoVocê vai precisar dedicar sua equipe integralmentepara cuidar do framework. Pelo menos no início doprojeto.
  12. 12. Por que já existem outrosno mercadoOs que existem podem te ajudar melhor, além decontar com documentação e manual prontos.
  13. 13. Locaweb Style
  14. 14. Precisávamosresolver algunsproblemas
  15. 15. O processoProcessos incompletos prejudicam a qualidade docódigo, do produto e da entrega.
  16. 16. Excesso de projetosSão diversos projetos ao mesmo tempo, com equipestrabalhando paralelamente.
  17. 17. Liberar gargalosOs times de design e de front-end eram gargalosconstantes. Precisávamos agilizar o processo.
  18. 18. Conversamos com opessoal de UXO processo se inicia lá. São eles que pensarão noscomportamentos, design etc.
  19. 19. Burocracia
  20. 20. Conversamos com opessoal de Back-endEles terão contato direto com o código front-end etambém poderão implementar algo sem depender deninguém.
  21. 21. Escolhemos a baseIríamos usar Bootstrap e JQuery. Não iríamos utilizarnenhum pré-processador como LESS ou SASS.
  22. 22. Customização de design ecomportamentosPegamos o layout criado por UX e começamos acustomizar ou criar elementos.
  23. 23. Padronização de códigoIniciamos um trabalho de nomenclatura epadronização de escrita de código.
  24. 24. Um exemplo:CSS incrementalIncremente classes para ajudar na customização deelementos.
  25. 25. .btn .btn.btn-large.btn.btn-large.btn-primary.btn.btn-large.btn-primary.ico-star<a href=”#”>Um botão</a>
  26. 26. Outro exemplo:Javascript organizadoSe o javascript não estiver bem estruturado, ele vaipuxar seu pé na cama.
  27. 27. $(window).load(function() {window.locastyle = new Locastyle();locastyle.base.init($(document));});Aqui iniciamos o objeto Locastyle, que vaicarregar as funções do projeto.init.js
  28. 28. 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.jsAqui chamamos e executamos todas asfunções do projeto.
  29. 29. Cuidados
  30. 30. Escolha um bomframework para sua baseVocê não precisa começar nada do zero. Mas sua baseprecisa ser firme para você crescer.
  31. 31. 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 doselementos básicos: GRID, botões, tipografia, espaços emedidas.
  32. 32. Nomenclatura bemdefinidaMisturar nomes em inglês com portugues confunde.Nomes grandes confundem.Vai usar traço, underline ou camelCase?
  33. 33. Faça código reutilizáveldesde o inícioUm framework é como um quebra cabeças, onde vocêjunta as peças para criar novas formas e estruturas.
  34. 34. Tenha uma documentaçãoou um manualUma documentação ou um manual com exemplos vaiajudar a adoção do framework em novos projetos.
  35. 35. Cresça com paciênciaNão coloque plugins que você ACHA que vai usar. Nãosolucione problemas que você ACHA que vão surgir.
  36. 36. A exceção não é padrãoQuando há muitas exceções, nenhum padrão estásendo criado. Designers e devs front-end precisamusar elementos já criados para montar layouts.
  37. 37. Work in ProgressSeu framework nunca estará pronto. Você sempre vaicriar, refazer ou modificar as features.
  38. 38. AMPLEXOSDiego Eis@diegoeis @tablelesstableless.com.br

×