Existe uma cacetada de gems que facilitam a instalação do Twitter Bootstrap no Rails 3.2. Eu cheguei a experimentar duas gems e achei bem bacanas. O problema é que se eu precisar atualizar a versão do bootstrap, eu ficarei dependente da boa vontade de um vendor.

Por este motivo eu acabei encarando o desafio de instalá-lo na asset pipeline do Rails sem o auxílio de nenhuma gem especial. Já vou adiantando que a tarefa é bem simples.

 

Baixando o Twitter Bootstrap

Na minha versão anterior deste artigo eu segui a linha de baixar uma versão personalizada do bootstrap para rodar bonitinho na asset. Desta vez eu resolvi simplificar um pouco mais. Então, vamos fazer download do pacote padrão do bootstrap:

Você baixará o arquivo bootstrap.zip. Extraindo-o você obterá os seguintes arquivos:

js/bootstrap.js
js/bootstrap.min.js
css/bootstrap.css
css/bootstrap.min.css
img/glyphicons-halflings.png
img/glyphicons-halflings-white.png

Instalando o bootstrap no Rails

Para facilitar as coisas, vamos começar um novo projeto:

$ rails new modelo_bootstrap

Eu gosto de manter cada lib de terceiros em sua própria pasta, identificando também a versão da mesma. No momento da escrita deste post, a versão atual do bootstrap é a 2.3.1. Então devemos criar uma pasta em vendor assim:

$ mkdir vendor/asset-libs
$ mkdir vendor/asset-libs/bootstrap-2.3.1

Coloque os seguintes arquivos na nova pasta:

../bootstrap-2.3.1/css/bootstrap.css
../bootstrap-2.3.1/css/bootstrap-responsive.css
../bootstrap-2.3.1/img/glyphicons-halflings.png
../bootstrap-2.3.1/img/glyphicons-halflings-white.png
../bootstrap-2.3.1/js/bootstrap.js

Você notou que os arquivos .min.* ficaram de fora? É porque não precisamos deles. A asset pipeline do Rails nos fará o favor de minificá-los. Sem contar que em modo de desenvolvimento o debug fica mais amigável.

Precisamos também declará-lo nos arquivos de manifesto da asset pipeline. Adicione as linhas a seguir nos arquivos relacionados:

// Arquivo: app/assets/javascripts/application.js
...
//= require bootstrap
...

// Arquivo: app/assets/stylesheets/application.css
...
 *= require bootstrap
 *= require bootstrap-responsive
...

Importante: o bootstrap é dependente da JQuery para poder rodar em modo responsivo.

Lembra que a gente colocou o bootstrap numa pasta própria dentro da asset pipeline? Poisé! Agora a gente precisa ensinar o rails a encontrar esta pasta. Basta adicionar a linha abaixo no application.rb:

# Arquivo: config/application.rb
...
# Faz com que a asset pipeline encontre os arquivos adicionados em vendor tendo uma sub-pasta
# para cada lib, permitindo assim que as imagens, css e js daquela lib fiquem centralizadas
# para facilitar futuras atualizações.
config.assets.paths += Dir["#{Rails.root}/vendor/asset-libs/**/"].sort_by { |dir| -dir.size }

Temos ainda mais um probleminha pra resolver. As imagens do bootstrap são declaradas dentro do bootstrap.css usando o diretório “../img”. O problema é que após a compilação da asset, todas as imagens precisam estar no diretório “./”. Então nós precisamos abrir o arquivo bootstrap.css e fazer duas pequenas modificações:

// Abra o arquivo vendor/asset-libs/bootstrap-2.3.1/css/bootstrap.css

// Localize a linha que contém:
url("../img/glyphicons-halflings.png");

// E substitua por:
url("glyphicons-halflings.png");

// Localize a linha que contém:
url("../img/glyphicons-halflings-white.png");

// E substitua por:
url("glyphicons-halflings-white.png");

Prontinho… agora é só correr para o abraço.

O exemplo Twitter Bootstrap – Hero

No github do Twitter Bootstrap podemos encontrar o exemplo abaixo:

http://twitter.github.com/bootstrap/examples/hero.html

Eu gosto muito deste exemplo, pois ele usa um menu responsivo e com um dropdown. Ele é bem legal, pois você pode visualizá-lo tanto no desktop quanto em um dispositivo móvel. Vamos então tomá-lo como referência e recriá-lo no Rails.

Aviso: não vou me preocupar em criar partials ou outras otimizações de layout. Quero deixá-lo o mais didático possível, ok?!

Para não perdermos tempo, eu fiz as devidas adaptações no projeto e publique-o no github. Eu commitei cada passo para que você possa acompanhar em detalhes a evolução do exemplo. Segue abaixo a URL:

https://github.com/cesarjr/modelo-bootstrap

O nosso exemplo conta com um controller chamado site com uma action chamada home. Com isso teremos a URL /localhost:3000/site/home. Esta action hospedará o corpo do exemplo HERO.

No arquivo modelo_bootstrap/app/views/layouts/application.html.erb eu coloquei o sistema de menus e a declaração dos javascripts e css.

Não precisei colocar o jquery necessário para o menu dropdown, pois por padrão o Rails já o traz no Gemfile.

Coloquei também algumas imagens adicionais em modelo_bootstrap/app/assets/images/ que representam os ícones do aplicativo ao criar atalhos, favicons e outros.

É isso aí! Sugestões sempre são bem vindas.