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