CONSTRUINDO UM FRAMEWORK CSS - qconsp.comWEB] Diego Eis... · PRODUTIVIDADE Menos tempo montando...
Transcript of CONSTRUINDO UM FRAMEWORK CSS - qconsp.comWEB] Diego Eis... · PRODUTIVIDADE Menos tempo montando...
PRODUTIVIDADEMenos tempo montando wireframes, menos tempo desenhando um layout, menos tempo codificando.
PADRÃO PRA TUDOPadroniza layout.Padroniza comportamento.Padroniza elementos.Padroniza estrutura.Padroniza código.
POR QUE EXISTEM OUTROS NO MERCADONão reinvente a roda se você não tem um problema específico para resolver.
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
CSS INCREMENTALCustomize elementos aplicando multiplas classes.Um botão pode ter vários tamanhos, cores ou posições.
.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.
EVITE TAGS EM SELETORESMantenha foco nas classes.Um componente pode ser feito usando diferentes tags.
{! margin-right: 0;! padding-right: 0;! box-shadow: none;}
a#main_container.menu_style.menu_orientation_horizontal #site_menu .wrapper ul li:last-child
SEPARE O CONTEÚDO DO CONTAINERO estilo do conteúdo não pode ser dependente do seu container.Para isso, trate o container como um módulo.
Um título legalLorem 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 legalLorem 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
SEPARE A ESTRUTURA DO LAYOUTVocê pode ter a liberdade de estilizar a estrutura. O container pode ser estruturado de várias formas, com diferentes layouts.
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
[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";}
icomoon.io
fontello.com
NÃO TRAVE AS DIMENSÕESO 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.
LEVE E RÁPIDOCompilar 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.
SIMPLES Simples de aprender.Simples de implementar em um projeto.Simples de atualizar.Simples de fazer manutenção.
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.
REGRA DA SIMILARIDADESe 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.
MANTENHA UMA DOCUMENTAÇÃO ATUALIZADAA 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.
USE PRÉ PROCESSADORES COM CUIDADOPré processadores podem te ajudar em diversas tarefas, mas a sopa de Mixins, Extends e variáveis pode te fazer perder o controle.
ENTÃO, FECHOU!
A palestra vai ficar aqui:slideshare.net/diegoeis
bit.ly/locawebstyle