martes, 14 de mayo de 2013

Como utilizar el Bootstrap de twitter en Grails

¿Qué es el Bootstrap de twitter?
Twitter Bootstrap es una solución flexible que ofrece muchas más potencia que el CSS normal. Conseguimos una serie de características extras como las declaraciones anidadas, mixins, operaciones y funciones de color. Es fácil de implementar en el código tan sólo incluyendo la declaración en la cabecera y usar los componentes disponibles. La evolución de Bootstrap dentro de Twitter ha sido un trabajo constante para disponer de una herramienta que les permitiera escalar más fácilmente y mantener los proyectos que iban desarrollando. Al principio de todo cada ingeniero usaba cualquier librería con la que estuviera familiarizado lo que producía graves inconsistencias al intentar crecer. Por lo tanto Twitter Bootstrapes un gran ejemplo para todos los desarrolladores que trabajamos en compañías grandes en la que es necesario disponer de un framework uniforme para ir evolucionando. Podéis echar un vistazo a todo el código en la sección que dispone Twitter en GitHub. Allí comprobaréis todo lo los archivos que lo componen por separado:
- reset.css para eliminar los elementos innecesarios.
-variables de color y preboot.less mixins para conseguir gradientes, transparencias y transiciones.
scaffolding.less elementos básicos y globales para generación de grid, diseño estructural y las diferentes plantillas de páginas.
- type.less con estilos para el cuerpo de textos, listas y tipologías versátiles.
-pattern.less elementos para navegación, modales, paneles de advertencias…
-forms.less estilos para los campos de entrada, formularios y estados de validación.
-tables.less estilos para maquetar datos tabulados.
 Mas info en: https://dev.twitter.com/blog/bootstrap-twitter 
Referencia: http://www.genbetadev.com/desarrollo-web/twitter-libera-bootstrap-su-framework-css-para-aplicaciones-web



¿Como agrego el Bootstrap a mis proyectos Grails?

Todo lo que tenemos que hacer es simplemente crear un nuevo proyecto de Grails, luego podemos instalar el Bootstrap como plugin como se muestra a continuación:



Y para usarlo simplemente debemos importar esta línea en el head de nuestras GSP y en el body.

<r:require modules="bootstrap"/>

 Ahora podemos hacer uso de los elementos que nos proporciona el framework de los cuales podemos ver mas aquí: http://twitter.github.com/bootstrap/components.html

En lo personal me agrado mucho, y aunado a ello también podemos agregarle características por medio de less, del cual hablaremos mas adelante, me gustaría mucho conocer su opinión al respecto de este framework.

No hay comentarios:

Publicar un comentario