¿Cómo actualizar version de Bootstrap?

Modyo ofrece muchas herramientas para la creación acelerada de canales digitales. Una de estas el la plantilla Minimal, que es automáticamente generada al crear un nuevo sitio. Esta plantilla fue creada para proveer una manera ágil de crear sitios tomando en cuenta las mejores prácticas del diseño web, como parte del paquete se incluye Bootstrap 4, una de las librerías más populares entre desarrolladores frontend.

Con el crecimiento continuo de la industria digital, nuevas versiones de Bootstrap están saliendo y hoy veremos cómo cambiar la versión de esta librería a la más reciente.

El primer paso es entender cómo la plantilla Minimal contiene un snippet variables_css en donde los valores se toman desde Bootstrap. Para llevar a cabo el cambio de versión hay dos caminos posibles: uno es cambiar los parámetros de hoja de estilo de Bootstrap y la otra es modificar el CSS directamente.

Para ambos casos, la primer cosa que tenemos que hacer es reemplazar Bootstrap JS con la versión que queremos actualizar. Para esto, dentro de Modyo Platform dirígete a tu sitio y haz click en Plantillas. Abre el archivo bootstrap_js y pega el código Javascript de la última versión de bootstrap.

Then we have to make the decision if we are going to use the variables or not, I will leave you the two possible options so that you can focus on the one you choose.

Luego, debes tomar la opción de cómo llevar a cabo la actualización:

Opción A: Actualizar Bootstrap sin variables

Esta opción tomará la versión más reciente de Bootstrap, sin alguna integración con la plantilla Modyo. Esta es una buena opción si planeas empezar un proyecto desde cero e implementar tus propias hojas de estilo.

Desde Modyo Platform, dentro de Plantillas, abre bootstrap_css y reemplaza el código con la hoja de estilo de la versión actualizada de Bootstrap.

Opción B: Actualizar Bootstrap con variables

Esta opción es recomendada si ya tienes un sitio implementado y solo quieres actualizar Bootstrap a su versión más reciente o si quieres aprovechar las herramientas de desarrollo acelerado que Modyo ofrece. Esto se va a lograr modificando variables dentro de la hoja de estilo.

Para integrar Bootstrap en Modyo Platform, tenemos que abrir la hoja de estilo de la nueva versión de Bootstrap en un editor de texto. Encuentra y reemplaza el color primario (#0d6efd) y cambialo por . Este código Liquid se encuentra dentro del snippet variables y es importante para el funcionamiento correcto de la plantilla.

Este proceso se debe repetir con todas las instancias donde se use #od6efd.

Al terminar de editar la hoja de estilo, en tu sitio de Modyo Platform, dentro de Plantiillas, abre bootstrap_css y reemplaza el código por la nueva hoja de estilo.

Es importante mencionar que la plantilla Minimal fue optimizada para Bootstrap 4. Si se modificaron los valores de grid o de helpers, el resultado final puede ser afectado. Recuerda que puedes ver una vista previa de tu sitio con todos tus cambios usando el modo de vista previa.

Foto por Josh Olalde en Unsplash.