domingo, 4 de noviembre de 2012

Layout en Ruby on rails con Bootstrap de Twitter

Vamos a desarrollar un controlado llamado "default" que contendrá la parte publica de nuestra aplicación. Para crearemos un layout llamado bootstrap usando el framework css Bootstrap de twitter

En  el enlace anterior podrán descargar los archivos y verán la documentación de la librería que nos ayudará en la aceleración dejando en segundo plano temas de css.

Para esto mi editor es Sublime Text 2 y tengo un proyecto generado llamado "support":



Paso 1: Creamos el archivo Layout.

Nos dirigimos a la carpeta app/views/layouts ahí crearemos un archivo que lo llamaré bootstrap.html.erb, con esto tenemos para el proyecto un nuevo layout llamado "bootstrap", en los futuros controladores que generes le agregaras una propiedad layout para asignarle el nombre del layout a cargarse siempre.


Paso 2: generamos un controlador y le asignamos el layout.

Abrimos un terminal y nos dirigimos a la carpeta del proyecto generado y ejecutamos el siguiente comando para generar un nuevo controlador que lo llamaré "default".


rails g controller default index


Al ejecutar esto, se generarán varios archivos y carpetas pero por ahora solo nos interesa los archivos controlador "default" y vista "index".


En la imagen anterior se observa el controlador con su respectiva vista, abrimos el controlador y vemos el método index que habíamos dicho por defecto en el comando anterior, sobre este método esta una linea  donde le decimos que este controlador se cargará el layout que deseemos.

Si queremos que todos los controladores carguen un layout que preparemos para un determinado proyecto hay que siempre agregar esa linea.


Paso 3: Preparamos el bootstrap de twitter con Ruby on Rails

Descargamos los archivos de bootstrap de su sitio web oficial: http://twitter.github.com/bootstrap/

Primero vamos a intentar solo con los archivos CSS los ubicaremos en la carpeta stylesheets de app/assets/stylesheets


El archivo que creamos en el paso 1  agregamos los css de la librería que descargamos, quedará de manera similar:



Paso 4: Usando Bootstrap en las vistas de los controladores

Ahora en la vista del default vamos a codificar puro HTML pero al estilo y reglas como las dice Bootstrap, invito a leer un poco sobre este muy buen framework de CSS.


Para que funcione copio el código HTML aquí, pero aconsejo que lean un poco de este framework:

   <!-- Contenedor de general-->
    <div class="container">
            <header>
                <!-- Title-->
                <div class="row">
                    <div class="span12">
                        <h1><a href="#">Twitter BootsTrap</a></h1>
                        <p>Trabajando con Twitter BootsTrap</p>
                    </div>
                </div>
                <!-- Fin del title-->
                <!-- Banner-->
                <div class="row">
                    <div class="span12">
                        <img src="http://lorempixel.com/1170/300/nature" alt="">
                    </div>
                </div>
                <!-- Fin del Banner-->
                <!-- Inicio del Menu-->
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul class="nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Fin del Menu-->
            </header>
            <section class="row">
                <div class="span12">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/2" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/3" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/4" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/5" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>                       
                    </ul>
                </div>
            </section>
    </div>
    <!-- Fin del Contenedor-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Ahora solo queda explotar al máximo las ventajas que tendrán con este buena herramienta y poco a poco vamos tomando soltura para desarrollar nuestro proyecto y themes para diversos proyectos.




3 comentarios:

  1. Gracias por el tutorial. Me ayudó en algo muy básico, como agregar un layout más a mi aplicación.

    ResponderEliminar