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.

1. CONSTRUINDO UM
FRAMEWORK CSS

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

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. stylesheetsjavascripts
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.

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

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