Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jade
Webdesign

Horneando Snippets de Bootstrap con Jade

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Santiago Carnago (you can also view the original English article)

Final product image
What You'll Be Creating

Podría decirse que la mayor fortaleza del siempre popular framework Twitter Bootstrap es que ofrece un sistema completamente funcional de CSS y JavaScript listo para usar.

Este código pre-elaborado ofrece casi todo lo que puedas desear en un sitio web, desde la tipografía hasta el control de la maquetación, a docenas de "componentes" como barras de navegación, botones, paneles, cajas de alerta y mucho más.

Debido a que pasarás muy poco tiempo o quizás ninguno escribiendo CSS y JavaScript para un sitio hecho con Bootstrap, el desarrollo se convierte casi en su totalidad en producción de código HTML. Por lo tanto, si usted puede encontrar formas de producir código HTML lo más rápido y sencillo posible, todo el flujo de trabajo de Bootstrap puede llegar a ser increíblemente eficiente.

Creando un código HTML mucho más potente

Una de las herramientas más eficaces que se pueden utilizar para acelerar la producción de código HTML es Jade, un lenguaje de plantillas open source, totalmente gratis.

Jade puede pasar bajo el estandarte de "lenguaje de plantillas", pero no dejes que eso te haga pensar que necesitas trabajar con "plantillas" para aprovechar sus beneficios. También funciona de dos maneras adicionales que pueden ser de gran utilidad para todo tipo de producción de código HTML:

  • Como herramienta de HTML abreviado que permite reducir drásticamente la cantidad de código que se necesita escribir.
  • Como un "preprocesador" de HTML que funciona como los preprocesadores de CSS, añadiendo la posibilidad de usar lógica y crear "mixins": bloques reutilizables de código que mantienen el flujo de trabajo DRY.

Si utilizas HTML absoluto, y sobre todo si estás muy centrado en crear código HTML cuando utilizas Bootstrap, una vez que pruebes Jade nunca vas a desarrollar otro proyecto sin él.

Jade potenciado con Snippets de Bootstrap

En este tutorial vamos a utilizar Jade para generar algunos de los componentes más utilizados dentro del framework Bootstrap.

De HTML plano a Jade

Para cada componente, primero observaremos el código HTML plano necesario, luego vamos a reducirlo a código Jade. Tendrás la oportunidad de comparar directamente los dos códigos; ver la reducción de la cantidad requerida de código y el nuevo estilo de formato compacto y limpio que ofrece Jade.

Tenga en cuenta que vamos a centrarnos en los snippets (fragmentos de código) de Jade, en lugar de ir a través de cómo funciona Jade en sí mismo. Dicho esto, lo más importante a tener en cuenta en los ejemplos de código que verás a continuación, es el nivel de sangría (indentación) que en Jade crea un nivel de elemento anidado en el código HTML resultante.

Por ejemplo, la siguiente indentación en Jade:

compilaría el siguiente código anidado en HTML:

Para aprender más sobre cómo funciona Jade revisa las lecciones introductorias gratuitas de mi más reciente curso Máxima velocidad de desarrollo HTML con Jade.

Mixins de Jade

Los mixins de Jade son bloques de código reutilizables. Si tienes algún código que sabes tendrás que colocar en repetidas ocasiones, este se puede definir en términos de un mixin . Entonces, cada vez que utilice ese mixin se mostrará el código de forma automática.

Por ejemplo, tomemos el siguiente mixin llamado “article”:

podría ser reutilizado en varias ocasiones en un documento de la siguiente forma:

y compilaría el siguiente código HTML:

Después de convertir nuestros componentes de Bootstrap de código HTML plano a Jade, vamos a reducirlo aún más convirtiendolos en "mixins" de Jade. No utilizaremos mixins para todo, sólo donde su uso ahorrará una cantidad significativa de tiempo, esfuerzo y reduce la duplicación del código.

Además, incluso cuando haga uso de los mixins, incluiré ejemplos del código estricto de Jade para el componente en cuestión. De esta forma verás cómo se desarrolla el proceso de pasar de HTML a Jade y a un mixin.

Cómo configurar Jade para su uso

Lo primero que tendrás que hacer es obtener una configuración para trabajar con Jade. Necesitarás un entorno de codificación para realizar la compilación automática del código de Jade en HTML.

Pásate por el curso "Máxima velocidad de desarrollo HTML con Jade" y mira la segunda lección, Configuración rápida y fácil. Es gratis, y te llevará a través de todo lo que necesita saber para obtener una configuración lista para usar Jade.

Para este tutorial, te recomiendo elegir el método que aparece en el video y que explica el uso de Sublime Text 3 y Prepros.

Una vez que hayas terminado de ver el video y seguir los pasos que se establecen, ya estás listo para comenzar tu proyecto con Bootstrap.

Creación de un documento básico

En este punto, debes tener un archivo llamado "index.jade" listo para ser trabajado. Si existe algún código en el archivo en este momento, por favor, elimínelo, que quede completamente en blanco.

Vamos a comenzar creando el código HTML básico para el documento principal de su proyecto de Bootstrap, añadiendo las etiquetas esenciales y la carga del CSS requerido por Bootstrap y los archivos JavaScript más la librería jQuery.

Vamos a tomar ventaja del CDN de Bootstrap y de las API de Google para cargar cada uno de estos archivos necesarios y evitar tener que descargarlos:

Como se mencionó anteriormente, se mostrará el código HTML para cada elemento que creemos, pero sólo estará para propósitos demostrativos, y que puedas compararlo con su contraparte de Jade.

No es necesario utilizar nada del código HTML plano que se ve, en ninguna manera. Más bien, usted debe centrarse en las secciones marcadas para Jade Convertir a Jade y Agregar _____ Mixins.

El HTML plano

El siguiente código establece un página básica y sus elementos doctype, html, head, title, meta, body. Adicionalmente, carga el CSS de Bootstrap y los ficheros JavaScript más la librería de jQuery, y crea un elemento div con la clase .container aplicada, todos los componentes que creemos serán ubicados dentro.

Convertir a Jade

A continuación, tenemos el equivalente en Jade del código HTML plano que se vio en la sección anterior. Copia y pega este código en el archivo "index.jade" y guárdelo.

Después que la compilación ha sido completada (de forma automática a través de Prepros), abra el archivo "index.html" que se ha generado. En el interior, debes ver una coincidencia exacta con el HTML mostrado anteriormente.

A pesar que no estamos creando ningún mixin como parte de esta etapa, lo que vamos a hacer es sentar las bases para los mixins que se crearán más adelante.

Preparar para añadir mixins

Cree un archivo llamado "mixins.jade" en la misma carpeta donde están alojados los archivos de Jade existentes. Todos los mixins que creemos más tarde se escribirán en este archivo.

Al principio del fichero “index.jade” agrega esta línea:

Esta línea va a importar el archivo mixins, permitiendo que los mixins escritos su interior estén a disposición del fichero "index.jade".

Ahora, estamos listos para comenzar a añadir componentes de Bootstrap.

Nota: Todo el código de los siguientes componentes de Bootstrap deben añadirse en el interior del div con la clase .container.

Componente Navbar

El primer componente de Bootstrap que vamos a convertir a Jade es el componente navbar, incluyendo la sección branding (el primer elemento en la barra), items de menú superior, un menú desplegable (dropdown) conteniendo un divisor y una cabecera de dropdown, así como un botón para expandir el menú cuando está en formato colapsado para pantallas de menor tamaño.

El HTML plano

El HTML plano que se utiliza normalmente para crear el componente de barra de navegación mostrado en la imagen anterior es:

Convertir a Jade

Convertido y formateado en Jade el componente de barra de navegación luce así:

Agregar mixins del Navbar

Aunque la versión de Jade del componente barra de navegación es más conciso y fácil de mirar que el HTML plano, todavía podemos realizar una mejora aún mayor al externalizar la mayor parte del código en mixins.

Agrega el siguiente código a tu fichero “mixins.jade”:

En el código anterior de Jade hemos creado cinco mixins diferentes:

  1. nav - utilice este mixin para inicializar el componente de barra de navegación y sus elementos primarios, establezca un estilo visual de "default" o "inverse", y escriba el texto que aparecerá en la sección de branding.
  2. nav_item - emplear este mixin para añadir elementos de menú individuales anidados bajo el mixin nav
  3. nav_item_dropdown - utilice este mixin para colocar un elemento de navegación con un menú desplegable anidado dentro
  4. nav_divider - utilizar para colocar un separador de anidado bajo un nav_item_dropdown del mixin de menu
  5. nav_header - utilizar para colocar un encabezado dentro de un menú desplegable, después de un mixin nav_divider

Eso podría no tener sentido inmediatamente, pero continua leyendo para ver estos mixins en acción y todo quedará aclarado.

Uso de los mixins de Navbar

Con los mixins de navbar listos para su uso, la colocación de los componentes del navbar se convierte en una tarea mucho más simple.

Ubica el mixin “nav”

Comienza colocando el mixin nav para inicializar el menú en general de la siguiente forma:

Entre los parentesis unidos al mixin nav estarás pasando dos piezas de información, llamados argumentos, cada uno entre comillas. El primer argumento establece el texto que aparecerá en la sección branding del componente de navegación. El segundo establece un identificador único (ID) para el componente de navegación.

Una vez compilado, debes ver este resultado cuando se visualiza el archivo HTML en un navegador:

Color de Navbar inverso

Para cambiar el color del componente de barra de navegación de predeterminada a inverso ("inverse") debes añadir un tercer argumento de este modo:

Esto cambiará los colores del navbar para obtener este aspecto:

Ubicar elementos del Nav

A continuación usaremos nuestro mixin nav_item para agregar tres enlaces de menú superior

Tenga en cuenta que cada instancia del mixin nav_item está indentado por un nivel más en relación al mixin nav. Esto establece que cada nav_item será un hijo del mixin nav.

En este caso el primer argumento que está siendo pasado, ej. “index.html”, establece el enlace que será aplicado al elemento del menú. El segundo argumento (y opcional) agrega una clase active que destaca el elemento activo del menú.

Después de compilar su componente navbar debería tener este aspecto:

Ubicar un elemento Nav dentro del Dropdown Menu

Ahora podemos seguir adelante y añadir otro elemento de menú con un menú desplegable alojado en el interior, empleando el mixin nav_item_dropdown:

Esto añade un nuevo elemento con una flecha que indica la existencia de un menú hijo, y el contenedor para el propio menú hijo:

Colocar elementos Dropdown Nav

Nuestro nuevo menú desplegable no contiene aún elementos dentro, así que aquí podemos utilizar nuevamente nuestro mixin nav_item para agregar algunos.

Mientras estamos en ello, vamos a utilizar nuestro mixin nav_divider para agregar una línea divisoria dentro del desplegable, y nuestro mixin nav_header para agregar algún texto de cabecera justo debajo.

Estas incorporaciones completarán nuestro código del componente de la barra de navegación:

Este código se compila en un componente de barra de navegación totalmente funcional en HTML, y luce así:

Nuevamente, eche un vistazo rápido a las 30 líneas originales de código HTML plano necesarias para el componente de la barra de navegación y observe cómo se construye un menú mucho más rápido (después de crear mixins reutilizables infinitamente) cuando se acorta el código a sólo 12 líneas con Jade en lugar de 30.

Cuadrícula: Ejemplo de tres columnas

Bootstrap está dotado de un sistema de cuadrículas a doce columnas y un conjunto de clases asociadas que permiten determinar cuántas columnas de ancho debe tener un elemento para diferentes tamaños de pantalla como medio (md), pequeño (sm) y extra pequeño (xs).

Puedes leer a todo detalle cómo funciona este sistema de cuadrículas en http://getbootstrap.com/css/#grid

En la imagen siguiente se observan tres paneles con divs interiores que comienzan con 4 columnas de ancho cada uno para tamaño "medio" o mayor, colapsando a seis columnas cada uno en tamaño "pequeño", y a 12 columnas cada uno en tamaño "extra pequeño".

El HTML plano

El HTML plano requerido para estas tres columnas es como sigue:

Comenzamos creando un div con la clase row, luego anidados dentro, se disponen tres divs que contendrán los paneles ilustrados anteriormente.

Cada div lleva la clase col-md-4 establecida para que sean cuatro columnas de ancho en tamaño medio o superior. Siguiendo está la clase col-sm-6 establecida para que sean seis columnas de ancho en tamaño pequeño, y finalmente la clase col-xs-12 establece doce columnas de ancho en tamaño extra pequeño.

Convertir a Jade

En el código de Jade podemos omitir todas las aperturas y cierres de divs y simplemente escribir directamente las clases obligatorias, de este modo:

Componente del Panel

Ahora, vamos a crear los componentes del panel que viste ilustrados en la sección anterior:

El HTML plano

El HTML plano para el componente del panel es mucho más sencillo en comparación con el componente de la barra e navegación. Tenemos que utilizar sólo tres div, con un total de cuatro clases requeridas para agregar el estilo correcto:

Convertir a Jade

Convertirlo en Jade hace que sea un poco más sencillo:

Agregar el mixin del Panel

La razón por la que estamos creando un mixin para este componente es para ahorrar no tener que recordar los cuatro nombres de clases o cada uno de los divs requeridos que deben envolverse unos a otros.

Agrega el siguiente código a tu fichero de “mixins.jade”:

Uso del mixin Panel

Para colocar el componente de panel ahora sólo tienes que utilizar el mixin panel, pasando el texto que desea utilizar en el título, como un argumento. A continuación, deje un espacio y escriba el contenido del panel después que el mixin es colocado:

Bootstrap ofrece varios estilos de paneles. Para cambiar el estilo del panel a cualquier otro, pase el nombre del estilo como segundo argumento, de este modo:

Botones

A continuación, vamos a echar un vistazo a la creación de instancias de botones en Bootstrap.

Al igual que con el componente del panel de la última sección, el HTML plano es bastante simple para los botones, sin embargo, mediante la creación de mixins eliminamos la necesidad de recordar toda la sintaxis necesaria para utilizarlos.

El HTML plano

Convertir a Jade

Agregar el mixin Button

Además de determinar qué estilo tendrá un botón, este mixin también aplica un enlace y permite que el tamaño del botón se pueda cambiar.

Uso del mixin Button

En su forma más simple, este mixin button puede ser utilizado de la siguiente manera, con el texto que aparecerá dentro del botón ubicado después de un espacio a continuación del mixin:

Esto creará un botón de tamaño y color predeterminado, y con el símbolo # establecido como enlace de destino.

El estilo del botón puede ser reestablecido pasando un nuevo nombre de estilo como primer argumento, y el enlace de destino puede pasarse como el segundo argumento:

El tamaño del botón también se puede cambiar mediante el uso de un tercer argumento que puede ser alguno de estos "large", "small" o "mini":

Componente Alert

Los componentes Alert son muy similares a los botones de Bootstrap, pero mucho más simples debido a que no necesitan tener un enlace de destino aplicado a ellas y tampoco necesitan variaciones de tamaño.

Escribir alertas en HTML plano puede ser un poco difícil ya que tienes que recordar todas las clases asociadas, junto con la forma de agregar un botón con el símbolo "X" dentro que permite cerrar la alerta.

Vamos a armar un mixin para no tener que recordar ninguna de esas cosas. De esta forma colocar alertas será muy fácil.

El HTML plano

Convertir a Jade

Agregar el mixin Alert

Agrega el siguiente código a tu fichero “mixins.jade”:

Uso del mixin Alert

Para colocar una alerta simplemente utiliza el mixin alert, pase el estilo de la alerta como un argumento, y luego escriba el texto del contenido de la alerta immediatamente después de un espacio:

Componente Jumbotron

El Jumbotron es uno de los componentes más reconocibles de Bootstrap.

En este caso no vamos a crear un mixin. La colocación de un componente Jumbotron es muy rápido empleando código estricto en Jade. Esto servirá como ejemplo para mostrar que a pesar que los mixins son fantásticos, no siempre son necesarios, si no te vas a ahorrar un tiempo significativo.

El HTML plano

Convertir a Jade, incorporando el mixin Button

La colocación de un Jumbotron en Jade es realmente sólo una cuestión de escribir la clase .jumbotron en una línea y luego anidar el contenido dentro, en las líneas subsiguientes.

En el siguiente código, da un vistazo a cómo también hemos reutilizado el mixin button que habíamos creado antes, mostrando como puedes comenzar a mezclar e integrar estos elementos en conjunto:

Componente List Group

Bootstrap proporciona varios tipos de componentes de listas agrupadas. Vamos a generar tres de esos tipos de listas agrupadas, de la siguiente manera.

1. Tipo "List", produce un elemento ul con elementos li como hijos

2. Tipo "Links", produce una serie de elementos de texto con enlaces

3. Tipo "Default", produce elementos de texto sin enlaces

El HTML plano

Al igual que con algunos de los componentes explicados anteriormente, el código HTML para las listas agrupadas no es abrumadoramente complejo. Sin embargo, todavía podemos crearlas de una forma más eficiente mediante la creación de una serie de mixins que reducen la cantidad de código que se necesita escribir.

El HTML plano para cada tipo de lista agrupada es como sigue:

Tipo: List

Tipo: Links

Tipo: Default

Convertir a Jade

Convertido estrictamente a Jade, cada uno de los tipos de lista agrupada lucen así:

Type: List

Type: Links

Type: Default

Agregar mixin de List Group

Como hicimos con los mixins del componente de navegación, vamos a crear varios mixins para la lista agrupada que pueden anidarse para crear los diferentes tipos de listas agrupadas.

Agrega el siguiente código a tu fichero “mixins.jade”:

El primer mixin, listGroup, inicializa cualquiera de los tres tipos de lista agrupada y puede aceptar un argumento que determine el tipo de lista agrupada que se va a generar. La salida será un elemento ul sólo si el tipo de lista es especificado cuando se llame.

El segundo mixin, listItem, da como salida los elementos individuales de la lista. Si se especifica el tipo de lista, dará salida a cada elemento dentro de etiquetas li, y si el tipo links es especificado la salida de cada elemento será un enlace.

El tercer mixin, listHeading, resulta en una cabecera nivel h4 cuando se anida en un elemento de lista, y está destinado para su uso con los tipos de lista agrupada links y default.

Y finalmente el cuarto mixin, listText, muestra el texto que será incluido dentro de un elemento de lista, y también está destinado para su uso con los tipos de lista agrupadas "links" y "default".

Uso del mixin List Group

Tipo: List

Para crear un tipo "list" de lista agrupada utilice el mixin listGroup con list como argumento, y los mixins de listItem como se observa en el siguiente código:

Para establecer uno de los elementos de la lista con estilo activo pasa la palabra "active" como argumento, según muestra la segunda línea en el ejemplo de código anterior.

Tipo: Links

Para crear un tipo "links" de lista agrupada utilice el mixin listGroup, pero en esta ocasión pase la palabra links como argumento.

También debes seguir usando el mixin listItem, sin embargo, ahora estará mostrando enlaces por lo que debe incluir un argumento para cada enlace que indique el destino. Si vas a establecer que un elemento de lista enlazado tenga el estilo active, esta vez debes pasar la palabra “active” como tu segundo argumento.

Anidado dentro de cada mixin listItem puedes emplear los mixins listHeading y listText para establecer una cabecera y el texto regular para cada elemento:

Tipo: Default

El tipo de lista agrupada "default" es lo que se obtiene cuando no se pasa ningún argumento a través del mixin listGroup. Esta se usa prácticamente de la misma forma que el tipo de lista agrupada "links", con la diferencia que no necesitas pasar ningún enlace de destino cuando utilizas el mixin listItem:

Temas de Bootswatch

En todos los ejemplos que has visto hasta ahora he utilizado el tema Flatly de Bootswatch, cargado via el CDN de Bootstrap con este código en la sección head:

El último mixin que vamos a agregar a nuestro proyecto es un mixin para “Bootswatch”.

Este mixin hará que sea muy fácil cambiar temas, y también actualizar la dirección URL de su hoja de estilo más tarde si lo necesita. Esto es especialmente útil si necesitas actualizar varios archivos HTML a la vez.

Agregar el mixin de Bootswatch

Agrega el siguiente código a tu fichero “mixins.jade”:

Uso del mixin Bootswatch

En tu documento principal, remplaza la línea que enlaza a la hoja de estilo en Bootswatch con esto:

Ahora para cambiar a cualquier otro tema sólo remplaza la palabra flatly con el título del nuevo tema. Por ejemplo, para cambiar al tema Superhero utiliza:

Esto inmediatamente rediseñará visualmente tu sitio de esta forma:

Resumiendo

Yo espero que se hayan divertido mucho poniendo todos estos snippets de Jade a trabajar en sus proyectos de Bootstrap, y que les permitan ahorrar una gran cantidad de tiempo en el proceso.

Si hay algo que quieras hacer de forma diferente en tus propios proyectos de Bootstrap, con la belleza de los mixins de Jade puedes escribirlo y personalizarlo en la forma que elijas.

Jade es un lenguaje muy potente, se trata de un lenguaje intuitivo que puedes aprender y comenzar a utilizar a efectos prácticos con bastante rapidez.

Lecturas adicionales

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.