Twitter Bootstrap e Rails

Criado por Daniel Kehoe, @danielkehoe
URL do original: https://railsapps.github.com/twitter-bootstrap-rails.html

Nesse tutorial mostraremos como configurar uma aplicação Rails 3.2 para usar o framework Twitter Bootstrap como ferramenta de desenvolvimento CSS para criar o layout de uma aplicação HTML5 e estilizar mensagens de alerta e notificações Rails.

O uso do Twitter Bootstrap proporciona uma estilização ágil e atrativa para sua aplicação. Twitter Bootstrap e outros frameworks CSS, tal como Zurb Foundation, são ferramentas que proporcionam uma estrutura e princípios ideais para desenvolvimento Rails server-side ("back-end"). Twitter Bootstrap é o mais popular entre os diversos frameworks CSS existentes.

Esse tutorial destina-se aos desenvolvedores Rails utilizando os exemplos de aplicações constantes do repositório Rails Apps, contudo todos poderão se beneficiar dele. É muito fácil usar a ferrameta Rails Composer ("algo como usar o camando 'rails new' em steroids") para instalar Twitter Bootstrap e configurar o layout default para sua aplicação. O programa vai lhe apresentar a opção para instalar o Twitter Bootstrap ou outro framework CSS e vai configurar o layout default para a aplicação. O Rails tutorial for Devise with CanCan and Twitter Bootstrap exemplifica a criação de uma aplicação completa destinada a autenticação de usuário e autorização administrativa estilizada com uso do Twitter Bootstrap.

Instalando o Twitter Bootstrap

A instalação do Twitter Bootstrap em uma aplicação Rails se faz em quatro etapas:

• acrescente uma gem em Gemfile
• edite o arquivo app/assets/javascripts/application.js e adicione os arquivos JavaScript do Bootstrap.
• acrescente o arquivo app/assets/stylesheets/bootstrap_and_overrides.css.scss para adicionar os arquivos CSS do Bootstrap.
• edite o arquivo app/views/layouts/application.html.erb para alterar o layout da aplicação.
• inclua Twitter Bootstrap CSS styling em Rails flash messages

As instruções para cumprir cada uma das etapas são estudadas a seguir.

Twitter Bootstrap Gem

Existem várias opções para instalar Twitter Bootstrap em uma aplicação Rails. O framework pode ser instalado usando sua linguagem nativa LESS CSS ou a linguagem SASS. Ver o artigo Twitter Bootstrap, Less, and Sass: Understanding Your Options for Rails 3.1. SASS é a linguagem CSS padrão para desenvolvimento Rails, assim recomendamos instalar a gem bootstrap-sass deThomas McDonald's.

No arquivo Gemfile acrescente o seguinte:

gem 'bootstrap-sass'

a seguir execute: $ bundle install.

Adicione Twitter Bootstrap Javascript

Inclua oa arquivos Javascript do Twitter Bootstrap modificando o arquivo app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Usando SASS

A linguagem padrão para desenvolvimento CSS em Rails é SASS.

É uma boa idéia renomear o arquivo app/assets/stylesheets/application.css para app/assets/stylesheets/application.css.scss.

Isso possibilitará a que você se beneficie da linguagem e funcionalidades da sintaxe SASS para criar as folhas de estilos de sua aplicação. Para mais informações sobre as vantagens do uso de SASS consulte SASS Basics RailsCast de Ryan Bates.

Importe as CSS do Twitter Bootstrap

A seguir vamos importar os arquivos CSS do Twitter Bootstrap. Você poderia modificar o arquivo app/assets/stylesheets/application.css.scss para importar Bootstrap. Contudo, recomendamos criar um arquivo novo denominado app/assets/stylesheets/bootstrap_and_overrides.css.scss. Caso você queira modificar as regras CSS de Twitter Bootstrap poderá editar o arquivo application.css.scss mas alterando as regras CSS no arquivo bootstrap_and_overrides.css.scss proporcionará uma melhor organização das suas CSS.

O arquivo app/assets/stylesheets/bootstrap_and_overrides.css.scss é incluido e compilado automaticamente no arquivo application.css pelo comando *= require_tree . executado no arquivo app/assets/stylesheets/application.css.scss.

Acrescente no arquivo app/assets/stylesheets/bootstrap_and_overrides.css.scss:

