componetização de css com o compass (front in sampa 2013)
DESCRIPTION
Palestra sobre componetização de CSS utilizando Compass, realizada no Front in Sampa 2013. Metodologias para componetização, vantagens, controle e qualidade de código e uso de variáveis e helpers.TRANSCRIPT
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
http://andafter.orghttp://eucompraria.com.brhttp://gssolutions.com.br
Obrigado