Construindo um framework CSS
Upcoming SlideShare
Loading in...5
×
 

Construindo um framework CSS

on

  • 1,995 views

 

Statistics

Views

Total Views
1,995
Views on SlideShare
1,894
Embed Views
101

Actions

Likes
8
Downloads
44
Comments
0

4 Embeds 101

http://www.seoflorianopolis.com.br 81
http://seoflorianopolis.com.br 16
https://twitter.com 3
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Construindo um framework CSS Construindo um framework CSS Presentation Transcript

    • FRAMEWORK CSSIniciando a construção de um frameworkA TEORIA
    • Diego Eis@diegoeis@tableless
    • Por que criar umframework?
    • PrototipaçãoA equipe precisa criar protótipos funcionais rápidoscom 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 deretrabalho.
    • Por que NÃO criar umframework?
    • Layouts muito diferentesLayouts ou elementos com a estrutura e visualdiferentes.
    • O código não para decrescerO código vai ficar cada vez maior, cada vez maispesado, com possibilidade de conflitos.
    • TempoVocê vai precisar dedicar sua equipe integralmentepara cuidar do framework. Pelo menos no início doprojeto.
    • Por que já existem outrosno mercadoOs que existem podem te ajudar melhor, além decontar com documentação e manual prontos.
    • Locaweb Style
    • Precisávamosresolver algunsproblemas
    • O processoProcessos incompletos prejudicam a qualidade docódigo, do produto e da entrega.
    • Excesso de projetosSão diversos projetos ao mesmo tempo, com equipestrabalhando paralelamente.
    • Liberar gargalosOs times de design e de front-end eram gargalosconstantes. Precisávamos agilizar o processo.
    • Conversamos com opessoal de UXO processo se inicia lá. São eles que pensarão noscomportamentos, design etc.
    • Burocracia
    • 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.
    • Escolhemos a baseIríamos usar Bootstrap e JQuery. Não iríamos utilizarnenhum pré-processador como LESS ou SASS.
    • Customização de design ecomportamentosPegamos o layout criado por UX e começamos acustomizar ou criar elementos.
    • Padronização de códigoIniciamos um trabalho de nomenclatura epadronização de escrita de código.
    • Um exemplo:CSS incrementalIncremente classes para ajudar na customização deelementos.
    • .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 organizadoSe o javascript não estiver bem estruturado, ele vaipuxar seu pé na cama.
    • $(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
    • 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.
    • Cuidados
    • Escolha um bomframework para sua baseVocê não precisa começar nada do zero. Mas sua baseprecisa 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 doselementos básicos: GRID, botões, tipografia, espaços emedidas.
    • Nomenclatura bemdefinidaMisturar nomes em inglês com portugues confunde.Nomes grandes confundem.Vai usar traço, underline ou camelCase?
    • 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.
    • Tenha uma documentaçãoou um manualUma documentação ou um manual com exemplos vaiajudar a adoção do framework em novos projetos.
    • Cresça com paciênciaNão coloque plugins que você ACHA que vai usar. Nãosolucione 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 precisamusar elementos já criados para montar layouts.
    • Work in ProgressSeu framework nunca estará pronto. Você sempre vaicriar, refazer ou modificar as features.
    • AMPLEXOSDiego Eis@diegoeis @tablelesstableless.com.br