Twitter Bootstrap responsive a 16 columnas

bootstrap

Para el próximo template responsive que voy a crear para Magento me pasaron un diseño en PSD basado en un grid de 16 columnas. Decidí usar el framework Bootstrap de Twitter, pero me di cuenta de que por defecto está basado en 12 columnas en lugar de 16.

En la página de Twitter Bootstrap, que actualmente está en la versión 2.3.0, hay una herramienta de configuración donde es posible bajar un Bootstrap custom diciéndole que es lo que quieres y que no. En la parte inferior están los parámetros del gridsystem donde puedes decirle al generador qué valores quieres tener para número columnas, ancho de cada una de ellas y separación. Estos serían los valores que habría que ponerle para un layout de 16 columnas.

bootstrap-grid

Pero cual es mi sorpresa cuando al descomprimir el archivo .zip que te genera, los archivos bootstrap.responsive.css y bootstrap.responsive.min.css brillan por su ausencia. ARRRGG!!

Después de darle muchas vueltas decido que la mejor opción es bajarme los ficheros less (disponibles en la carpeta less del proyecto Twitter Bootstrap en github) y compilar el fichero yo mismo.

Para usuarios de Mac puede ser relativamente fácil hacer esto ya que existen heramientas muy chulas (como Crunch por ejemplo) que van a las mil maravillas. Pero si trabajas con Windows o Ubuntu puede ser un poco más complicado.

Lo intenté con Simpless en Windows XP pero no me funcionó, ya que por lo visto han dejado un poco de lado el proyecto y al compilar los ficheros me daban errores (luego me enteré de que la librería Less.js la tienen desactualizada y la actualicé pero ni así). También lo intenté con WinLess pero la aplicación cascaba estrepitosamente al intentar abrir el directorio que contiene los archivos .less.

Así que me decidí por hacerlo por terminal en Ubuntu (no hay, o al menos no he encontrado, compiladores gráficos de Less para Ubuntu). Para usar Less en Ubuntu lo mejor es instalar Node.js y luego con Node Package Manager instalar Less. En esta guía David Sadler explica de lujo la instalación de Node.js en Ubuntu, aunque yo me salté el paso que hace el cambio de rama a la 0.6.17, más que nada porque en estos momentos están por la 0.9.9. Así que yo os recomiendo que os saltéis esta línea también

Una vez instalado Node.js hay que instalar less con NPM. La línea que hay que ejecutar en el terminal es la siguiente:

Vale, ahora ya tenemos las herramientas para compilar el archivo responsive.less, pero antes nos tocará cambiar los valores del archivo variables.less alrededor de la linea 272, por los que queremos para soportar responsive a 16 columnas:

Grabamos el archivo variables.less y a continuación compilamos el archivo responsive.less con la siguiente orden:

Con lo que ya tendremos el archivo bootstrap-responsive.css con soporte para 16 columnas que es lo que andábamos buscando. Os dejo a vosotros el tema de la minificación, que hay mil herramientas por ahí.

Act: Gracias a este twitt de @jorgecasar me doy cuenta de que falta una cosa más. En el archivo bootstrap-responsive.css generado, alrededor de la línea 1016 sigue estando .span12 al 100%. Por lo visto esa parte está sin parametrizar en el .less. Habría que cambiar ese código por este otro:

Act2: Me pide James Vergara en los comentarios el archivo bootstrap-responsive.css con soporte para 16 columnas. Aquí lo tenéis:

bootstrap-responsive.css con soporte para 16 columnas

+Info:
http://twitter.github.com/bootstrap
https://coderwall.com/p/vusddq
http://lesscss.org
http://toutpt.makina-corpus.org/en/articles/twitters-bootstrap-for-responsive-web-design-with-16-columns

Una respuesta a “Twitter Bootstrap responsive a 16 columnas”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *