Cuando Utilizar Bootstrap para tu Tema Wordpress (Y Cuándo No)

() translation by (you can also view the original English article)

Busca en Google "Temas WordPress con Bootstrap" y obtendrás cientos de resultados. Aquí se incluyen guías para que sepas cómo usar Bootstrap para crear tu tema como los comerciales y gratuitos disponibles que utilizan el framework Bootstrap.

Busca 'Bootstrap' en el repositorio de temas de wordpress y obtendrás 199 resultados o más. Son muchos para elegir.

parece que desarrollar temas WordPress usando Bootstrap está de moda. Pero, ¿Es siempre el mejor enfoque para el flujo de trabajo de tu tema WordPress?

Voy a ver los pros y contras de usar Bootstrap para crear temas WordPress, y te ayudaré a identificar cuando usar Bootstrap ayudará a tu flujo de trabajo y cuándo no.

¿Qué es Bootstrap?

La web de Bootstrap lo describe como:

el framework HTML, CSS y JS más popular par desarrollar proyectos responsivos y mobile first en la web.

Esto te dice en par de cosas:

Bootstrap es responsivo y mobile first.
Utiliza HTML, CSS Y JavaScript.

Si estás prestando atención, notarás que esto no incluye PHP. Mientras Bootstrap es un framework, no es como un framework de tema: no te da ningún de los ficheros de plantilla que necesitarás para crear un tema. En cambio, lo que te da es un framework de estilos y scripts que harán más fácil que obtengas un sitio web responsivo y añade interacciones y eventos que requieren JavaScript.

Bootstrap fue desarrollado originalmente como un framework para ayudar a los desarrolladores de Twitter a trabajar más eficientemente y consecuentemente. Su anterior nombre fue Twitter Blueprint, que se cambió a Bootstrap después de que más desarrolladores se involucraran y el proyecto comenzó a crecer.

Fue liberado como un framework open source en 2011 y se ha utilizado para potenciar una variedad de aplicaciones, incluyendo los temas WordPress.

Cuando llegué por primera vez a Bootstrap, su punto fuerte era la capacidad de hacer páginas responsivas en momentos en que una gran cantidad de desarrollo web (incluido el desarrollo WordPress) todavía tenía que ponerse al día con el desarrollo web responsivo. Originalmente no era responsivo: esto fue añadido en 2012 y se hizo mobile-first en 2013.

Si descargas Bootstrap, verás que consiste en una serie de hojas de estilo (incluyendo versiones minificadas), ficheros javascript y glyphicons, que están incluidos en los ficheros de las fuentes. Esto no reemplaza los ficheros de tu tema: en cambio puedes llamarlos en tu hoja de estilo y fichero de funciones cuando lo necesites.

No voy a darte una explicación detallada de cómo usar Bootstrap con tus temas Wordpress: esto se cubre en detalle en éste tutorial. En cambio veremos cómo Bootstrap puede ayudarte en el desarrollo de tus temas WordPress y en las situaciones en las que podrías o no utilizarlo.

Beneficios de Desarrollar Temas con Bootstrap

La popularidad de Bootstrap como framework para tus temas WordPress indica que definitivamente tiene su sitio. Vamos a ver algunos de os beneficios de usar Bootstrap.

Es Responsivo y Mobile-First

Bootstrap te da automáticamente el estilo responsivo y mobile-first para tu tema. Si has estado esforzándote para familiarizarte con el desarrollo responsivo de temas, esto te ahorrará el duro trabajo de aprender cómo hacer tus propias hojas de estilo responsivas y añadir las media queries.

Bootstrap utiliza un diseño o disposición basada en rejilla de 12 columnas con clases de rejilla lo que te permite utilizar estos elementos en tus ficheros de plantilla para hacer que tu contenido se ajuste en la rejilla.

Entre los beneficios de este enfoque incluye:

Si no estás familiarizado con las media queries, no tienes que escribirlas tú mismo.
El sistema basado en rejilla utiliza CSS orientado a objetos dándote mucha flexibilidad a la hora de estilizar los elementos en tu tema y en tus páginas.
El enfoque de mobile-first significa que tu CSS es más claro y más eficiente que una hoja de estilos desktop-first.

