Twitter Bootstrap es un framework que nos ayuda a desarrollar de forma rápida aplicaciones web. Provee una amplia variedad de código CSS y Javascript para implementar layouts, navegaciones y formularios, así como soporte para diseño adaptativo (Responsive Web Design).
Una opción para usar Bootstrap es la de descargarnos desde la página del framework el CSS y el Javascript e importarlos en el directorio /app/assets/ de nuestro proyecto rails, pero esta no sería la mejor manera de hacerlo si usamos Rails. Twitter Boostrap está escrito con LESS, que es un preprocesador de CSS similar al que usa Rails (SASS), así que si queremos aprovechar todo el potencial de Bootstrap, deberíamos usar un lenguaje como LESS, en lugar de ficheros estáticos. Para integrar LESS con Rails debemos usar varias gemas, como twitter-bootstrap-rails, que es la que yo he usado, aunque hay otras opciones.
Para integrar Bootstrap debemos partir de una aplicación rails ya creada mediante la orden rails new [nombre_app], así como algún modelo del tipo rails g scaffold product name price:decimal –skip-stylesheets. Hemos utilizado la opción --skip-stylesheets porque queremos utilizar las CSS de Bootstrap en lugar de la que sería generada automáticamente. Después, generamos la tabla en base de datos con rake db:migrate. Una vez hecho esto ya es posible ejecutar la aplicación pero con un aspecto nada atractivo todavía. Es hora de integrar Bootstrap.
Lo primero que hay que hacer es añadir la gema twitter-bootstrap-rails al fichero Gemfile que se encuentra en el directorio raíz de la aplicación.
/Gemfile # Gems used only for assets and not required # in production environments by default. group :assets do gem 'sass-rails', '~> 3.2.3' gem 'coffee-rails', '~> 3.2.1' # See https://github.com/sstephenson/execjs#readme for more supported runtimes # gem 'therubyracer' gem 'uglifier', '>= 1.0.3' gem 'twitter-bootstrap-rails' end
Instalamos twitter-bootstrap-rails y sus dependencias (libv8 y less-rails) ejecutando bundle install. Una vez ejecutada la orden anterior, llamamos al generador para finalizar el proceso de instalación y colocar Bootstrap (javascript, css) en el directorio /app/assets.
$ rails g bootstrap:install insert app/assets/javascripts/application.js create app/assets/javascripts/bootstrap.js.coffee create app/assets/stylesheets/bootstrap_and_overrides.css.less gsub app/assets/stylesheets/application.css gsub app/assets/stylesheets/application.css
En el directorio css está situado el fichero bootstrap_and_overrides.css.less, que es el sitio ideal para personalizar nuestros estilos de la aplicación. De echo, si ejecutamos a continuación la aplicación, veremos que la misma tiene otro aspecto, aunque aún es mejorable.
A partir de ahora empezaríamos a diseñar el layout de la aplicación. Editaremos el fichero application.html.erb para incluir el header (encabezado) de todas las páginas de la aplicación:
/app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>Store</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html>
Con el código insertado entre los tags head mejoramos el comportamiento de HTML5 para versiones anteriores de Internet Explorer, e incluimos los META para incluir Responsive Design para su mejor visualización en los dispositivos móviles. A partir de este momento podemos incorporar cualquier elemento que aparece en la sección de componentes de Bootstrap siguiendo la documentación existente, de manera fácil e intuitiva y utilizando el fichero bootstrap_and_overrides.css.less para personalizar los estilos.
Lo Básico
Si nunca has utilizado Bootstrap debes saber que utiliza un sistema de rejilla de 12 columnas, lo que facilita la creación de un layout especificando la anchura de cada columna. Este layout será responsive, por lo que si modificamos el ancho de la ventana, el contenido se adaptará al nuevo ancho, ideal para visualizar el diseño con un smartphone o tablet. Un ejemplo sería el siguiente, que crea una barra lateral con tamaño de 3 columnas (span3) y el contenido de nuestra aplicación en 9 columnas (span9).
/app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>Store</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <div class="row"> <div class="span9"><%= yield %></div> <div class="span3"> <h2>About Us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </body> </html>
Para añadir una barra de navegación responsive en la parte superior de la pantalla, cuyo menú se colapse en un icono desplegable con los enlaces del menú cuando el ancho de la ventana se reduzca, Bootstrap incluye estilos para el siguiente código:
/app/views/layouts/application.html.erb
<div>
<div>
<div>
<a data-toggle="collapse" data-target=".nav-collapse">
<span></span>
<span></span>
<span></span>
</a>
<a href="#">Some Store</a>
<div>
<ul>
<li><%= link_to "Browse Products", products_path %>
</li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</div>
</div>
</div>
En este post hemos visto como integrar Bootstrap en una aplicación rails mediante twitter-bootstrap-rails, como personalizar los estilos en el fichero bootstrap_and_overrides.css.less mediante LESS y como incorporar componentes básicos en nuestra aplicación.