hazlo_lucir_bien_con_bootstrap.step

requirements do
message <<-MARKDOWN
* El sitio deberá usar Bootstrap para un estilo moderno.
* Cuando inicies sesión, el correo del usuario deberá aparecer en la parte superior derecha en la esquina de la barra de navegación.
MARKDOWN
  img class: 'noborder', src: 'img/header.png'
end

important do
  h2 "¡Establece un límite de tiempo!"
  p "El propósito de esta sección es hacer tu aplicación visualmente atractiva y demostrar cómo agregar un framework CSS como Bootstrap usando Gemfile. No te preocupes por tener tu CSS perfecto, a menos que eso sea una prioridad para ti."
end

discussion do 
message <<-MARKDOWN
* Herramientas de desarrollo de Chrome / plugin Firebug de Firefox - ¡cómo utilizarlas!
* ¿Qué es Bootstrap y (opcional) por qué todos lo aman (o al menos lo utilizan en todos lados)?
* Tal vez revisar el archivo home/index.html.erb y cómo se relaciona con layouts/application.html.erb, y ver cómo podrías editarlos para tomar ventaja de bootstrap.
* Alguien debe explicar cómo funciona erb - lo estarás usando para mostrar el correo del usuario en la parte derecha.
MARKDOWN
end

tools_and_references do
message <<-MARKDOWN
* ¡¡Una gema para Bootstrap!! Vamos a usar la gema bootstrap-sass-rails: https://github.com/yabawock/bootstrap-sass-rails
* La documentación de Bootstrap: http://getbootstrap.com/css/
* Aquí hay un link para la sección de la barra de navegación: http://getbootstrap.com/components/#nav
* Referencias para HTML y CSS: http://www.htmldog.com/
MARKDOWN
end

hints do
message <<-MARKDOWN
* ¡No olvides leer el readme!
* Existen un par de formas para mover el texto - busca "Component alignment" en la documentación.
* Devise tiene un método helper para accesar al usuario actual - regresa al readme de devise y búscalo.
MARKDOWN
end

h1 "Una Gran Pista"
message "Si no puedes conseguir el código HTML para la barra de navegación con Bootstrap, o quieras moverte rápido a la siguente página, aquí hay un código que puedes usar en tu diseño (¡después de instalar Bootstrap!) que funcionará. El código deberá ir inmediatamente después de tu etiqueta &lt;body&gt;."
pre <<-MARKDOWN
<div class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Tablero de Mensajes</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="/">Inicio</a></li>
    </ul>
    <p class="navbar-text pull-right">usuario_con_sesion@email.com | <a href="log_out_link_here">Cerrar Sesión</a></p>
  </div>
</div>
MARKDOWN

message "***¡Todavía tienes que agregar código para mostrar el usuario que inició sesión y agregar un botón para cerrarla!***"

next_step "agrega_paginas_para_crear_e_inspeccionar_post_individuales"