@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";

O arquivo importará duas folhas de estilo CSS Bootstrap uma folha contendo as regras CSS básicas e outra com as regras CSS para design responsivo, destinada apresentar a aplicação em diferentes dispositivos e resoluções.

A regra CSS body { padding-top: 60px; } destina-se a abrir um espaço para acomodar a barra de navegação preta no topo criada pela classe navbar-fixed-top no elementoheader conforme layout mostrado a seguir.

Nota: Antes da versão 2.0.2 do bootstrap-sass um bug requeria configurar o parâmetro iconSpritePath. Isso foi resolvido e não é mais necessário.

Para exemplificar como acrescentar uma regra CSS a ser aplicada em todas as páginas da aplicação mostramos o código a seguir que cria um box na cor cinza para background do conteúdo da página.

Para criar o fundo na cor cinza acrescente no arquivo app/assets/stylesheets/application.css.scss o seguinte:

.content {
  background-color: #eee;
  padding: 20px;
  margin: 0 -20px; /* indenta o padding negativo para preservar o grid */
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

Layout default da aplicação

Gerar uma nova aplicação Rails com o comandorails new cria o layout default para a aplicação. Rails usará o layout definido no arquivo app/views/layouts/application.html.erb como default para cada página criada. Se você estiver usando Haml o arquivo será app/views/layouts/application.html.haml.

Você poderá criar e estilizar mecanismos de navegação, mensagens de erros e notificações e muito mais usando o framework Twitter Bootstrap.

Ver o artigo HTML5 Boilerplate for Rails Developers para uma explicação sobre o quê poderá ser incluído no layout default da aplicação.

Layout default com Twitter Bootstrap (ERB)

Twitter Bootstrap prevê funcionalidades para layouts mais complexos.

Substitua o conteúdo do arquivo app/views/layouts/application.html.erb pelo seguinte código:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Myapp" %></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= yield(:head) %>
  </head>
  <body>
    <header class="navbar navbar-fixed-top">
      <nav class="navbar-inner">
        <div class="container">
          <%= render 'layouts/navigation' %>
        </div>
      </nav>
    </header>
    <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">
              <%= render 'layouts/messages' %>
              <%= yield %>
            </div>
          </div>
          <footer>
          </footer>
        </div>
      </div> <!--! end of .container -->
    </div> <!--! end of #main -->
  </body>
</html>

Layout default com Twitter Bootstrap (Haml)

Se você estiver usando Haml, remova app/views/layouts/application.html.erb e substitua por app/views/layouts/application.html.haml com o seguinte conteúdo:

!!!
%html
  %head
    %meta{:charset => "utf-8"}
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1, maximum-scale=1"}
    %title= content_for?(:title) ? yield(:title) : "Myapp"
    %meta{:content => "", :name => "description"}
    %meta{:content => "", :name => "author"}
    = stylesheet_link_tag    "application", :media => "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
    = yield(:head)
  %body
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          = render 'layouts/navigation'
    #main{:role => "main"}
      .container
        .content
          .row
            .span12
              = render 'layouts/messages'
              = yield
          %footer

Navegação

Provavelmente você vai precisar de um mecanismo de navegação nas páginas da aplicação. Vai querer incluir um link em cada página apontando para a Home. Se você implementou autenticação com uso de Devise vai precisar de links para Login, Logout e Cadastramento. Se você implementou autenticação com uso de OmniAuth vai precisar de links para Login e Logout. Se você projetou uma área administrativa vai precisar de um link para o Administrador.

Você poderá criar links diretamente no layout da sua aplicação, mas muitos desnvolvedores preferem criar um partial template – um "partial" – tendo em vista uma melhor organização do layout default da aplicação.

Examplo de navegação para Devise (ERB)

Crie o arquivo app/views/layouts/_navigation.html.erb para a navegação.

Para Devise use os seguintes links:

<%= link_to "Home", root_path, :class => 'brand' %>
<ul class="nav">
  <% if user_signed_in? %>
    <li>
    <%= link_to('Logout', destroy_user_session_path, :method=>'delete') %>        
    </li>
  <% else %>
    <li>
    <%= link_to('Login', new_user_session_path)  %>  
    </li>
  <% end %>
  <% if user_signed_in? %>
    <li>
    <%= link_to('Edit account', edit_user_registration_path) %>
    </li>
  <% else %>
    <li>
    <%= link_to('Sign up', new_user_registration_path)  %>
    </li>
  <% end %>
</ul>

Examplo de navegação para Devise (Haml)

Para Haml com Devise crie o arquivo app/views/layouts/_navigation.html.haml:

= link_to "Home", root_path, :class => 'brand'
%ul.nav
  - if user_signed_in?
    %li
      = link_to('Logout', destroy_user_session_path, :method=>'delete')
  - else
    %li
      = link_to('Login', new_user_session_path)
  - if user_signed_in?
    %li
      = link_to('Edit account', edit_user_registration_path)
  - else
    %li
      = link_to('Sign up', new_user_registration_path)

Mensagens com Twitter Bootstrap

Rails prevê um mecanismo padrão para mostrar mensagens de alertas (inclusive de errros) e outras notificações denominado Rails "flash messages" (tal como "flash memory". Não confundir com a plataforma proprietária de desenvolvimento "Adobe Flash").

Você poderá criar código diretamente no arquivo de layout da sua aplicação para gerar mensgens ou opcionalmente criar um "partial".

Rails usa :notice e :alert como chaves para mensagens. Twitter Bootstrap prevê a classe .alert e as classes adicionais .alert-success e .alert-error (ver Bootstrap documentation on alerts). Parseamento adicional é requerido para estilizar mensagens Rails "notice" com as regras de estilo para a classe "alert-success" do Twitter Bootstrap. Qualquer outra mensagem Rails "alert" será estilizada com as regras de estilo para a classe "alert-error" do Twitter Bootstrap.

Twitter Bootstrap prevê o uso de um plugin jQuery denominado bootstrap-alert que reduz a tarefa de apresentar flash messages a um simples clique. A propriedade data-dismiss apresenta um "x" que permite fechar a funcionalidade. Notar que Twitter Bootstrap usa a entidade HTML "×" no lugar da letra "x" do teclado.

Por padrão Twitter Bootstrap aplica um fundo na cor verde para a classe.alert-success e vermelha para.alert-error. Twitter Bootstrap prevê ainda uma classe .alert-info com um fundo na cor azul. Com poucas linhas de código é possível criar um nome, tal como :info para Rails flash message a ser estilizada segundo as regras CSS para a classe .alert-info do Bootstrap. Contudo é conveniente ficarmos com as convenções padrão de Rails usando somente "alert" e "notice."

Flash Messages com Twitter Bootstrap (ERB)

Para estilizar flash messages com Twitter Bootstrap usando ERB crie um "partial" em app/views/layouts/_messages.html.erb como mostrado a seguir:

<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "error" %>">
      <a class="close" data-dismiss="alert">&#215;</a>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

Flash Messages com Twitter Bootstrap (Haml)

Para estilizar flash messages com Twitter Bootstrap usando Haml crie um "partial" em app/views/layouts/_messages.html.haml como mostrado a seguir:

- flash.each do |name, msg|
  - if msg.is_a?(String)
    %div{:class => "alert alert-#{name == :notice ? "success" : "error"}"}
      %a.close{"data-dismiss" => "alert"} ×
      = content_tag :div, msg, :id => "flash_#{name}"

Twitter Bootstrap prevê um plugin jQuery denominado bootstrap-alert que reduz a tarefa de apresentar flash messages a um simples clique. A propriedade data-dismiss apresenta um "x" que permite fechar a funcionalidade. Notar que Twitter Bootstrap usa a entidade HTML "×" no lugar da letra "x" do teclado.

Opções e melhorias

Esse tutorial apresentou os fundamentos do uso do Twitter Bootstrap com Rails incluíndo mensagens de alerta, notificações e layout da aplicação com uso de Twitter Bootstrap.

Há muito mais coisas que você pode fazer com Twitter Bootstrap. Pra um exemplo avançado consulte RailsApp rails-prelaunch-signup. O tutorial rails-prelaunch-signup tutorial mostra como usar Twitter Bootstrap para criar uma janela modal e também o uso de AJAX para um formulário de cadastramento para uma aplicação "Web 2.0". Quando o usuário envia o formulário a janela modal mostra uma mensagem de "Obrigado" (ou uma mensagem de erro) sem recarregar a página.

Sugestões? Melhorias? Deixe um comentário no artigo original.