componetização de css com o compass (front in sampa 2013)

Componetização de CSScom Compass / Sass

Guilherme Serrano

Quem?

Guilherme Serrano (@gserrano)Web developer

Graduado em design (ui ui ui)

Pós graduando em gestão empreendedoraDeveloper e sócio do @eucompraria (eucompraria.com.br)

Experiências anteriores- iG- Itau BBA (MM Café)- Avon (MM Café)

Se você faz sites grandes usando CSS, já deve ter notado que chega uma etapa do trabalho que se não prestar a atenção devida, podemos nos perder em um mundo de propriedades, classes e ids.

“Diego Eis - Tableless

CSS Modular

CSS Modular

- Grid

CSS Modular

- Grid- Usar herança de verdade

CSS Modular

- Grid- Usar herança de verdade- Organização

CSS Modular

- Grid- Usar herança de verdade- Organização- Manutenção

CSS Modular

- Grid- Usar herança de verdade- Organização- Manutenção- Facilidade de customização

Componentes?

Componentes?

Componentes?

Componentes?

Compass

- Reset- Math- Selector- Images

- Helpers- Colors- Sprites

Variáveis no Compass (sass)

Variáveis no Compass

$main-color: #333;$secondary-color: red;

Variáveis no Compass

$main-color: #333;$secondary-color: red;

.products{ border-color: $secondary-color; color: $main-color;}

Variáveis no Compass

$main-color: #333;$secondary-color: red;

.products{ border-color: $secondary-color; color: $main-color;}.products a:hover{ darken($main-color, 10%);}

Variáveis no Compass

@import "compass/css3";

$primary-font: verdana;$box-padding: 5px;$border-radius: 4px;

.features{@include border-radius($border-radius);padding: $box-padding;p{font-family: $primary-font;}

}

Variáveis no Compass

.features { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; padding: 5px;}.features p { font-family: verdana;}

Resultado

Tipografia

Cores

Imagens

Espaçamentos

Includes

Includes no Compass

- sass - _componentes - componente.scss screen.scss

Includes no Compass

screen.scss

@import "_componentes/componente";

É include de CSS?

Arquiteturade front-end

componentes em projetosutilizando templates

Portal

CMS

E-commerce

Intranet

Sistemas web

TemplatesWordpressBootstrap

etc

Pense antes de fazer

Pense nas variáveisexigidas pelo design

Negocie com o designer

Pense na

e adapte a sua necessidade

Estrutura de arquivos

projeto _componentes

04_produto.scss06_lista-chamada.scss12_noticia.scss..

eucomprariaimages

sprite.png..

style.scsseucompraria-natal

style.scss

projeto _componentes

04_produto.scss06_lista-chamada.scss12_noticia.scss..

eucomprariaimages

sprite.png..

style.scsseucompraria-natal

style.scss

Projeto Compass

projeto _componentes

04_produto.scss06_lista-chamada.scss12_noticia.scss..

eucomprariaimages

sprite.png..

style.scsseucompraria-natal

style.scss

Projeto Compass

Não serão compilados

screen.scss

@import "compass/css3";@import "compass/utilities";

$primary-font: verdana;$box-padding: 5px;$border-radius: 4px;$primary-color: #333;

@import "../../_componentes/componente";

natal.scss

@import "compass/css3";@import "compass/utilities";

$primary-font: “Comic Sans”;$box-padding: 5px;$border-radius: 4px;$primary-color: red;

@import "../../_componentes/componente";

Agora são menos de 500 linhas

CSS de 3 mil linhas

3 minutos para fazer

O canal Esportevai mudar a tipografia!

Sexta, 14h, precisa ser hoje

O Daniel Filho exigiuo componente de

calendário na intranetdo ZOFE

Meu componente tem variáveis que o template ainda não tem.

E agora?

E mantém a qualidade do seu código!

O compass nãocompila

Acabaram as desculpas paradeixar código legado

Refactoring de CSS

+ produtividade

+ produtividade=

+ tempo estudando(zofe, loop infinito, tableless, o desenvolvedor…)

+ produtividade=

+ tempo estudando(zofe, loop infinito, tableless, o desenvolvedor…)

=+ produtividade

Foto por @torresfelipe

Inovem sem moderação

@gserranocontato@guilhermeserrano.com.br

http://andafter.orghttp://eucompraria.com.brhttp://gssolutions.com.br

Obrigado