Utiliza un Diseño Moderno, Limpio y Atractivo

En mi opinión, el diseño y tipografía que consigues con Bootstrap es muy bueno y agradable. No va a ganar ningún premio de diseño pero te ayudará a crear un tema moderno, fácil de interactuar con el y legible. Hay otras características de diseño que me gustan particularmente:

el uso del elemento <small> para el texto secundario dentro de los encabezados.
el estilo para blockquotes y citas
el estilo de tabla, que es mucho mejor que los que he visto en un montón de temas WordPress

Funciona muy bien con HTML5.

Al igual que introduce sus propias clases para el estilo, Bootstrap también incluye estilo para todo el rango de elementos de HTML5 que puedes esperar para usar en tu tema. Dar estilo a todo esto desde el principio puede ser un verdadero incordio por lo que te ahorra mucho trabajo, al igual que te hace más fácil usar el marcado semántico en tu tema.

Te Da Acceso Fácil a los Scripts

En lugar de tener que usar plugins o scripts de cualquier sitio, Bootstrap te proporciona un amplio abanico de scripts que te ayudarán a añadir las animaciones e interacciones más comunes a tu sitio web. Estas incluyen:

transiciones
modales
desplegables
información sobre herramientas
popovers
botones

... y más. Esto puede hacer más rápido tu desarrollo, y además te aseguras de que todos tus scripts funcionan correctamente con cada otro. Si vas a más de uno o dos de estos, Bootstrap puede hacer el desarrollo de tu tema mucho más fácil; sin embargo, si solo vas a uno o quizá dos, podría haber un enfoque más eficiente con menos código.

Desventajas del Desarrollo de Temas con Bootstrap

Sin embargo, no creo que Bootstrap se la herramienta idónea para todos los desarrolladores de temas Wordpress. Aquí hay algunas desventajas de usar Bootstrap cuando desarrollas tus temas.

Hay mucho que aprender.

Me he referido al sistema de rejilla responsivo utilizado en la hojas de estilo de Bootstrap, y las múltiples clases que puedes utilizar para mejorarlo en tu tema. Es ideal si estás preparado para familiarizarte con esas clases y trabajar en cómo usarlas en tu tema. Sin embargo, si no necesitas un diseño complicado y sólo vas a usar unos pocos estilos, podrías encontrarte perdiendo una cantidad de tiempo desproporcionadamente grande trabajando con todas las clases y con las que vas a usar.

La hoja de estilo inclye 155 líneas de código sólo para este diseño de rejilla en el ancho de pantalla más pequeño: es mucho para conseguir dominar si quieres sacar lo máximo de esto y la mayoría de los temas lo necesitarán.

Además de esto, hay clases para los glyphicons, para botones y mucho más.

Si tu tema va a hacer uso de una porción significante de este estilo (o vas a utilizar Bootstrap para hacer varios temas), entonces vale la pena tomarse el tiempo de aprender cómo funcionan los estilos de Bootstrap. Pero si sólo necesitas un par de columnas y un diseño responsivo podría ser demasiado.

Utiliza Media Queries Fijas.

Las media queries usadas por Bootstrap están basadas en la presunción de que la anchura de las pantallas y dispositivos se está haciendo anticuado.

Estas con las media queries:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Desde el último año mas o menos, el desarrollo responsivo ha pasado de los breakpoints predefinidos a las media queries y hacia los breakpoints basados en el diseño. Mientras esas media queries están basadas y funcionarán con el diseño de Bootstrap (por lo tanto no pueden causar problemas en algún dispositivo o navegador, que hay muchos), no da la flexibilidad que tienes si lo estás codificando tu mismo.

Si tuvieras que decidir añadir una media query intermedia a tu hoja de estilos, tendrías que coger las 155 líneas de la hoja de estilos para el sistemas de rejillas y adaptarlo a tu nuevo breakpoint - no es una tarea que envidie!

It Adds Bloat

Si, supongo que estabas esperando esto - la típica respuesta de cualquier desarrollador web escéptico a nuevo framework o herramienta.

Bootstrap innegablemente te da mucha funcionalidad y estilo que puedes usar en tu tema, y esto es algo bueno. Sin embargo, si sólo vas a utilizar una fracción de lo que te ofrece, significa que estarás añadiendo código extra para nada.

Los ficheros están minificados, lo que te ayuda pero aun así, ¿realmente necesitas todo ese código sin usar en tu tema?

Puede Desalentar el Diseño Imaginativo

Añade Bootstrap a tu tema, llama a la hoja de estilos desde tu hoja de estilos y bam! Tienes un diseño responsivo listo. La mayoría de nosotros estaría tentado para dejar las cosas así, añadiendo algunos ajustes de color ta vez, pero no mucho más.

Esto significa que tu diseño se basará en el de Bootstrap y no el que se requiere para tu sitio web. Trabajo con un montón de clientes y antes de empezar a discutir sobre el diseño de su web, les hago preguntas relacionadas con los objetivos de su web, audiencia y más. Todo esto nos dará información de la web, tanto en términos de visualización como de la interfaz de usuario.

El peligro de que haya muchos temas que usen Bootstrap es que terminaremos con muchos temas cuyo aspecto es similar. Los desarrolladores de temas WordPress han estado haciendo un trabajo espléndido lanzando acusaciones en los últimos años que se sus temas 'se parecen a WordPress' , por lo que ¿queremos que todos nuestros temas 'se parezcan a Bootstrap'?

Bootstrap y WordPress Son Muy Diferentes

Últimamente pienso que el factor más importante que puede posponer el uso de Bootstrap es el hecho de que nunca fue diseñado para trabajar con WordPress, y que trabaja de manera muy diferente.

Un framework de temas WordPress te dará siempre todo lo que obtienes de Bootstrap, y de una manera que es mucho más acorde con la forma de trabajar de los desarrolladores WordPress. No tienen por qué ser caros o tener muchísimo código base: el tema Wonderflux, por ejemplo, es libre y open source, e incluye un diseño de rejilla responsivo (como Bootstrap pero más ligero) y un librería de funciones y hooks que no tienes con Bootstrap.

Un ejemplo de cómo no son compatibles Bootstrap y WordPress está en el diseño del menú de navegación. Tu menú de WordPress no trabaja fuera con Bootstrap habilitado: por lo tanto tienes que crear un menú de navegación personalizado. Esto no es muy difícil de hacer si te sientes cómodo con el código pero añade otro paso al desarrollo de tu tema.

Sumario

Bootstrap definitivamente tiene sus beneficios. Si necesitas un diseño atractivo, limpio y responsivo para tu sitio web y acceder a un número de efectos JavaScript, entonces Bootstrap puede ayudarte a acelerar el proceso de desarrollo de temas.

Sin embargo, si quieres sacarle el máximo a Bootstrap, necesitarás dedicar algo de tiempo a aprenderlo. Hay mucho que aprender con Bootstrap y si no vas a hacer uso de todo entonces podría no valer la pena.

Para concluir, te recomendaría usar Bootstrap en estas circunstancias.

si te has propuesto aprender cómo usar Bootstrap.
si vas a utilizar muchas funcionalidades de Bootstrap como el sistema de rejilla y los scripts.
Si no tienes un diseñador trabajando contigo (o si no eres uno) y quieres un diseño listo para hacer.
Si quieres desarrollar un tema responsivo pero no sabes cómo escribir media queries.

Y te aconsejo no usarlo en estas circunstancias.

Si quieres más flexibilidad con los breakpoints, diseño y la estructura.
si sólo vas a utilizar un script, o si no vas a utilizar el sistema de rejilla.
Si quieres una rápida corrección - Bootstrap no es uno de esos.
si hay un framework de temas WordPress o un tema de inicio que hace el trabajo que necesitas y te da más, como funciones y hooks.

¡Definitivamente la decisión es tuya!

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