Instalando Twitter Bootstrap no Rails 3.2 na unha!
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.