RAMON BISPOhttp://ramonpage.com

@ramonpage

ASSETS ON RAILS NA PRÁTICA

ENTENDENDO, CONFIGURANDO E APLICANDO

ASSET PACKAGING NO RAILS

@RAMONPAGE

UM POUCO DE HISTÓRIARails < 3.1

- Jammit http://documentcloud.github.com/jammit/- Asset Packager https://github.com/sbecker/asset_packager

Rails 3.1+

- Sprockets https://github.com/sstephenson/sprockets

@RAMONPAGE

@RAMONPAGE

RAILS 3.1+

ASSET PIPELINE

config.assets.enabled = true

@RAMONPAGE

RAILS 3.1+ASSET PIPELINE FINGERPRINTING

/stylesheets/styles.css?2509895876

styles.css => styles-908e25f4bf641868d8683022a5b62f54.css

ESTRUTURA DOS ASSETS NO RAILS

@RAMONPAGE

↳ app↳ assets↳ images- ...

↳ javascripts- application.js- ...

↳ stylesheets- application.css- ...

↳ ...

@RAMONPAGE

ENTENDENDO OS MANIFESTOS

application.js//= require jquery//= require jquery_ujs//= require_tree .

application.css/* *= require_self *= require_tree .*/

@RAMONPAGE

MAIS SOBRE ASSET PIPELINE

RAILS GUIDES

http://guides.rubyonrails.org/asset_pipeline.html

ENTENDENDO PRÉ-PROCESSADORES

@RAMONPAGE

COFFEESCRIPT http://jashkenas.github.com/coffee-script/SASS http://sass-lang.com/

COMPASS http://compass-style.org/

@RAMONPAGE

SASS EM USO.CSS

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

.SASS$blue: #3bbfce$margin: 16px

.content-navigation border-color: $blue color: darken($blue, 9%)

.border padding: $margin / 2 margin: $margin / 2 border-color: $blue

@RAMONPAGE

NÃO GOSTOU?DÊ UMA OLHADA NO LESS

http://lesscss.org/

SHOW METHE CODE

@RAMONPAGE

RAMON BISPOhttp://ramonpage.com

@ramonpage

OBRIGADO!