Modular CSS - Projetando CSS para aplicativos
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Modular CSS - Projetando CSS para aplicativos

on

  • 6,687 views

Palestra sobre Modular CSS apresentada na QConSP 2012

Palestra sobre Modular CSS apresentada na QConSP 2012

Statistics

Views

Total Views
6,687
Views on SlideShare
4,897
Embed Views
1,790

Actions

Likes
33
Downloads
117
Comments
2

21 Embeds 1,790

http://bernarddeluna.com 910
http://tutsmais.com.br 598
https://twitter.com 98
http://candidosalesg.wordpress.com 59
http://candidosg.com 38
http://us-w1.rockmelt.com 29
http://cursos.jimmyffw.com 12
http://localhost 11
http://www.linkedin.com 7
http://flavors.me 6
http://psdcorporate.test.mineus.cz 6
http://jp.flavors.me 4
http://cloud.feedly.com 2
http://www.docshut.com 2
https://si0.twimg.com 2
http://webcache.googleusercontent.com 1
http://www.digg.com 1
http://fr.flavors.me 1
http://es.flavors.me 1
http://de.flavors.me 1
http://www.slashdocs.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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
  • \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

Modular CSS - Projetando CSS para aplicativos Presentation 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