Your SlideShare is downloading. ×
0
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Modular CSS - Projetando CSS para aplicativos

6,614

Published on

Palestra sobre Modular CSS apresentada na QConSP 2012

Palestra sobre Modular CSS apresentada na QConSP 2012

Published in: Technology
2 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,614
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
135
Comments
2
Likes
36
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Por que?
    • 2. • Padronizados• Integrados• Estilos diferentes
    • 3. Realidade• Foco no visual• Produção linear• Refação
    • 4. De quem é a culpa? Mas de quem é a culpa?
    • 5. Site ≠ APP
    • 6. Site - Foco em• Estilo• Diagramação• Primeiro impacto
    • 7. APP - Foco em• Estilo• Funcionalidades• Condução
    • 8. GRID 960LESS Framework Foundation Golden Grid Semantic Skeleton Etc.
    • 9. Nããããããããããããããããããããã
    • 10. ããããããããããããããããããããããããããããããããã
    • 11. ão.
    • 12. Sei que agora muitos devocês estão me odiando…#mimimimi
    • 13. Diagramação do site engessa o código
    • 14. Vamos voltar um pouquinho no tempo
    • 15. HTML = conteúdo CSS = estilo
    • 16. Por que entãovamos mudar isso?
    • 17. O que não queremos ver<div class=”grid_2 omega "> ...</div>
    • 18. Contras• .Grid-4-12 = .texto-azul• Manutenções dolorosas• Orienta o Design e não o contrário
    • 19. Ah! Mas e oSemantic.gs?
    • 20. Ah! Mas e os novos Mixins para Blueprint e Sass?
    • 21. Contras• .Grid-4-12 = .texto-azul• Manutenções dolorosas• Orienta o Design e não o contrário• Dependência?
    • 22. Framework agiliza a codificação
    • 23. Usar slicer também
    • 24. Recomendo GRIDs e Frameworkspara prototipagem
    • 25. Crie seu próprio Framework
    • 26. Eles criaram:YUI, Twitter Bootstrap,Abril Bootstrap, Peixe Urbano Bootstrap
    • 27. O Negócio deles não é igual ao seu
    • 28. Pensando no seu projeto
    • 29. Evite utilizar herança
    • 30. .widget h2 {}.widget-tt {}
    • 31. .nav a {}.nav-link {}
    • 32. Evite utilizar IDspara estilização
    • 33. #submit {}.botao {}
    • 34. <form role="search" method="get" id="searchform" action=“"> <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search” /> </div></form>
    • 35. Foque na função e não no estiloNem no conteúdo
    • 36. .bloco-claro {}.ultimos-pedidos {} .box {}
    • 37. Pense em reutilização
    • 38. Dicas para reutilização• Classes globais• Testar em outro local• Testar variações• Documentação
    • 39. A inteligência do seu código
    • 40. Class=“b” Class=“b b-pri” Class=“b b-small”Class=“b b-small b-pri”
    • 41. Tooltip<div class="tooltip”> <hgroup class="tooltip-h"> <h2 class="tooltip-tt">Reason:</h2> </hgroup> <section class="tooltip-body”></section></div>
    • 42. Wizard<ul class="steps"> <li class="checked"><span>1</span> About your campaign</li> <li class="active"><span>2</span> Segmentation</li> <li><span>3</span> Set your budget</li> <li><span>4</span> Add your creatives</li> </ul>
    • 43. Standards (padrões)• Títulos e textos• Navegações• Tabs (abas)• Objetos de formulário
    • 44. Estudo de caso
    • 45. Cenário - Petrobras• 12 projetos simultâneos• Mais de 40 programadores• Equipe com 5 designers/ front-end
    • 46. Motivadores• 50% formulário, 50% tabela• Nenhum padrão de código ou classes• Nenhuma reutilização• Sem acesso ao Visual Studio
    • 47. Objetivos• Fácil diagramação• Fácil customização por projeto• Responsive ou fluido• Boa documentação
    • 48. Framework de Formulário
    • 49. 30kdownloads
    • 50. DRY CSS Don’t Repeat Your CSS
    • 51. DRY CSS• Modularizado• Facilmente integrado• Vinculado ao estilo• Vinculado ao ID• Lowercase e Uppercase
    • 52. OOCSSObject oriented cascading style sheet
    • 53. Objected Oriented CSS• Separação da estrutura e do estilo• Criação de elementos globais• É um processo tácito• Existe um framework com o mesmo nome
    • 54. SMACSSScalable and Modular Architecture for CSS
    • 55. SMACSS• Categorização do CSS em: base, layout, modules, states e theme• Módulos independentes• Muito engessado• Não está aberto
    • 56. BEMBlock Element Modifier
    • 57. BEM• Módulos independentes• Muito complexo• Nomeclatura engessada e falha (menu__item_state_current)
    • 58. LESS / SASS
    • 59. Aplicações1. @color, @lnk-color, @active-color, @em- color, @hover-bg, @active-bg,…2. @spacing, @spacing-02, @spacing-h, @spacing-v, .sep, .box-sizing, .clear,…3. .corner(@radius: 4px), .transition(@transition-type: all), .sprite(@sprite-h, @sprite-v),…
    • 60. Jeremy Clarke LESS e SASS criam fantásticos DRY-CSS1. Foge dos padrões2. Dependencia de uma biblioteca externa3. Não é CSS
    • 61. Reutilização sempre
    • 62. Então…
    • 63. 1Crie um arquivo externo
    • 64. Standards• Sempre atualizado• Se um objeto for utilizado em mais de 2 lugares, transforme-o em um padrão• Sempre dê um 360 nos padrões
    • 65. 2Uma boa nomeclatura vale ouro
    • 66. Harry Roberts Quebrar em mini classes como se tivesse pedindo um sanduiche no Subway #sanduiche.pao.alface.queijo.tomate.maionese. Não gosta de tomate, é só remover
    • 67. 3Envolva sua equipe no processo de padronização
    • 68. 4Não deixe de inventar coisas
    • 69. http://mzl.la/M0cLQC
    • 70. 5Prototipe
    • 71. Agora é com vocês! Obrigado! @bernarddeluna

    ×