MagMax BlogBootstrap
Bootstrap es un conjunto de librerías creadas por empleados de Twitter. Permiten crear un sitio web con una apariencia moderna en muy poco tiempo.
En este artículo me voy a centrar en cómo trabajar con CSS y Bootstrap, no en cómo se utiliza la librería. Es decir: voy a centrarme en cómo organizarse y comenzar a trabajar.
Aunque me centro en Bootstrap, se podría aplicar a otras librerías.
Este artículo es más mi camino personal que otra cosa :D
Distintas maneras de hacer las cosas
A menudo hay más de una forma de hacer lo mismo. En ocasiones, un camino será mejor que el otro, pero lo más normal en informática es que ambos caminos ofrezcan ventajas. Éste es el caso.
En este artículo trataré de contar cómo organizar los archivos para trabajar con Bootstrap. Explicaré las 4 maneras que yo he utilizado, contando sus cosas buenas y malas. La mejor de ellas y la peor dependerán de cada uno.
Descárgatela!
Desde la web de Bootstrap hay muchos enlaces para descargarse todo empaquetado. Una vez en tu máquina, basta descomprimirlo y copiar las CSS y los JS donde se encuentren en tu proyecto. Después se enlazan desde los HTML y… ¡listo!
Éste es el método más habitual y el que usa más gente.
El esquema de directorios sería el siguiente:
.
├── css
│ ├── bootstrap.css
│ └── mycss.css
└── js
├── bootstrap.js
└── myjs.js
Ventajas
Rápido e indoloro. En poco tiempo puedes comenzar a usar la librería.
La CSS se combinará en el cliente con las propias, así que no es necesario tocar nada más.
Desventajas
Resulta difícil llevar sincronizados todos los archivos de Bootstrap, ya que cada uno se encontrará en un directorio distinto. Además, estarán mezclados con los archivos de nuestro proyecto.
Actualizar los archivos puede resultar tedioso y propenso a errores.
Además, la CSS se combinará con la nuestra en el cliente, lo que puede resultar más lento que si se hubiera hecho previamente.
Resulta complicado mantener un estilo común entre las CSS propias y las de bootstrap. Un cambio en cualquiera de ellas puede resultarnos desastroso.
Herencia (Less)
Tratando de evitar el problema de mantener sincronizadas las CSS propia y de bootstrap decidí combinarlas. Así que utilicé Less para combinar los estilos de Bootstrap con los de mi CSS.
De esta manera mis CSS se convertían en archivos Less que importaban y heredaban los estilos de Bootstrap.
El esquema:
.
├── css
│ ├── bootstrap.less
│ └── mycss.less
└── js
├── bootstrap.js
└── myjs.js
Ventajas
Gracias a esto podía realizar pequeños cambios en los estilos de Bootstrap con compatibilidad de estilos.
Desventajas
Aunque al principio parecía muy buena idea, a la larga volvía a hacerse difícil de mantener. Es necesario utilizar los asistentes web de Bootstrap para cada cambio, lo que resulta enrevesado.
Aunque trataba de solucionar un problema, realmente no lo hacía, sino que me daba más dolores de cabeza. La CSS resultante era muy grande.
Combinando repositorios
Da la casualidad de que Bootstrap utiliza Git para gestionarse… Y a mí me gusta Git. El proyecto de esta web está en Git. Así que puedo hacer uso de los submodules.
Así que decidí añadirme todo Bootstrap como dependencia de mi web:
| |
De esta manera añado el módulo en la última versión estable.
A continuación modifiqué mi Makefile para que compilara la librería Bootstrap y me dejara los archivos en los lugares correctos. Así el despliegue será más sencillo.
Para compilarla necesité recess, nodejs y un montón de librerías más, que sólo estaban disponibles en Debian SID. Bueno, como es lo que uso, no tuve mayor problema. Si no usas SID, a lo mejor te lleva un rato instalar todas las dependencias.
El esquema:
.
├── css
│ ├── bootstrap
│ │ └── .git
│ └── mycss.less
├── js
│ └── myjs.js
└── Makefile
Ventajas
Actualizar los archivos resulta trivial: actualizas el repo, cambias la versión y recompilas.
No tengo que estar manteniendo los archivos de Bootstrap en mi repositorio, ya que están en el suyo propio (nunca meto archivos generados en mi repositorio :D)
Desventajas
Se sigue combinando con mis CSS en el cliente y siguen siendo terriblemente grandes.
La gestión de la configuración sigue siendo difícil.
La compilación de bootstrap puede no ser todo lo fácil que debería.
Combinando CSS
Sin embargo aún era complicado gestionar un cambio… Tenía que haber otra manera más sencilla. Y llegado a este punto, tenía que mirar el código de Bootstrap.
Resulta que el archivo bootstrap.less es un índice de todo lo que hay que incluir… Así que me lo copié en mi proyecto y ajusté los paths. También me copié el archivo variables.less. Con mixins.less no me atreví :D
Además puedes comentar o eliminar los include de los módulos que no estés utilizando, obteniendo una CSS aún más pequeña.
Ahora viene lo más chungo: adaptar mi archivo Less para que se ajuste mejor a Bootstrap… Y eso pasa por modificaciones en mis plantillas HTML. Sin embargo, en cuanto empiezas a hacerlo, tu archivo Less comienza a ser más y más pequeño…
En este estado estoy ahora. Aún no he terminado de ajustarlo todo, pero creo que se aprecian resultados.
Y de nuevo, el esquema de directorios:
.
├── css
│ ├── bootstrap
│ │ └── .git
│ ├── mycss.less
│ └── variables.css
├── js
│ └── myjs.js
└── Makefile
Ventajas
Fácil de actualizar, de gestionar y de manejar.
Se combina en el servidor, por lo que el cliente tiene que descargarse mucho menos. Además, me permite gestionar lo que no estoy usando.
Desventajas
Puede resultar muy tedioso en proyectos pequeños.
La detección de errores puede ser un verdadero infierno.
Hay que estar compilando cada vez que se hace un cambio en un archivo Less.
Conclusiones
Ahora que lo conozco, y después de haberme peleado un poco con Bootstrap, debo decir que es una maravilla. Cualquier proyecto de cierta embergadura que haga incluirá la última arquitectura que propongo, ya que es la más sencilla de gestionar a largo plazo.
Sin embargo no es apta para principiantes ni para tener algo en poco tiempo. En esos casos recomendaría las primeras opciones.