Componetização de CSS com o Compass (Front in Sampa 2013)
-
Upload
guilherme-serrano -
Category
Technology
-
view
1.462 -
download
3
description
Transcript of Componetização de CSS com o Compass (Front in Sampa 2013)
![Page 1: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/1.jpg)
Componetização de CSScom Compass / Sass
Guilherme Serrano
![Page 2: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/2.jpg)
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é)
![Page 3: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/3.jpg)
![Page 4: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/4.jpg)
![Page 5: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/5.jpg)
![Page 6: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/6.jpg)
![Page 7: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/7.jpg)
![Page 8: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/8.jpg)
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
![Page 9: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/9.jpg)
![Page 10: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/10.jpg)
CSS Modular
![Page 11: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/11.jpg)
CSS Modular
- Grid
![Page 12: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/12.jpg)
CSS Modular
- Grid- Usar herança de verdade
![Page 13: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/13.jpg)
CSS Modular
- Grid- Usar herança de verdade- Organização
![Page 14: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/14.jpg)
CSS Modular
- Grid- Usar herança de verdade- Organização- Manutenção
![Page 15: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/15.jpg)
CSS Modular
- Grid- Usar herança de verdade- Organização- Manutenção- Facilidade de customização
![Page 16: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/16.jpg)
Componentes?
![Page 17: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/17.jpg)
Componentes?
![Page 18: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/18.jpg)
Componentes?
![Page 19: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/19.jpg)
Componentes?
![Page 20: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/20.jpg)
![Page 21: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/21.jpg)
Compass
- Reset- Math- Selector- Images
- Helpers- Colors- Sprites
![Page 22: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/22.jpg)
![Page 23: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/23.jpg)
Variáveis no Compass (sass)
![Page 24: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/24.jpg)
Variáveis no Compass
![Page 25: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/25.jpg)
$main-color: #333;$secondary-color: red;
Variáveis no Compass
![Page 26: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/26.jpg)
$main-color: #333;$secondary-color: red;
.products{ border-color: $secondary-color; color: $main-color;}
Variáveis no Compass
![Page 27: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/27.jpg)
$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
![Page 28: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/28.jpg)
@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
![Page 29: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/29.jpg)
.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
![Page 30: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/30.jpg)
Tipografia
![Page 31: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/31.jpg)
Cores
![Page 32: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/32.jpg)
Imagens
![Page 33: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/33.jpg)
Espaçamentos
![Page 34: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/34.jpg)
![Page 35: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/35.jpg)
Includes
![Page 36: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/36.jpg)
Includes no Compass
- sass - _componentes - componente.scss screen.scss
![Page 37: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/37.jpg)
Includes no Compass
screen.scss
@import "_componentes/componente";
![Page 38: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/38.jpg)
É include de CSS?
![Page 39: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/39.jpg)
![Page 40: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/40.jpg)
Arquiteturade front-end
componentes em projetosutilizando templates
![Page 41: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/41.jpg)
Portal
![Page 42: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/42.jpg)
CMS
![Page 43: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/43.jpg)
E-commerce
![Page 44: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/44.jpg)
Intranet
![Page 45: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/45.jpg)
Sistemas web
![Page 46: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/46.jpg)
TemplatesWordpressBootstrap
etc
![Page 47: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/47.jpg)
Pense antes de fazer
![Page 48: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/48.jpg)
Pense nas variáveisexigidas pelo design
![Page 49: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/49.jpg)
Negocie com o designer
![Page 50: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/50.jpg)
![Page 51: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/51.jpg)
Pense na
![Page 52: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/52.jpg)
e adapte a sua necessidade
Estrutura de arquivos
![Page 53: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/53.jpg)
![Page 54: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/54.jpg)
projeto _componentes
04_produto.scss06_lista-chamada.scss12_noticia.scss..
eucomprariaimages
sprite.png..
style.scsseucompraria-natal
style.scss
![Page 55: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/55.jpg)
projeto _componentes
04_produto.scss06_lista-chamada.scss12_noticia.scss..
eucomprariaimages
sprite.png..
style.scsseucompraria-natal
style.scss
Projeto Compass
![Page 56: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/56.jpg)
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
![Page 57: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/57.jpg)
screen.scss
@import "compass/css3";@import "compass/utilities";
$primary-font: verdana;$box-padding: 5px;$border-radius: 4px;$primary-color: #333;
@import "../../_componentes/componente";
![Page 58: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/58.jpg)
natal.scss
@import "compass/css3";@import "compass/utilities";
$primary-font: “Comic Sans”;$box-padding: 5px;$border-radius: 4px;$primary-color: red;
@import "../../_componentes/componente";
![Page 59: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/59.jpg)
Agora são menos de 500 linhas
CSS de 3 mil linhas
![Page 60: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/60.jpg)
3 minutos para fazer
O canal Esportevai mudar a tipografia!
![Page 61: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/61.jpg)
Sexta, 14h, precisa ser hoje
O Daniel Filho exigiuo componente de
calendário na intranetdo ZOFE
![Page 62: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/62.jpg)
Meu componente tem variáveis que o template ainda não tem.
E agora?
![Page 63: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/63.jpg)
![Page 64: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/64.jpg)
E mantém a qualidade do seu código!
O compass nãocompila
![Page 65: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/65.jpg)
Acabaram as desculpas paradeixar código legado
Refactoring de CSS
![Page 66: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/66.jpg)
+ produtividade
![Page 67: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/67.jpg)
+ produtividade=
+ tempo estudando(zofe, loop infinito, tableless, o desenvolvedor…)
![Page 68: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/68.jpg)
+ produtividade=
+ tempo estudando(zofe, loop infinito, tableless, o desenvolvedor…)
=+ produtividade
![Page 69: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/69.jpg)
Foto por @torresfelipe
![Page 70: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/70.jpg)
Inovem sem moderação
![Page 71: Componetização de CSS com o Compass (Front in Sampa 2013)](https://reader033.fdocumentos.tips/reader033/viewer/2022042715/55946a851a28ab8a2b8b45e4/html5/thumbnails/71.jpg)
http://andafter.orghttp://eucompraria.com.brhttp://gssolutions.com.br
Obrigado