Pensaba escribir una entrada sobre como hacer que se vean los glyphicons luego de instalar la gema de boostrap en rails 4; pero, recientemente he recibido numerosas críticas, sobre entradas de mi blog. Dicen que hablo sobre como solucionar problemas de cosas que ni si quiera conocen pero al parecer están muy buenas.

Bootstrap es un framework CSS patrocinado por Twitter y es el fin de los dolores de cabeza para todo el que como yo, le tiene terror a programar CSS. Por supuesto, como todo en materia de framework, tiene sus pro y sus contras.

La ventaja de usar un framework, es que te ahorras un mundo de código. La ventaja además; de usar un framework CSS, es que estás de manera automática arriba de los último en materia de CSS.

La desventaja de usar un Framework (cea CSS o no) es que en la mayoría de los casos, carga mil y un elemento que nunca usarás. Por ejemplo, tengo una aplicación que NO usa carrousel; pero como está hecha a la carrera, no he tenido tiempo de determinar que elementos o no cargar con bootstrap. Por definición, se cargan todos.

En nuestro Gemfile, debemos declarar que use bootstrap así:

1

gem "twitter-bootstrap-rails"

Luego, procedemos a la instalación del tema CSS, en mi caso, como no uso less ni nada de eso, lo hago así:

1

rails generate bootstrap:install static

Con eso, supuestamente ya está listo. Pero como todo en ruby on rails se queda atrás, resulta que el asset pipeline moderno no carga las fuentes y en el fichero application.css hay que añadirle el siguiente código:

1
2
3
4
5
6
7
8
9
10

/* Esto va al final de la CSS */

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../assets/glyphicons-halflings-regular.eot');
  src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../assets/glyphicons-halflings-regular.woff') format('woff'),
       url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

¿Qué como conseguí eso? Ni preguntes, me lo mandó por correo un salvaje de la materia.

Otra cosa:

Si no sabes usar boostrap, te recomiendo que le eches un vistazo. Si sabes escribir CSS, te recomiendo que lo veas igual, pues tiene una buena API para personalizarlo como te de la gana.

pero está la gema bootstrap-sass

Sí, ya se que está bootstrap-sass, que es además es el port oficial de bootstrap y que rails usa SASS; pero te imaginarás el criterio que tengo sobre sass.

Por mi, coffe-script y sass pueden cogerlos, doblarlos bien y meterselos ambos en el…. BOLSILLO. El programador web que no quiera aprender JavaScript y CSS está embarcao. Por otra parte, para aprender SASS y CoffeScript hay que saber CSS y JavaScript :D ¿Que problema verdad?

Helpers de utildad

La diferencia entre bootstrap-sass y twitter-bootstrap-rails es que boostrap-sass la hizo la gente de bootstrap y la segunda, la hicieron usuarios de ruby on rails…

Te explico:

1
2
3

<%= nav_bar brand: "Páfata" do %>
    <%= menu_text "El texto de la barra" %>
<% end %>

Eso generará un navbar como este:

1
2
3
4
5

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
  <a class="navbar-brand" href="http://127.0.0.1:3000/">Páfata</a>
  <p class="navbar-text">El texto de la barra</p>
</div></nav>

Si eso no te pareció emocionante, mira el helper de flash. Ponte tu que halla un error y lo metes en el flash.

1
2
3
4

def fulanito
   flash[:error]='Bofatás! El error del milenio'
   render :fulanito
end

En la vista, pones está simple linea:

1

<%= bootstrap_flash %>

Y se renderiza:

1
2
3
4

<div class="alert fade in alert-danger ">
<button class="close"data-dismiss="alert">&times;</button>
Bofatás! El error del milenio
</div>

Échale un vistazo al link de abajo, pa que veas como renderizan breadcumb declarando los componentes en los controladores.

Mas detalles aquí: https://github.com/seyhunak/twitter-bootstrap-rails