Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Construindo um framework CSS

1bf877955dc2e43662320fd3b0280166?s=47 Diego Eis
September 02, 2013

Construindo um framework CSS

Construir um framework é basicamente escrever o CSS do jeito certo, ou seja, escrever código sem dependências, modular, leve e altamente documentado.

Palestra feita pela primeira vez na QCon 2013.

1bf877955dc2e43662320fd3b0280166?s=128

Diego Eis

September 02, 2013
Tweet

Transcript

  1. CONSTRUINDO UM FRAMEWORK CSS

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

  3. None
  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. PRINCÍPIOS PRÁTICOS

  17. A estrutura de arquivos inicial

  18. stylesheets javascripts assets

  19. colors.css print.css etc... layout reset.css fonts.css base.css etc... base grids.css

    etc... structure buttons.css collapse.css sliders.css header.css etc... modules
  20. // // Manifest // @import “config” @import “structure/grid” @import “base/functional-classes”

    @import “base/reset” @import “base/mixins” @import “base/extends” @import “base/base” @import “base/fonts” @import “base/icons” @import “base/typography” @import “modules/header” @import “modules/footer” @import “modules/sidebar” @import “modules/collapse” @import “modules/tabs” @import “modules/buttons” @import “layout/colors/colors”
  21. MODULARIZE COMPONENTES Módulos são como legos: plugando diversas peças você

    forma uma peça maior.
  22. None
  23. Módulo

  24. Módulo

  25. Módulo

  26. CSS INCREMENTAL Customize elementos aplicando multiplas classes. Um botão pode

    ter vários tamanhos, cores ou posições.
  27. .btn .btn .btn-large .btn .btn-large .btn-primary .btn .btn-large .btn-primary .ico-star

    cuidado para não misturar informação com formatação.
  28. EVITE TAGS EM SELETORES Mantenha foco nas classes. Um componente

    pode ser feito usando diferentes tags.
  29. Isso pode ser um: • link • input button •

    span • etc... .btn
  30. MINIMIZE SELETORES Quem escreve seletor comprido faz xixi na cama.

  31. { ! margin-right: 0; ! padding-right: 0; ! box-shadow: none;

    } a #main_container.menu_style.menu_orientation_horizontal #site_menu .wrapper ul li:last-child
  32. None
  33. 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.
  34. 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 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 .box-dark .box-uiui
  35. 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.
  36. 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 botão .grid-4 .box-dark 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 .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 botão
  37. FONTS PARA ÍCONES Com fonts você consegue aumentar o tamanho

    e consegue mudar a cor.
  38. [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";}
  39. icomoon.io fontello.com

  40. MIXINS PARA CÓDIGOS ESPECIAIS Os mixins te ajudam na repetição

    e na inserção de código especiais. Como fazer setas, código de clearfix e etc.
  41. // ARROWS // Cria setas. // $arrow-color define a cor

    da seta. $arrow-size define o tamanho da seta. @mixin arrow-structure content: "" display: inline-block width: 0 height: 0 @mixin arrow-up($arrow-color, $arrow-size) @include arrow-structure border-left: $arrow-size solid transparent border-right: $arrow-size solid transparent border-bottom: $arrow-size solid $arrow-color @mixin arrow-down($arrow-color, $arrow-size) @include arrow-structure border-left: $arrow-size solid transparent border-right: $arrow-size solid transparent border-top: $arrow-size solid $arrow-color @mixin arrow-right($arrow-color, $arrow-size) @include arrow-structure border-top: $arrow-size solid transparent border-bottom: $arrow-size solid transparent border-left: $arrow-size solid $arrow-color
  42. .title-dropdown " font: .81em verdana font-weight: bolder " color: #2a2a2a

    " &:after " @include arrow-down(#000, 5px) " " margin: 0 0 0 5px
  43. VARIÁVEIS As variáveis te ajudam a não perder o padrão

    durante o projeto.
  44. // GRID // Adequando a largura máxima para o GRID

    // Todo o resto é controlado pelo Bootstrap $small-screens: "only screen and (max-width: 980px)" $medium-screens: "only screen and (min-width: 980px)" $big-screens: "only screen and (min-width: 1200px)" // Smartphones e telas pequenas @media #{$small-screens} " // Seu código aqui se houver // Tablets e telas médias @media #{$medium-screens} " // Seu código aqui se houver // Desktops @media #{$big-screens} " // Seu código aqui se houver
  45. // Para mobile (mobile first) .header " border-bottom: 4px solid

    $gray1 " background-color: $gray2 // Desktops @media #{$big-screens} " .header " " border-top: 4px solid #bbb " " background-color: #FFF " " margin-bottom: 10px
  46. variáveis com cores

  47. // // Cor verde // $theme-color: ".color-green" $color1: #8ecf00 $color2:

    #00a272 $color3: #519700 $color4: #f8fcf0 $color5: #163400
  48. #{$theme-color} " a " " color: $color2 " .header "

    " background-color: $color1 " " border-bottom-color: $color3 " " .menu " " " a " " " border-left-color: $color1
  49. 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.
  50. ALGUMAS CONSIDERAÇÕES...

  51. 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.
  52. SIMPLES Simples de aprender. Simples de implementar em um projeto.

    Simples de atualizar. Simples de fazer manutenção.
  53. MODULAR Possibilidade de combinar componentes para criar elementos de layout.

  54. 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.
  55. 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.
  56. 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.
  57. 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.
  58. RESUMINDO: TUDO SE TRATA DE OOCSS CSS Orientado a Objeto

    não é nada mais do que CSS escrito do jeito certo.
  59. ENTÃO, FECHOU! A palestra vai ficar aqui: slideshare.net/diegoeis @diegoeis @tableless

    tableless.com.br bit.ly/locawebstyle