CONSTRUINDO UM FRAMEWORK CSS

Transcrição

1 CONSTRUINDO UM FRAMEWORK CSS

2 tableless.com.br slideshare.net/diegoeis bit.ly/locawebstyle

3

4 POR QUE USAR UM FRAMEWORK?

5 PROTOTIPAÇÃO A equipe pode simular o real para chegar a conclusões mais precisas.

6 PRODUTIVIDADE Menos tempo montando wireframes, menos tempo desenhando um layout, menos tempo codificando.

7 MANUTENÇÃO FÁCIL Facilita a manutenção diminuindo o tempo de retrabalho.

8 PADRÃO PRA TUDO Padroniza layout. Padroniza comportamento. Padroniza elementos. Padroniza estrutura. Padroniza código.

9 CONTROLE Um erro pode ser resolvido para todos os sistemas. Uma atualização afeta todos os projetos.

10 POR QUE NÃO USAR UM FRAMEWORK?

11 HTML ENGESSADO O HTML tem que ser bem pensado no início.

12 LAYOUTS DIFERENTES Fica muito difícil de manter se os layouts forem muito diferentes.

13 ATUALIZAÇÃO FREQUENTE E equipe precisa trabalhar no framework, não nos projetos.

14 CURVA DE APRENDIZADO Quando há alguém novo na equipe, a curva de aprendizado não pode ser longa.

15 POR QUE EXISTEM OUTROS NO MERCADO Não reinvente a roda se você não tem um problema específico para resolver.

16 A ESTRUTURA DE ARQUIVOS INICIAL

17 assets javascripts stylesheets

18 reset.css fonts.css grids.css base base.css etc... structure etc... buttons.css collapse.css colors.css sliders.css print.css modules header.css layout etc... etc...

19 PRINCÍPIOS PRÁTICOS

20 MODULARIZE COMPONENTES Módulos são como legos: plugando diversas peças você forma uma peça maior.

21

22 Módulo

23 Módulo

24 Módulo

25 CSS INCREMENTAL Customize elementos aplicando multiplas classes. Um botão pode ter vários tamanhos, cores ou posições.

26 .btn.btn.btn.btn.btn-large.btn-large.btn-large.btn-primary.btn-primary.ico-star cuidado para não misturar informação com formatação.

27 EVITE TAGS EM SELETORES Mantenha foco nas classes. Um componente pode ser feito usando diferentes tags.

28 .btn Isso pode ser um: link input button span etc...

29 MINIMIZE SELETORES Quem escreve seletor comprido faz xixi na cama.

30 #main_container.menu_style.menu_orientation_horizontal #site_menu.wrapper ul li:last-child! margin-right: 0;! padding-right: 0;! box-shadow: none; } a {

31

32 SEPARE O CONTEÚDO DO CONTAINER O estilo do conteúdo não pode ser dependente do seu container. Para isso, trate o container como um módulo.

33 .box-dark.box-uiui Um título legal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris erat, egestas sit amet vestibulum quis, pulvinar in sem. Sed elit leo, tincidunt at tempus quis, gravida sit amet arcu. Fusce suscipit mattis odio, vel scelerisque libero. Donec et ligula eget augue porta blandit sit amet vel dui. Um título legal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris erat, egestas sit amet vestibulum quis, pulvinar in sem. Sed elit leo, tincidunt at tempus quis, gravida sit amet arcu. Fusce suscipit mattis odio, vel scelerisque libero. Donec et ligula eget augue porta blandit sit amet vel dui. um botão um botão

34 SEPARE A ESTRUTURA DO LAYOUT Você pode ter a liberdade de estilizar a estrutura. O container pode ser estruturado de várias formas, com diferentes layouts.

35 .grid-4.box-dark.grid-4.box-uiui Um título legal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris erat, egestas sit amet vestibulum quis, pulvinar in sem. Sed elit leo, tincidunt at tempus quis, gravida sit amet arcu. Um título legal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris erat, egestas sit amet vestibulum quis, pulvinar in sem. Sed elit leo, tincidunt at tempus quis, gravida sit amet arcu. Rosinha, chuchu! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris erat, egestas sit amet vestibulum quis, pulvinar in sem. Sed elit leo, tincidunt at tempus quis, gravida sit amet arcu. Sed elit leo, tincidunt at tempus quis, gravida sit amet arcu. um botão um botão um botão

36 FONTS PARA ÍCONES Com fonts você consegue aumentar o tamanho e consegue mudar a cor.

37 } [class*="ico-"]:before { display: inline-block; font-family: font-icon; speak: none;.ico-keyboard:before {content: "\22";}.ico-split:before {content: "\23";}.ico-up-dir:before {content: "\24";}.ico-right-dir:before {content: "\25";}

38 icomoon.io fontello.com

39 NÃO TRAVE AS DIMENSÕES O grid controla a largura. O conteúdo controla a altura. Não trave essas dimensões a não ser que seja extremamente necessário.

40 ALGUMAS CONSIDERAÇÕES...

41 LEVE E RÁPIDO Compilar e minificar seu CSS pode não ser o bastante. Não tente abraçar todos os browsers. Gracefull Degradation e Progressive Enhancement devem estar no seu sangue.

42 SIMPLES Simples de aprender. Simples de implementar em um projeto. Simples de atualizar. Simples de fazer manutenção.

43 MODULAR Possibilidade de combinar componentes para criar elementos de layout.

44 TENHA POUCAS DEPENDÊNCIAS Não saia colocando plugins e outras depêndencias a não ser que sejam úteis para a maioria dos projetos que usarão o framework.

45 REGRA DA SIMILARIDADE Se dois elementos são muito parecidos para estarem em uma página, provavelmente eles são muito parecidos para serem incluídos no framework. Então, escolha um.

46 MANTENHA UMA DOCUMENTAÇÃO ATUALIZADA A documentação não é importante apenas pra você, mas para outras equipes como UX e Back-end. Se o framework for público, outros devs usarão também.

47 USE PRÉ PROCESSADORES COM CUIDADO Pré processadores podem te ajudar em diversas tarefas, mas a sopa de Mixins, Extends e variáveis pode te fazer perder o controle.

48 RESUMINDO: OOCSS CSS orientado a objeto não é nada mais do que CSS escrito do jeito certo.

49 ENTÃO, FECHOU! A palestra vai ficar tableless.com.br bit.ly/locawebstyle