CONSTRUINDO UM FRAMEWORK CSS

DIEGO EIS
@diegoeis @tableless tableless.com.br

slideshare.net/diegoeis bit.ly/locawebstyle

POR QUE USAR UM FRAMEWORK?

PROTOTIPAO
A equipe pode simular o real para chegar a concluses mais precisas.

PRODUTIVIDADE
Menos tempo montando wireframes, menos tempo desenhando um layout, menos tempo codicando.

MANUTENO FCIL
Facilita a manuteno diminuindo o tempo de retrabalho.

PADRO PRA TUDO

Padroniza layout. Padroniza comportamento. Padroniza elementos. Padroniza estrutura. Padroniza cdigo.

CONTROLE
Um erro pode ser resolvido para todos os sistemas. Uma atualizao afeta todos os projetos.

POR QUE NO USAR UM FRAMEWORK?

HTML ENGESSADO
O HTML tem que ser bem pensado no incio.

LAYOUTS DIFERENTES
Fica muito difcil de manter se os layouts forem muito diferentes.

ATUALIZAO FREQUENTE
E equipe precisa trabalhar no framework, no nos projetos.

CURVA DE APRENDIZADO
Quando h algum novo na equipe, a curva de aprendizado no pode ser longa.

POR QUE EXISTEM OUTROS NO MERCADO

No reinvente a roda se voc no tem um problema especco para resolver.

A ESTRUTURA DE ARQUIVOS INICIAL

assets

javascripts

stylesheets

reset.css fonts.css grids.css base.css etc... etc...

base

structure

buttons.css collapse.css sliders.css colors.css print.css

modules

header.css etc...

layout

etc...

PRINCPIOS PRTICOS

MODULARIZE COMPONENTES
Mdulos so como legos: plugando diversas peas voc forma uma pea maior.

Mdulo

Mdulo

Mdulo

CSS INCREMENTAL
Customize elementos aplicando multiplas classes. Um boto pode ter vrios tamanhos, cores ou posies.

.btn

.btn .btn-large

.btn .btn-large .btn-primary

.btn .btn-large .btn-primary .ico-star

cuidado para no misturar informao com formatao.

EVITE TAGS EM SELETORES

Mantenha foco nas classes. Um componente pode ser feito usando diferentes tags.

.btn

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

MINIMIZE SELETORES
Quem escreve seletor comprido faz xixi na cama.

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

SEPARE O CONTEDO DO CONTAINER

O estilo do contedo no pode ser dependente do seu container. Para isso, trate o container como um mdulo.

.box-dark

.box-uiui

Um ttulo 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 ttulo 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 boto

um boto

SEPARE A ESTRUTURA DO LAYOUT

Voc pode ter a liberdade de estilizar a estrutura. O container pode ser estruturado de vrias formas, com diferentes layouts.

.grid-4 .box-dark

.grid-4 .box-uiui

Um ttulo 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 ttulo 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 boto

um boto

um boto

FONTS PARA CONES

Com fonts voc consegue aumentar o tamanho e consegue mudar a cor.

[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

NO TRAVE AS DIMENSES
O grid controla a largura. O contedo controla a altura. No trave essas dimenses a no ser que seja extremamente necessrio.

ALGUMAS CONSIDERAES...

LEVE E RPIDO
Compilar e minicar seu CSS pode no ser o bastante. No tente abraar 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 manuteno.

MODULAR
Possibilidade de combinar componentes para criar elementos de layout.

TENHA POUCAS DEPENDNCIAS

No saia colocando plugins e outras depndencias a no ser que sejam teis para a maioria dos projetos que usaro o framework.

REGRA DA SIMILARIDADE
Se dois elementos so muito parecidos para estarem em uma pgina, provavelmente eles so muito parecidos para serem includos no framework. Ento, escolha um.

MANTENHA UMA DOCUMENTAO ATUALIZADA

A documentao no importante apenas pra voc, mas para outras equipes como UX e Back-end. Se o framework for pblico, outros devs usaro tambm.

USE PR PROCESSADORES COM CUIDADO

Pr processadores podem te ajudar em diversas tarefas, mas a sopa de Mixins, Extends e variveis pode te fazer perder o controle.

RESUMINDO: OOCSS
CSS orientado a objeto no nada mais do que CSS escrito do jeito certo.

ENTO, FECHOU!
A palestra vai ficar aqui: slideshare.net/diegoeis @diegoeis @tableless tableless.com.br bit.ly/locawebstyle